JQuery验证

js----->

vartable=initTable();

initValidate();

vardatas=[];

varleftList={};//左边列表

varleftChangeList={};//保存左列表选中数据

varrightList={};//右边列表

varrightChangeList={};//保存右列表选中数据

varleftCols=["policyName"];//左列表显示得列

varrightCols=["policyName","defaultValue"];//定义右列表显示得列

//添加模板时初始化左侧列表和右边列表

functionSearchOption(){

rightList={};

$.ajax({

'url':$.baseUrl+"/policyDictionaryManager/findAllPolicyDictionary",

'type':'post',

'contentType':"application/json",

'success':function(data){

datas=data;

leftList=data;

//table中，左类别初始化true:只显示名字

initList(leftList,"templateOfRelation",leftCols);

//右列表初始化false:全部显示

initList(rightList,"exampleShow",rightCols);

},

});

}

//列表初始化

functioninitList(data,slector,cols){

$("#"+slector+"tbody").remove();

var$tbody=$("<tbody></tbody>");

//console.log(data);

varname="";//标识需要修改得列

$.each(data,function(k,v){

var$tr=$('<trid="'+k+'"></tr>');

$.each(cols,

function(i,obj){

if(i==1){

name="key";

}

name="value";//标识需要修改得列

var$td=$('<tddata-options='+name+'>'+v[obj]

+'</td>');

$td.appendTo($tr);

})

$tr.appendTo($tbody);

})

$tbody.appendTo($("#"+slector));

}

//给tr添加点击事件

$("#templateOfRelation").click(

function(e){

vare=e||window.event;

vartarget=e.target;

//改变颜色

$(target).parent("tr").addClass("active").siblings("tr")

.removeClass('active');

$("#exampleShowtr.active").removeClass('active');

vartId=$(target).parent("tr").prop("id");

vartr=datas[tId];

leftChangeList={};

leftChangeList[tId]=tr;

});

$("#exampleShow").click(

function(e){

vare=e||window.event;

vartarget=e.target;

//改变颜色

$(target).parent("tr").addClass("active").siblings("tr")

.removeClass('active');

$("#templateOfRelationtr.active").removeClass('active');

vartId=$(target).parent("tr").prop("id");

vartr=datas[tId];

rightChangeList={};

rightChangeList[tId]=tr;

})

//add

$("#btnAdd").click(function(){

varisRepeat=false;

$.each(leftChangeList,function(k,v){

//判断添加的数据是否重复

$.each(rightList,function(i,obj){

if(k==i){

isRepeat=true;

alert("不能重复添加！");

returntrue;

}

})

if(isRepeat){

returnfalse;

}

rightList[k]=v;

})

initList(rightList,"exampleShow",rightCols);

})

$("#btnDel").click(function(){

vartmpeList={};

varisNull=true;

console.log(rightChangeList);

$.each(rightChangeList,function(k,v){

isNull=false;

$.each(rightList,function(i,obj){

if(k==i){

returntrue;

}

tmpeList[i]=obj;

})

})

rightList=isNull?rightList:tmpeList;

initList(rightList,"exampleShow",rightCols);

})

$("#exampleShow").dblclick(function(e){

vare=e||window.event;

vartarget=e.target;

if($(target).attr("data-options")=="value"){

varoldNum=$(target).html();//保存原有数据

$(target).empty();

var$input=$("<td>"+oldNum+"</td>");

$input.appendTo($(target));

$input.focus();

$input.blur(function(){

if($(this).val()!=""){

varkey=$(this).parent().parent().prop("id");

rightList[key]["defaultValue"]=$(this).val();

}

initList(rightList,"exampleShow",rightCols);

});

}

});

//保存模板信息表

