如何使用layui的数据表格？针对这个问题，这篇文章给出了相对应的分析和解答，希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。
layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。平常我们经常用到的表单排版方式常见的有两种，layui文档中已经给出垂直的排版方式，我们做后台的时候也会用到水平排版方式,用于在页面的顶部进行搜索的时候用到。
使用表格组件能提高大量的开发效率，目前主流的数据表格组件有bootstrap table、layui table、easyUI table等，本教程推荐使用layui框架设置数据表格。
一，如何在表格中添加表单组件（以下我将推荐2种）
1，使用模块引擎的方式（这种方法比较麻烦，个人推荐第二种）
计算
安全
数据库
网络和加速
企业服务
<!-- 是否显示 -->
<script type="text/html" id="isShow"> // 请注意 id之间的关联
{{# if(d.menuDisplay === 'Y'){ }}
<input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" checked>
{{# } else { }}
<input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" >
{{# } }}
</script>{ //在表格对象cols属性中添加
field: 'menuDisplay', /
title: '是否显示',
templet: '#isShow', //模板关联以上定义的
unresize: true,
filter: "isShow",
sort: false
}2，使用 函数的方法
{
field: 'menuDisplay',
title: '是否显示',
unresize: true,
filter: "isShow",
sort: false,
templet: function (d) {
if (d.menuDisplay == ‘Y’) {
return` <input type = "checkbox"
name = "menuDisplay"
value = "`+d.menuId+`"
lay - skin = "switch"
lay - text = "显示|隐藏"
lay - filter = "isShow" > `;
} else {
return` <input type = "checkbox"
name = "menuDisplay"
value = "`+d.menuId+`"
lay - skin = "switch"
lay - text = "显示|隐藏"
lay - filter = "isShow"
checked > `;
}
}
}二、三种初始化渲染方式
我先从最简单的初始化表格写起，如果我直接把全部代码帖出来，你们可能会看得头晕
1，方法渲染：
<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>var table = layui.table
,form = layui.form;
layui.use('table', function () { // 引入 table模块
table.render({
id:"dataTable",//
elem: '#layui_table_id',//指定表格元素
url: '/menu/menuList.ajax', //请求路径
cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
//,even: true //隔行换色
,page: true //开启分页
,limits: [10,20,50] //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
,limit: 10 //每页默认显示的数量
,method:'post' //提交方式
,cols: [[
{type:'checkbox'}, //开启多选框
{
field: 'menuId', //json对应的key
title: 'ID', //列名
sort: true // 默认为 false,true为开启排序
}
]]
});
});java后台返回的json数据格式
{
code: 0,
count: 8, //总行数
data: [,…], //表格数据
msg: ""
}2，自动渲染方法 （以下代码由官方提供，自动渲染的方法 适合复杂行头时使用，一般建议使用上面的方法渲染）
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>三，如何添加编辑按钮
var table = layui.table
,form = layui.form;
layui.use('table', function () { // 引入 table模块
table.render({
id:"dataTable",//
elem: '#layui_table_id',//指定表格元素
url: '/menu/menuList.ajax', //请求路径
cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
//,even: true //隔行换色
,page: true //开启分页
,limits: [10,20,50] //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
,limit: 10 //每页默认显示的数量
,method:'post' //提交方式
,done: function(res, curr, count) { //表格数据加载完后的事件
//调用示例
layer.photos({//点击图片弹出
photos: '.layer-photos-demo'
,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
,cols: [[ {type:'checkbox'}, //开启多选框 { field: 'menuId', //json对应的key title: 'ID', //列名 sort: true // 默认为 false,true为开启排序 },{ fixed: 'right', title: '操作', width: 215, align:'center', toolbar: '#barDemo' //绑定按钮组 } ]] }); });
//监听工具条
table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'detail'){
layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串
layer.msg(data.attrId);
} else if(layEvent === 'del'){
layer.msg('删除'+data.menuId);
console.log(table)
} else if(layEvent === 'edit'){
});
}
});<script type="text/html" id="barDemo"> // id和toolbar 属性绑定
<a class="layui-btn 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>四、 展示图片
{
field: 'img',
title: '图片',
unresize: true,
sort: false,
//style:'height:100px;',
templet:function (d) {
return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;">
<img layer-pid="图片id，可以不写" layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="图片名">
</div>`;
}
}
关于如何使用layui的数据表格就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
