点击刷新
table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
下边整理了一个例子：
<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==t rue ? 'checked' : ''
}}>
</script>
<script>
layui.use(['table', 'form'], function() {
var table = layui.table;
form = layui.form;
//*******************************渲染表格**********************************
table.render({
//------------------------核心参数
elem: '#myTable' //渲染的dom元素
,
url: '/Home/GetUserList' //异步请求接口
,
page: true //开启分页
,
id: 'elementID' //容器唯一ID
,
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的header中添加数据
,
request: { //request设置，默认值如下
pageName: 'page',
limitName: 'limit'
},
response: { //response设置，默认值如下
statusName: 'code',
countName: 'count',
dataName: 'data',
msgName: 'msg'
},
where: { //向后台添加的额外参数
nameParm: 'u',
roleParm: 'o'
}
//-----------------------加载的其他选项
,
done: function(res, curr, count) {
//res为接口返回的数据、count为数据总长度
console.log(res);
console.log(curr);
console.log(count);
},
text: {
none: '暂无相关数据' //默认：无数据。
},
initSort: {
field: 'Id' //排序字段为Id
,
type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
})
//*******************************监听表格**********************************
table.on('tool(test)', function(obj) { //test为lay-filter值
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'edit') {
var id = data.Id;
layer.open({
type: 2,
title: '修改' //标题栏
,
scrollbar: false,
area: ['400px', '300px'],
shade: 0.5,
id: 'layerId' //设定一个id，防止重复弹出
,
moveType: 1 //拖拽模式，0或者1
,
content: '/Home/EditUserInfo?id=' + id
});
} else if(layEvent === 'del') {
layer.confirm('真的删除吗？', function(index) {
obj.del(); //删除对应行（tr）的DOM结构
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');
}
})
});
}
});
//*******************************监听checkbox********************************
//监听操作----置顶
form.on('checkbox(allowSetFilter)', function(obj) {
var pre = {
"Id": this.name,
"IsAllow": obj.elem.checked
};
//alert(this.name+'----'+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>© 著作权归作者所有
举报
发表评论
0/200