functionsaveTemplateInfo(){

//不绑定添加事件

//$("#saveEditTemplateInfo").unbind("click");

//点击保存按钮触发事件

$("button#saveEditTemplateInfo").bind("click",function(){

if($("form").valid()){

//获取表格的模板名称

varpolicyTemplateName=$("#policyTemplateName").val();

vartest=[];

$.each(rightList,function(k,obj){

test.push(obj);

})

//获取左边字典的列表[]

varj={"policyTemplateName":policyTemplateName,"leftChangeList":test};

//ajax修改数据库数据。成功时执行以下数据。

$.ajax({

'url':$.baseUrl+"/policyTemplateInfoManager/savePolicyTemplateInfo",

'type':"post",

'contentType':'application/json',

'data':JSON.stringify(j),

'success':function(data){

$("#addPolicyTemplate").modal("hide");

alert("添加成功！");

table.draw();

},

});

}else{

alert("验证失败！");

}

});

}

//查询

searchTemplate();

//添加

addTemplate();

//详情

deltailTemplate();

//修改模板

edit();

//查询模板表

functionsearchTemplate(){

$("#searchButton").click(function(){

table.draw();

});

}

functioninitTable(){

vartable=$('#example').DataTable({

processing:false,

autoWidth:false,

serverSide:true,

ordering:false,

searching:false,

pagingType:'full_numbers',

ajax:{

'url':$.baseUrl+'/policyTemplateManager/showPolicyTemplate',

'type':'post',

'contentType':"application/json",

"data":function(d){

vardatas=Util.getObject("form#searchForm");

varsearchData={};

for(varkeyindatas){

searchData[key]=datas[key];

}

d['searchData']=searchData;

returnJSON.stringify(d);

},

'dataSrc':'data'

},

"columns":[

/*{"data":"templateId"},*/

{"data":"policyTemplateName"},

{"data":"createTime"},

{"data":null}

],

'columnDefs':[

{

targets:-1,

render:function(data,type,row){

varhtml="<buttondata-code=''type='button'class='btnbtn-primarybtn-sm'id='editbtn'data-localize=''>修改</button>\n"

+"<buttondata-code=''type='button'class='btnbtn-dangerbtn-sm'id='delTemplate"+row.templateId+"'data-localize=''onclick='delTemplate("+row.templateId+");'>删除</button>\n"

+"<buttondata-code=''type='button'class='btnbtn-primarybtn-sm'id='deltailTemplate'data-localize=''>详情</button>\n";

returnhtml;

}

}

],

"language":{

"lengthMenu":"_MENU_条记录每页",

"zeroRecords":"没有找到记录",

"info":"第_PAGE_页(总共_PAGES_页)",

"infoEmpty":"无记录",

"infoFiltered":"(从_MAX_条记录过滤)",

"paginate":{

"first":"首页",

"last":"尾页",

"previous":"上一页",

"next":"下一页"

}

},

});

returntable;

}

//模板表信息的校验

functioninitValidate(){

//添加模板表信息初始验证

$("#addPolicyTemplateForm").validate({

rules:{

policyTemplateName:{required:true,maxlength:256},

}

});

//修改模板信息初始验证

$("#editDivForm").validate({

rules:{

policyTemplateName:{required:true,maxlength:256},

}

});

}

//校验下拉框

functioninitValidForm(selector){

$(selector+"input").val("");

$(selector+"selectoption:first-child").attr("selected",true).siblings().removeAttr("selected");

$(selector+".has-error").removeClass("has-error").children("label.error").hide();

}

//添加模板表

functionaddTemplate(){

//添加

$("#addTemplateButton").bind("click",function(){

initValidForm("#addPolicyTemplate");

//显示添加表单

$("#exampleShow").empty();

$("#addPolicyTemplate").modal('show');

SearchOption();

});

initValidate();

saveTemplateInfo();

}

//查看模板详细信息

