layui如何设置表格可编辑
本文环境：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>
标签：