Layui：toolbar綁定工具條模板

類型：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，頭部工具欄擴展的右側圖標。');
}
});