functiondeltailTemplate(){

//模板详细信息

$('#exampletbody').on('click',"button#deltailTemplate",function(){

vardata=table.row($(this).parents('tr')).data();

vartemplateId=data['templateId'];

$.ajax({

'url':$.baseUrl+"/policyTemplateManager/listPolicyDictionary",

'type':"post",

'data':{"templateId":templateId},

'success':function(d){

if(d!=null){

//清空table的内容

$("#listDictinaryDetail").empty();

//向table中添加一个表头信息

vartr1=$("<tr></tr>");

vartd1=$("<td>字典名称</td>");

vartd2=$("<td>默认值</td>");

td1.appendTo(tr1);

td2.appendTo(tr1);

tr1.appendTo($('#listDictinaryDetail'));

//定义一个需要显示的列的集合

varcols=["policyName","defaultValue"];

//遍历后台返回的list集合

$.each(d,function(i,obj){

vartr=$("<tr></tr>");

$.each(cols,function(k,v){

vartd=$("<td>"+obj[v]+"</td>");

td.appendTo(tr);

});

tr.appendTo($('#listDictinaryDetail'));

});

//添加关闭按钮

vartr2=$("<tr></tr>");

vartd3=$("<td></td>");

vartd4=$("<td><buttontype='button'class='btnbtn-default'data-dismiss='modal'data-localize='close'>关闭</button></td>");

td3.appendTo(tr2);

td4.appendTo(tr2);

tr2.appendTo($('#listDictinaryDetail'));

$("#showDetailDictionary").modal('show');

}else{

alert("该模板暂无详情信息");

}

},

});

});

}

/**修改操作的保存事件*/

functionsaveTemplateInfoForEdit(){

//点击保存按钮触发事件

$("button#save_edit").bind("click",function(){

vartemplateId=$("#templateName_edit").prop("name");

//获取表格的模板名称

varpolicyTemplateName=$("#templateName_edit").val();

vartest=[];

$.each(rightList,function(k,obj){

test.push(obj);

})

//获取左边字典的列表[]

varj={

"templateId":templateId,

"policyTemplateName":policyTemplateName,

"leftChangeList":test

};

//ajax修改数据库数据。成功时执行以下数据。

$.ajax({

'url':$.baseUrl+"/policyTemplateInfoManager/updatePolicyTemplateInfo",

'type':"post",

'contentType':'application/json',

'data':JSON.stringify(j),

'success':function(data){

if(data!=null){

alert("保存成功！");

$("#editDiv").modal('hide');

table.draw();

}else{

alert("保存出错！");

}

},

});

});

}

//修改策略模板信息

functionedit(){

saveTemplateInfoForEdit();

$('#exampletbody').on('click',"button#editbtn",function(){

varrow=table.row($(this).parents('tr'));

//获得要修改的行的原数据

vardata=row.data();

//模板的ID

vartemplateId=data["templateId"];

//获取模板名称

vartemplateName=data["policyTemplateName"];

//给修改的模板的输入框的name赋值成templateId

$("#templateName_edit").prop("name",templateId);

$("#templateName_edit").val(templateName);

//ajax操作查询出策略字典表中的所有的字典数据后初始到修改的左侧列表中

$.ajax({

'url':$.baseUrl+"/policyDictionaryManager/findAllPolicyDictionary",

'type':'post',

'data':{"templateId":templateId},

'success':function(data){

datas=data;

leftList=data;

//页面中的table，左类别初始化true:只显示字典的名字

initList(leftList,"templateOfRelatio_edit",leftCols);

},

});

//ajax操作查询出策略字典表中的所有的字典数据后初始到修改的右侧列表中

$.ajax({

'url':$.baseUrl+"/policyDictionaryManager/listPolicyDictionary?templateid="+templateId,

'type':'get',

'contentType':"application/json",

'success':function(data){

//将查询出来的数据对右边的列表赋值

rightList=data;

//右列表初始化false:全部显示

initList(rightList,"exampleShow_edit",rightCols);

},

});

//显示策略模板修改的div

$("#editDiv").modal('show');

});

}

/*修改操作给左侧tr添加点击事件*/

