JQuery验证

js----->


var table = initTable();
initValidate();
var datas = [];
var leftList = {};// 左边列表
var leftChangeList = {};// 保存左列表选中数据
var rightList = {};// 右边列表
var rightChangeList = {};// 保存右列表选中数据
var leftCols = [ "policyName" ];// 左列表显示得列
var rightCols = [ "policyName", "defaultValue" ];// 定义右列表显示得列
//添加模板时初始化左侧列表和右边列表
function SearchOption() {
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);
},
});
}

// 列表初始化
function initList(data, slector, cols) {
$("#" + slector + " tbody").remove();
var $tbody = $("<tbody></tbody>");
//console.log(data);
var name = "";// 标识需要修改得列
$.each(data, function(k, v) {
var $tr = $('<tr id="' + k + '"></tr>');

$.each(cols,
function(i, obj) {
if (i == 1) {
name = "key";
}
name = "value";// 标识需要修改得列
var $td = $('<td data-options=' + name + '>' + v[obj]
+ '</td>');
$td.appendTo($tr);
})
$tr.appendTo($tbody);
})
$tbody.appendTo($("#" + slector));
}

// 给tr添加点击事件
$("#templateOfRelation").click(
function(e) {
var e = e || window.event;
var target = e.target;
// 改变颜色
$(target).parent("tr").addClass("active").siblings("tr")
.removeClass('active');

$("#exampleShow tr.active").removeClass('active');

var tId = $(target).parent("tr").prop("id");
var tr = datas[tId];
leftChangeList = {};
leftChangeList[tId] = tr;

});
$("#exampleShow").click(
function(e) {
var e = e || window.event;
var target = e.target;

// 改变颜色
$(target).parent("tr").addClass("active").siblings("tr")
.removeClass('active');
$("#templateOfRelation tr.active").removeClass('active');
var tId = $(target).parent("tr").prop("id");
var tr = datas[tId];
rightChangeList = {};
rightChangeList[tId] = tr;
})

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

var isRepeat = false;
$.each(leftChangeList, function(k, v) {
// 判断添加的数据是否重复
$.each(rightList, function(i, obj) {
if (k == i) {
isRepeat = true;
alert("不能重复添加！");
return true;
}
})
if (isRepeat) {
return false;
}
rightList[k]= v;
})

initList(rightList, "exampleShow", rightCols);
})
$("#btnDel").click(function() {
var tmpeList = {};
var isNull = true;
console.log(rightChangeList);
$.each(rightChangeList, function(k, v) {
isNull = false;
$.each(rightList, function(i, obj) {
if (k == i) {
return true;
}
tmpeList[i] = obj;
})
})
rightList = isNull ? rightList : tmpeList;

initList(rightList, "exampleShow", rightCols);
})
$("#exampleShow").dblclick(function(e) {
var e = e || window.event;
var target = e.target;
if ($(target).attr("data-options") == "value") {
var oldNum = $(target).html();// 保存原有数据
$(target).empty();
var $input = $("<td>"+oldNum+"</td>");
$input.appendTo($(target));
$input.focus();
$input.blur(function() {
if ($(this).val() != "") {
var key = $(this).parent().parent().prop("id");
rightList[key]["defaultValue"] = $(this).val();
}
initList(rightList, "exampleShow", rightCols);
});
}
});

