Day04 Layui table 自动渲染，field格式转换，工具条删除，修改监听
- 1.table自动渲染
使用lay-data ，进行table表格自动渲染。
<table class="layui-table" lay-data="{url:'http://192.168.25.38:8080/jeesite/f/sys/role/list',page:false,id:'idTest'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', fixed: 'left'}">th>
<th lay-data="{field:'name', sort: true, fixed: true}">角色名称th>
<th lay-data="{field:'enname'}">英文名称th>
<th lay-data="{templet:'{{createFormat(d.office.name)}}'}">归属机构th>
<th lay-data="{field:'dataScope'}">数据范围th>
<th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作th>
tr>
thead>
table>注意：当field,是json字符串中对象的某个属性时，则不能用office.name，而应该进行格式转换。
//书写方式
"{templet:'{{createFormat(d.office.name)}}'}">归属机构
//格式转换
function createFormat(o) {
return o;
}
- 2.表格删除
layer.confirm('真的删除行么', function(index) {
$.ajax({
type: 'get',
url: 'http://192.168.25.38:8080/jeesite/f/sys/role/delete',
async: true,
data:{
id:data.id
},
error:function(error){
alert(error.status);
layer.msg("删除失败", {
icon: 5 //出现失败图标
});
},
success: function(result) {
if(result == "success") {
obj.del();
layer.close(index);
layer.msg("删除成功", {
icon: 6 //出现成功图标
});
} else {
layer.msg("删除失败", {
icon: 5
});
}
}
});
});
- 3 完整table操作
<html>
<head>
<meta charset="UTF-8">
<title>角色管理title>
head>
<body>
<div class="layui-btn-group demoTable">
div>
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="active">
<a href="http://localhost:8080/pro/start/#/sys/role/list">角色列表a>
li>
<li>
<a href="http://localhost:8080/pro/start/#/sys/role/form">角色添加a>
li>
ul>
div>
<table class="layui-table" lay-data="{url:'http://192.168.25.38:8080/jeesite/f/sys/role/list',page:false,id:'idTest'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', fixed: 'left'}">th>
<th lay-data="{field:'name', sort: true, fixed: true}">角色名称th>
<th lay-data="{field:'enname'}">英文名称th>
<th lay-data="{templet:'{{createFormat(d.office.name)}}'}">归属机构th>
<th lay-data="{field:'dataScope'}">数据范围th>
<th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作th>
tr>
thead>
table>
<script type="text/html" id="barDemo">
class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">分配</a>
修改a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除a>
script>
<script>
//格式转换
function createFormat(o) {
return o;
}
layui.use(['table', 'jquery'], function() {
$ = layui.$;
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj) {
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj) {
var data = obj.data;
if(obj.event === 'detail') {
layer.msg('ID：' + data.id + ' 的查看操作');
} else if(obj.event === 'del') {
layer.confirm('真的删除行么', function(index) {
$.ajax({
type: 'get',
url: 'http://192.168.25.38:8080/jeesite/f/sys/role/delete',
async: true,
data:{
id:data.id
},
error:function(error){
alert(error.status);
layer.msg("删除失败", {
icon: 5
});
},
success: function(result) {
if(result == "success") {
obj.del();
layer.close(index);
layer.msg("删除成功", {
icon: 6
});
} else {
layer.msg("删除失败", {
icon: 5
});
}
}
});
});
} else if(obj.event === 'edit') {
window.location.href = "http://localhost:8080/pro/start/#/sys/role/form.html?id=" + data.id;
}
});
var $ = layui.$,
active = {
getCheckData: function() { //获取选中数据
var checkStatus = table.checkStatus('idTest'),
data = checkStatus.data;
layer.alert(JSON.stringify(data));
},
getCheckLength: function() { //获取选中数目
var checkStatus = table.checkStatus('idTest'),
data = checkStatus.data;
layer.msg('选中了：' + data.length + ' 个');
},
isAll: function() { //验证是否全选
var checkStatus = table.checkStatus('idTest');
layer.msg(checkStatus.isAll ? '全选' : '未全选')
}
};
$('.demoTable .layui-btn').on('click', function() {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
script>
body>
html>