//点击修改的table表格

$("#templateOfRelatio_edit").click(

function(e){

vare=e||window.event;

vartarget=e.target;

$(target).parent("tr").addClass("active").siblings("tr").removeClass('active');

//右侧策略的默认值移除编辑的样式

$("#exampleShow_edittr.active").removeClass('active');

vartId=$(target).parent("tr").prop("id");

vartr=datas[tId];

leftChangeList={};

leftChangeList[tId]=tr;

});

/*修改操作给右侧tr添加点击事件*/

$("#exampleShow_edit").click(

function(e){

vare=e||window.event;

vartarget=e.target;

$(target).parent("tr").addClass("active").siblings("tr").removeClass('active');

$("#templateOfRelatio_edittr.active").removeClass('active');

vartId=$(target).parent("tr").prop("id");

vartr=datas[tId];

rightChangeList={};

rightChangeList[tId]=tr;

})

/*修改操作给右侧tr绑定ADD事件*/

$("#btnAdd_edit").click(function(){

varisRepeat=false;

$.each(leftChangeList,function(k,v){

$.each(rightList,function(i,obj){

if(k==i){

isRepeat=true;

alert("不能重复添加！");

returntrue;

}

})

if(isRepeat){

returnfalse;

}

rightList[k]=v;

})

initList(rightList,"exampleShow_edit",rightCols);

})

/*修改操作给右侧tr绑定DEL事件*/

$("#btnDel_edit").click(function(){

vartmpeList={};

varisNull=true;

console.log(rightChangeList);

$.each(rightChangeList,function(k,v){

isNull=false;

$.each(rightList,function(i,obj){

if(k==i){

returntrue;

}

tmpeList[i]=obj;

})

})

rightList=isNull?rightList:tmpeList;

initList(rightList,"exampleShow_edit",rightCols);

})

//删除模板表

functiondelTemplate(id){

if(confirm("你确定要删除吗？")){

$.ajax({

'url':$.baseUrl+"/policyTemplateManager/deletePolicyTemplate/"+id,

'type':"post",

'contentType':'application/json',

'success':function(data){

if(true==data){

$('#delTemplate'+id).parent().parent("tr").remove();

alert("删除成功!");

}else{

alert("删除出错!");

}

},

'error':function(data){

alert("删除出错!");

},

});

}

}

html---->

<section>

<divclass="title_line">

<spanclass="text-info">策略模板管理</span>

</div>

<divclass="container-fluid">

<formid="searchForm">

<divclass="searchFormclearfix">

<divclass="col-xs-8">

<divclass="row">

<divclass="col-xs-12">

<inputtype="text"name="policyTemplateName"class="form-control"placeholder="请输入模板名称"/>

</div>

</div>

</div>

<divclass="col-xs-2">

<buttontype="button"class="btnbtn-primarybtn-block"id="searchButton">查找</button>

</div>

<divclass="col-xs-2">

<buttontype="button"class="btnbtn-primarybtn-block"id="addTemplateButton">添加</button>

</div>

</div>

</form>

<divclass="list-itletext-center">

<span>策略模板配置信息</span>

</div>

<tableid="example"class="tabletable-hovertable-condensed">

<thead>

<tr>

<!--<tddata-localize="policyId">模板ID</td>-->

<tddata-localize="policyTemplateName">模板名称</td>

<tddata-localize="createTime">创建时间</td>

<tddata-localize="operation">操作</td>

</tr>

</thead>

</table>

</div>

</section>

<!--//添加-->

<divclass="modalfade"id="addPolicyTemplate"role="modal">

<divclass="modal-dialog">

<divclass="modal-content">

<divclass="modal-header">

<buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">&times;</span><spanclass="sr-only">Close</span></button>

<h4class="modal-title"data-localize="">添加模板</h4>

</div>

<divclass="modal-body"style="height:400px;overflow-x:auto;">