//保存模板信息表
function saveTemplateInfo(){
//不绑定添加事件
//$("#saveEditTemplateInfo").unbind("click");

//点击保存按钮触发事件
$("button#saveEditTemplateInfo").bind("click",function(){

if ($("form").valid()){
//获取表格的模板名称
var policyTemplateName=$("#policyTemplateName").val();
var test=[];
$.each(rightList,function(k,obj){
test.push(obj);
})
//获取左边字典的列表[]
var j={"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();

//查询模板表
function searchTemplate(){
$("#searchButton").click(function(){
table.draw();
});
}
function initTable(){
var table = $('#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 ) {
var datas = Util.getObject("form#searchForm");
var searchData = {};
for (var key in datas) {
searchData[key] = datas[key];
}
d['searchData'] = searchData;
return JSON.stringify(d);
},
'dataSrc': 'data'
},
"columns": [
/* { "data": "templateId" },*/
{ "data": "policyTemplateName" },
{ "data": "createTime"},
{"data":null}
],
'columnDefs': [
{
targets: -1,
render : function(data, type, row) {
var html = "<button data-code='' type='button' class='btn btn-primary btn-sm' id='editbtn' data-localize=''>修改</button>\n"
+ "<button data-code='' type='button' class='btn btn-danger btn-sm' id='delTemplate"+row.templateId+"' data-localize='' οnclick='delTemplate("+row.templateId+");'>删除</button>\n"
+ "<button data-code='' type='button' class='btn btn-primary btn-sm' id='deltailTemplate' data-localize=''>详情</button>\n";
return html;
}
}
],
"language": {
"lengthMenu":"_MENU_条记录每页",
"zeroRecords": "没有找到记录",
"info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
"infoEmpty": "无记录",
"infoFiltered": "(从 _MAX_ 条记录过滤)",
"paginate": {
"first":"首页",
"last":"尾页",
"previous":"上一页",
"next":"下一页"
}
},
});
return table;
}

//模板表信息的校验
function initValidate(){
//添加模板表信息初始验证
$("#addPolicyTemplate Form").validate({
rules: {
policyTemplateName: {required: true, maxlength: 256},
}
});
//修改模板信息初始验证
$("#editDiv Form").validate({
rules: {
policyTemplateName: {required: true, maxlength: 256},
}
});
}



//校验下拉框
function initValidForm(selector){
$(selector+" input").val("");
$(selector+" select option:first-child").attr("selected", true).siblings().removeAttr("selected");
$(selector+" .has-error").removeClass("has-error").children("label.error").hide();
}

//添加模板表
function addTemplate(){

//添加
$("#addTemplateButton").bind("click", function(){
initValidForm("#addPolicyTemplate");
//显示添加表单
$("#exampleShow").empty();
$("#addPolicyTemplate").modal('show');
SearchOption();


});
initValidate();
saveTemplateInfo();
}


//查看模板详细信息
function deltailTemplate(){
//模板详细信息
$('#example tbody').on( 'click',"button#deltailTemplate", function(){
var data = table.row( $(this).parents('tr') ).data();
var templateId = data['templateId'];
$.ajax({
'url': $.baseUrl+"/policyTemplateManager/listPolicyDictionary",
'type': "post",
'data': {"templateId": templateId},
'success': function(d){
if(d!=null){
//清空table的内容
$("#listDictinaryDetail").empty();
//向table中添加一个表头信息
var tr1=$("<tr></tr>");
var td1=$("<td>字典名称</td>");
var td2=$("<td>默认值</td>");
td1.appendTo(tr1);
td2.appendTo(tr1);
tr1.appendTo($('#listDictinaryDetail'));
//定义一个需要显示的列的集合
var cols=["policyName","defaultValue"];
//遍历后台返回的list集合
$.each(d,function(i,obj){
var tr=$("<tr></tr>");
$.each(cols,function(k,v){
var td=$("<td>"+obj[v]+"</td>");
td.appendTo(tr);
});
tr.appendTo($('#listDictinaryDetail'));
});
//添加关闭按钮
var tr2=$("<tr></tr>");
var td3=$("<td></td>");
var td4=$("<td><button type='button' class='btn btn-default' data-dismiss='modal' data-localize='close'>关闭</button></td>");
td3.appendTo(tr2);
td4.appendTo(tr2);
tr2.appendTo($('#listDictinaryDetail'));
$("#showDetailDictionary").modal('show');
}else{
alert("该模板暂无详情信息");
}
},
});
});
}


/**修改操作的保存事件*/
function saveTemplateInfoForEdit() {
// 点击保存按钮触发事件
$("button#save_edit").bind("click", function() {
var templateId=$("#templateName_edit").prop("name");
// 获取表格的模板名称
var policyTemplateName = $("#templateName_edit").val();
var test = [];
$.each(rightList, function(k, obj) {
test.push(obj);
})
// 获取左边字典的列表[]
var j = {
"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("保存出错！");
}
},
});
});
}


