layui中数据表格，删除，修改，获取选中行数据进行处理

<table id="demo" lay-filter="test" class="layui-table">
</table>

var data = [[${times.data}]];
var count = [[${times.count}]];
layui.use('table', function(){
var table = layui.table;
table.render({
toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,elem: '#demo'//table的id
,data: data
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{type: 'numbers', title: '编号',fixed: 'left'}
,{field:'id', title:'ID', fixed: 'left', hide: true}
,{field:'dataDate', title:'时间'}
,{field:'dataType', title:'数据类型'}
,{field:'dataFlg', title:'免考核类型', templet:'#flg'}
,{field:'startDate01', title:'开始时间'}
,{field:'endDate01', title:'结束时间'}
,{field:'startDate', title:'开始日期'}
,{field:'endDate', title:'结束日期'}
,{field:'startTime', title:'开始时间'}
,{field:'endTime', title:'结束时间'}
,{field:'farmIds', title:'场站id'}
,{title:'操作',align:'center', toolbar: '#barDemo',width:150}
]]
,limit:count
,height:'full-150'
,page: false
});

//templet 对免考核类型数据进行处理
<script type="text/html" id="flg">
{{#  if(d.dataFlg == 0){ }}
时间段
{{#  } else { }}
每日某段时间
{{#  } }}
</script>

<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据并复制
</button>
</div>
</script>

<script id="barDemo" type="text/html">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

table.on('toolbar(test)', function(obj){// test为lay-filter
var checkStatus = table.checkStatus(obj.config.id);//选中行
switch(obj.event){
case 'getCheckData': //getCheckData为lay-event
var data = checkStatus.data;
//一些弹出层
var form = layui.form;
layer.open({
type : 1,
title : "复制选中数据",
closeBtn : 0,
area : [ '40%', '40%' ],
anim : 5,
shadeClose : false,
closeBtn : 1,
content : $("#addCopyOne"),
skin : 'layui-layer-dialog-open',
success : function(layero, index) {
form.render();
},
cancel : function(index, layero) {
layer.close(index);
return false;
},
end : function() {
$("#addCopyOne").css("display", "none");
}
})
//保存数据
$('#addCopy').on('click', function() {
var type = $('#dataTypeCopy').find("option:selected").val();
saveCopyData(data,type);
})
break;
};
});

//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
deleteData(data.id)
} else if(obj.event === 'edit'){
editData(data.id)
}
});

后台把String数据转换为list
List<RfzfwMkTime> times = JSON.parseArray(vos, RfzfwMkTime.class);

var url = basePath + "/getSelectDataCopy";
function saveCopyData(data,type){
var vos = JSON.stringify(data);//需要把数据表格选中行数据转换一下
$.ajax({
type : "POST",
url : url,
data : {vos:vos,type:type},//转化为json字符串
success : function(data) {
if ($.trim(data) == "true") {
layer.msg('复制成功', {icon : 1  });
window.setTimeout("javascript:location.href='/noCheck'",2000);
} else {
layer.msg('数据已存在', {icon : 2});
}
},
error : function(data) {
layer.msg('操作失败，请填入数据', { icon : 2 });
}
})
}

• 点赞
• 收藏
• 分享
• 文章举报