<divclass="box-body">

<formrole="form"class="form-horizontal"id="templateRelationForm">

<divclass="container-fluid">

<divclass="form-groupvalid">

<labelfor=""class="control-label"data-localize="">模版名称</label>

<inputtype="text"class="form-control"placeholder="请输入模版名称"

name="policyTemplateName"id="policyTemplateName"data-localize="">

<labelfor="policyTemplateName"class="control-label"style="display:none"></label>

</div>

<divclass="col-sm-5">

<divclass="panelpanel-success">

<divclass="panel-heading">策略字典表</div>

<tableclass="tabletable-hover"id="templateOfRelation">

</table>

</div>

</div>

<divclass="col-sm-2">

<divclass="btn-center">

<buttontype="button"class="btnbtn-primary"id="btnAdd"

data-localize="save">添加→</button>

<hr>

<buttontype="button"class="btnbtn-primary"id="btnDel"

data-localize="save">删除←</button>

</div>

</div>

<divclass="col-sm-5">

<divclass="panelpanel-success">

<divclass="panel-heading">字典名称-默认值</div>

<tableclass="tabletable-hover"id="exampleShow">

<thead>

<tr>

</tr>

</thead>

</table>

</div>

</div>

</div>

<divclass="modal-footer">

<buttontype="button"class="btnbtn-primary"id="saveEditTemplateInfo"

data-localize="">保存</button>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<!--模板的详情信息-->

<divclass="modalfade"id="showDetailDictionary"role="modal">

<divclass="modal-dialog">

<divclass="modal-content">

<divclass="modal-header">

<buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">&times;</span><spanclass="sr-only">Close</span></button>

<h4class="modal-title"data-localize="">模板表配置信息详情</h4>

</div>

<divclass="modal-body">

<divclass="box-body">

<divclass="row">

<divclass="col-md-12">

<tableid="listDictinaryDetail"class="tabletable-stripedtable-bordered">

<thead>

</thead>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!--修改操作-->

<divclass="modalfade"id="editDiv"role="modal">

<divclass="modal-dialog">

<divclass="modal-content">

<divclass="modal-header">

<buttontype="button"class="close"data-dismiss="modal">

<spanaria-hidden="true">&times;</span><spanclass="sr-only">Close</span>

</button>

<h4class="modal-title"data-localize="">修改模板</h4>

</div>

<divclass="modal-body"style="height:400px;overflow-x:auto;">

<divclass="box-body">

<formrole="form"class="form-horizontal"id="editForm">

<divclass="container-fluid">

<divclass="form-groupvalid">

<labelfor=""class="control-label"data-localize="">模版名称</label>

<inputtype="text"class="form-control"placeholder="请输入模版名称"

name=""id="templateName_edit"data-localize="">

<labelfor="templateName"class="control-label"

style="display:none"></label>

</div>

<divclass="col-sm-5">

<divclass="panelpanel-success">

<divclass="panel-heading">ploicy项</div>

<tableclass="tabletable-hover"id="templateOfRelatio_edit">

</table>

</div>

</div>

<divclass="col-sm-2">

<divclass="btn-center">

<buttontype="button"class="btnbtn-primary"id="btnAdd_edit"

data-localize="save">添加→</button>

<hr>

<buttontype="button"class="btnbtn-primary"id="btnDel_edit"

data-localize="save">删除←</button>

</div>

</div>

<divclass="col-sm-5">

<divclass="panelpanel-success">

<divclass="panel-heading">Policy值</div>

<tableclass="tabletable-hover"id="exampleShow_edit">

</table>

</div>

</div>

</div>

<divclass="modal-footer">

<buttontype="button"class="btnbtn-default"

data-dismiss="modal"data-localize="close">关闭</button>

<buttontype="button"class="btnbtn-primary"id="save_edit"

data-localize="">保存</button>

</div>

</form>

</div>

</div>

</div>

</div>

</div>