<table id="groupTable" lay-filter="group"></table>
//初始化表格
initTable()
function initTable() {
$.ajax({
type: "get",
contentType: 'application/json',
dataType: "json",
url: "json/device.json",
async: false,
success: function(data) {
layui.use('table', function() {
var table = layui.table;
table.render({
elem: '#groupTable',
data: data,
page: true,
limit: 10,
limits: [10, 20, 50],
parseData: function(res) {
return {
"code": 0,
"count": res.length,
"data": res
}
},
cols: [
[ //表头
{
checkbox: true,
},
{
title: '序号',
toolbar: '#indexTpl',
width: 100
}, {
field: 'name',
title: '分组名称',
unresize: true,
sort: true,
width: 510
}, {
field: 'ip_address',
title: '分组属性',
unresize: true,
width: 510,
sort: true,
},
{
field: 'right',
title: '操作',
unresize: true,
toolbar: '#groupDemo',
width: 520,
sort: true,
}
]
]
});
});
},
})
}
//json格式
[
{
"id": 1,
"name": "广州市天河区模拟设备",
"ip_address": "192.168.0.12",
}
]
//序号自增
<script type="text/html" id="indexTpl">
{{d.LAY_TABLE_INDEX+1}}
</script>
//增删改
<script type="text/html" id="groupDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<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>
//增删改按钮事件
layui.use('table', function() {
var table = layui.table;
//group是lay-filter的值
table.on('tool(group)', function(obj) {
var data = obj.data;
//查看按钮
if (obj.event === 'detail') {
$("#myModal").modal("show")
var id = data.id
detail(id)
//删除按钮
} else if (obj.event === 'del') {
layer.confirm('是否确定删除', function(index) {
obj.del();
layer.close(index);
});
//编辑按钮
} else if (obj.event === 'edit') {
$("#editModal").modal("show")
}
});
})