本文环境:windows10、layui2.5.6,本文适用于所有品牌的电脑。
在使用layUI的数据表格时,常用到的一些渲染和操作,如下所示:
一、数据表格参数及使用
1.1 图片
templet 参数
注意:a标签也差不多,就是 href=’’/xxx.html/id={{d.id}}"
// {{d.img}} 后台返的图片地址 "d"在layui中特指data,id为templ <script type="text/html" id="image"> <img src='{{d.img}}' class="layui-table-link" style="height: 100%;display: block;"> </script>
1.2 操作 删除、编辑按钮
lay-event=“xxx” toolbar: ‘#id’ 参数
注意:lay-event=" xxx",后续操作就是用这个 ‘xxx’
{ field: 'wealth', title: '操作', toolbar: '#barDemo' } <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit" style="margin-left: 12%;">编辑</a> <a class=" layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>
1.3 单元格编辑
注意:edit: ‘text’ 现在只有text格式 具体看下面实例
{field: 'num', title: '数量', width:80, sort: true,edit: 'text',},
二、实例模板
<body> <table id="demo" lay-filter="test"></table> <script type="text/html" id="image"> <img src='{{d.img}}' class="layui-table-link" style="height: 100%;display: block;"> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit" style=" margin-left: 12%;">编辑</a> <a class=" layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> </body> <script> layui.use(['table','layer'], function(){ var table = layui.table,layer= layui.layer; table.render({ elem: '#demo', // width:500, // height: 312, //contentType: 'application/x-www-form-urlencoded',//若是参数是表单格式的话 //method:"post",//默认为post url: 'xxxx' ,//后台的数据接口 where:{id:"1"},//传的参数 //data:{},//可以是当前展示的,或者后台反的单独拿出来展示,用的时候注释url和where page: true, //开启分页 limit:10,//一页10条数据 limits: [5, 10], //下拉框页码值,一页多少条 cellMinWidth: 80, //全局定义常规单元格的最小宽度,layui 2.2.1 新增 cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},//filed后为data里的k-v中的k; {field: 'num', title: '数量', width:80, sort: true,edit: 'text',}, {field: 'img', title: '图片', width:80, sort: true,templet: '#image',}, //templet: '#image',这个就是自定义图片 “templet” value为id值,开始有介绍 { field: 'wealth', title: '操作', toolbar: '#barDemo' } ]], parseData:function(res){ //res 即为原始返回的数据 return { code: res.code, //解析接口状态 msg: res.msg, //解析提示文本 count: res.count, //解析数据长度 data: res.data //解析数据列表 } }, done: function (res) { //表格完成后 console.log(res) }, }); //监听单元格编辑 table.on('edit(test)', function(obj){ var value = obj.value //得到修改后的值 ,data = obj.data //得到所在行所有键值 ,field = obj.field; //得到字段 layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value); }); //监听行工具事件(编辑删除) table.on('tool(test)', function (obj) { // var data = obj.data //console.log(obj) if (obj.event === 'del') { layer.confirm('真的删除行么', function (index) { obj.del() layer.close(index) }) } else if (obj.event === 'edit') { console.log(obj) layer.open({ title: '', content: '是否修改数据', btnAlign: 'c', btn: ['确认', '取消'], yes: function (index, layero) { layer.close(index) } }) } }) }); </script>
以上就是layui如何设置表格可编辑的详细内容,更多请关注0133技术站其它相关文章!