码迷,mamicode.com
首页 > 其他好文 > 详细

Layui:toolbar绑定工具条模板

时间:2020-04-09 10:48:04      阅读:545      评论:0      收藏:0      [点我收藏+]

标签:xxx   接受   接下来   使用   bar   同步   func   结构   confirm   

类型:String,默认值:

通常你需要在表格的每一行加上 查看编辑删除 这样类似的操作按钮,而 tool 参数就是为此而生,你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似,通常接受的是一个选择器,也可以是一段HTML字符。

table.render({
cols: [[
{field:‘id‘, title:‘ID‘, width:100}
,{fixed: ‘right‘, width:150, align:‘center‘, toolbar: ‘#barDemo‘} //这里的toolbar值是模板元素的选择器
]]
});
等价于:
<th lay-data="{field:‘id‘, width:100}">ID</th>
<th lay-data="{fixed: ‘right‘, width:150, align:‘center‘, toolbar: ‘#barDemo‘}"></th>

 

下述是 toolbar 对应的模板,它可以存放在页面的任意位置:

<script type="text/html" id="barDemo">
<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>
<!-- 这里同样支持 laytpl 语法,如: -->
{{# if(d.auth > 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
{{# } }}
</script>
注意:属性 lay-event="" 是模板的关键所在,值可随意定义。

 

接下来我们可以借助 table模块的工具条事件,完成不同的操作功能:

//监听工具条
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,头部工具栏扩展的右侧图标。‘);
}
});

 

Layui:toolbar绑定工具条模板

标签:xxx   接受   接下来   使用   bar   同步   func   结构   confirm   

原文地址:https://www.cnblogs.com/xxzb/p/12665005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!