LayUItable动态表格分栏操作
官方内容//工具条事件table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值
·
官方内容
//工具条事件
table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
} else if(layEvent === 'LAYTABLE_TIPS'){
layer.alert('Hi,头部工具栏扩展的右侧图标。');
}
});
通过单独定义个js(script)id来实现点击与插入html
lay-event="" 这个值很重要
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm layui-btn-normal " lay-event="edit" style="background: #327DF6;width: 50px">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="return" style="width: 50px">确定</a>
</script>
首先定义表单属性cols
{ toolbar: '#barDemo'}
安装官方文档简单来实现以两个为例子
table.on('tool(table)', function (obj) {//注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data;
if (obj.event === 'return') {
//写逻辑
} else if (obj.event === 'edit') {
//写逻辑
}
});
更多推荐
已为社区贡献2条内容
所有评论(0)