//修改策略模板信息
function edit() {
saveTemplateInfoForEdit();
$('#example tbody').on('click',"button#editbtn",function() {

var row = table.row($(this).parents('tr'));
// 获得要修改的行的原数据
var data = row.data();
//模板的ID
var templateId = data["templateId"];
//获取模板名称
var templateName = 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) {
var e = e || window.event;
var target = e.target;
$(target).parent("tr").addClass("active").siblings("tr").removeClass('active');
//右侧策略的默认值移除编辑的样式
$("#exampleShow_edit tr.active").removeClass('active');
var tId = $(target).parent("tr").prop("id");
var tr = datas[tId];
leftChangeList = {};
leftChangeList[tId] = tr;
});


/* 修改操作 给右侧tr添加点击事件 */
$("#exampleShow_edit").click(
function(e) {
var e = e || window.event;
var target = e.target;
$(target).parent("tr").addClass("active").siblings("tr").removeClass('active');
$("#templateOfRelatio_edit tr.active").removeClass('active');
var tId = $(target).parent("tr").prop("id");
var tr = datas[tId];
rightChangeList = {};
rightChangeList[tId] = tr;
})

/* 修改操作 给右侧tr绑定ADD事件 */
$("#btnAdd_edit").click(function() {
var isRepeat = false;
$.each(leftChangeList, function(k, v) {
$.each(rightList, function(i, obj) {
if (k == i) {
isRepeat = true;
alert("不能重复添加！");
return true;
}
})
if (isRepeat) {
return false;
}
rightList[k] = v;
})
initList(rightList, "exampleShow_edit", rightCols);
})

/* 修改操作 给右侧tr绑定DEL事件 */
$("#btnDel_edit").click(function() {
var tmpeList = {};
var isNull = true;
console.log(rightChangeList);
$.each(rightChangeList, function(k, v) {
isNull = false;
$.each(rightList, function(i, obj) {
if (k == i) {
return true;
}
tmpeList[i] = obj;
})
})
rightList = isNull ? rightList : tmpeList;
initList(rightList, "exampleShow_edit", rightCols);
})

//删除模板表
function delTemplate(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>
<div class="title _line">
<span class="text-info">策略模板管理</span>
</div>
<div class="container-fluid">
<form id="searchForm">
<div class="searchForm clearfix">
<div class="col-xs-8">
<div class="row">
<div class="col-xs-12">
<input type="text" name="policyTemplateName" class="form-control" placeholder="请输入模板名称"/>
</div>
</div>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-primary btn-block" id="searchButton">查找</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-primary btn-block" id="addTemplateButton">添加</button>
</div>
</div>
</form>
<div class="list-itle text-center">
<span>策略模板配置信息</span>
</div>
<table id="example" class="table table-hover table-condensed">
<thead>
<tr>
<!-- <td data-localize="policyId">模板ID</td> -->
<td data-localize="policyTemplateName">模板名称</td>
<td data-localize="createTime">创建时间</td>
<td data-localize="operation">操作</td>
</tr>
</thead>
</table>
</div>
</section>
<!--//添加-->
<div class="modal fade" id="addPolicyTemplate" role="modal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" data-localize="">添加模板</h4>
</div>
<div class="modal-body"style="height:400px;overflow-x:auto;">
<div class="box-body">
<form role="form" class="form-horizontal" id="templateRelationForm">
<div class="container-fluid">
<div class="form-group valid">
<label for="" class="control-label" data-localize="">模版名称</label>
<input type="text" class="form-control" placeholder="请输入模版名称"
name="policyTemplateName" id="policyTemplateName" data-localize="">
<label for="policyTemplateName" class="control-label"style="display: none"></label>
</div>
<div class="col-sm-5">
<div class="panel panel-success">
<div class="panel-heading">策略字典表</div>
<table class="table table-hover" id="templateOfRelation">
</table>
</div>
</div>
<div class="col-sm-2" >
<div class="btn-center">
<button type="button" class="btn btn-primary" id="btnAdd"
data-localize="save">添加 →</button>
<hr>
<button type="button" class="btn btn-primary" id="btnDel"
data-localize="save">删除←</button>
</div>
</div>
<div class="col-sm-5">
<div class="panel panel-success">
<div class="panel-heading">字典名称-默认值</div>
<table class="table table-hover" id="exampleShow">
<thead>
<tr>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="saveEditTemplateInfo"
data-localize="">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

<!-- 模板的详情信息 -->
<div class="modal fade" id="showDetailDictionary" role="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" data-localize="">模板表配置信息详情</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="row">
<div class="col-md-12">
<table id="listDictinaryDetail" class="table table-striped table-bordered">
<thead>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!--修改操作 -->
<div class="modal fade" id="editDiv" role="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" data-localize="">修改模板</h4>
</div>
<div class="modal-body" style="height:400px;overflow-x:auto;">
<div class="box-body">
<form role="form" class="form-horizontal" id="editForm">
<div class="container-fluid">
<div class="form-group valid">
<label for="" class="control-label" data-localize="">模版名称</label>
<input type="text" class="form-control" placeholder="请输入模版名称"
name="" id="templateName_edit" data-localize="">
<label for="templateName" class="control-label"
style="display: none"></label>
</div>
<div class="col-sm-5">
<div class="panel panel-success">
<div class="panel-heading">ploicy项</div>
<table class="table table-hover" id="templateOfRelatio_edit">
</table>
</div>
</div>
<div class="col-sm-2">
<div class="btn-center">
<button type="button" class="btn btn-primary" id="btnAdd_edit"
data-localize="save">添加 →</button>
<hr>
<button type="button" class="btn btn-primary" id="btnDel_edit"
data-localize="save">删除←</button>
</div>
</div>
<div class="col-sm-5">
<div class="panel panel-success">
<div class="panel-heading">Policy值</div>
<table class="table table-hover" id="exampleShow_edit">

</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal" data-localize="close">关闭</button>
<button type="button" class="btn btn-primary" id="save_edit"
data-localize="">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>