<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<title>layer学习</title>
<link href=
"/Content/mycss.css"
rel=
"stylesheet"
/>
<link href=
"/Content/layui/css/layui.css"
rel=
"stylesheet"
/>
<script src=
"/Content/layui/layui.js"
></script>
</head>
<body>
<!--表格-->
<div id=
"myTable"
lay-filter=
"test"
></div>
<!--工具栏-->
<script type=
"text/html"
id=
"barDemo"
>
<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>
<script type=
"text/html"
id=
"allow"
>
<!-- 这里的 checked 的状态只是演示 -->
<input type=
"checkbox"
name=
"{{d.Id}}"
value=
"{{d.Id}}"
title=
"允许"
lay-filter=
"allowSetFilter"
{{ d.IsAllow == true ? 'checked' : '' }}>
</script>
<script>
layui.
use
(['table','form'],
function
() {
var
table = layui.table;
form = layui.form;
table.render({
elem: '#myTable'
, url: '/Home/GetUserList'
, page: true
, id: 'elementID'
, cols: [[
{ field: 'Id', title: '编号', sort: true, fixed: 'left' }
, { field: 'Name', title: '姓名' }
, { field: 'Age', title: '年龄' }
, { field: 'Role', title: '角色' }
, { field: 'CreateTime', title: '创建时间' }
, {
title: '自定义模板', width: 200
, templet:
function
(d) {
return
'姓名:<span style=
"color: #c00;"
>' + d.Name + '</span>'
}
}
, { field: 'IsAllow', title: '是否使用', templet: '#allow', unresize: true, align: 'center' }
, { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' }
]]
, method: 'post'
, headers: { hello: 'hengheng' }
, request: {
pageName: 'page',
limitName: 'limit'
}
, response: {
statusName: 'code'
, countName: '
count
'
, dataName: 'data'
, msgName: 'msg'
}
, where: {
nameParm: 'u',
roleParm: 'o'
}
, done:
function
(res, curr,
count
) {
console.log(res);
console.log(curr);
console.log(
count
);
}
, text: {
none: '暂无相关数据'
}
, initSort: {
field: 'Id'
, type: 'desc'
}
})
table.on('tool(test)',
function
(obj) {
var
data = obj.data;
var
layEvent = obj.event;
var
tr = obj.tr;
if
(layEvent === 'edit') {
var
id = data.Id;
layer.open({
type: 2
, title: '修改'
, scrollbar: false
, area: ['400px', '300px']
, shade: 0.5
, id: 'layerId'
, moveType: 1
, content: '/Home/EditUserInfo?id=' + id
});
}
else
if
(layEvent === 'del') {
layer.confirm('真的删除吗?',
function
(index) {
obj.del();
layer.close(index);
var
id = data.Id;
$.post(
"/Home/DeleteUserInfo"
, {
"id"
: id },
function
(result) {
if
(result.IsSuccess === 1) {
layer.msg(result.Msg);
table.reload('elementID');
}
else
{
layer.msg(result.Msg);
table.reload('elementID');
}
})
});
}
});
form.on('checkbox(allowSetFilter)',
function
(obj) {
var
pre = {
"Id"
: this.name,
"IsAllow"
: obj.elem.checked
};
$.post('/Home/SetAllow', pre,
function
(result) {
if
(result.IsSuccess === 1) {
layer.msg(result.msg)
}
else
{
layer.msg(result.msg)
}
})
});
});
</script>
</body>
</html>