LayUI table组件常见用法
table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。
下边整理了一个例子:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layer学习</title>
<link href="https://www.swvq.com/Content/mycss.css" rel="stylesheet" />
<link href="https://www.swvq.com/Content/layui/css/layui.css" rel="stylesheet" />
<script src="https://www.swvq.com/Content/layui/layui.js"></script>
</head>
<body>
<!--表格-->
<div lay-filter="test"></div>
<!--工具栏-->
<script type="text/html" id="barDemo">
<a lay-event="edit">编辑</a>
<a 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' //渲染的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>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfggke
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24