layui table toolbar 工具条事件

 

前言

layui table 添加一列工具列，放上工具按钮

语法

table.render({
  cols: [[
    {field:'id', title:'ID', width:100},
    {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的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，头部工具栏扩展的右侧图标。');
  }
});

例子

cols: [[
            {field: 'loginName', title: '登陆用户名', minWidth: 100, align: "center"},
            {field: 'operatorName', title: '用户姓名', minWidth: 90, align: "center"},
            {field: 'operatorRole', title: '角色', minWidth: 90, align: "center", templet: operatorRole},
            {field: 'operatorStatus', title: '状态', minWidth: 90, align: "center", templet: operatorStatus},
            {title: '操作', minWidth: 150, templet: "#scoreRuleBar", fixed: "right", align: "center"}
        ]],

<script type="text/html" id="scoreRuleBar">
        {{# if('NORMAL' == d.operatorStatus){ }}
        <button class="layui-btn layui-btn-xs merchantLableEditBtn" style="display:none;"
                lay-event="froze">冻结
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs merchantLableEditBtn" style="display:none;"
                lay-event="delete">注销
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-xs merchantLableEditBtn" style="display:none;"
                lay-event="info">详情
        </button>
        {{# } else if('BANLOGON' == d.operatorStatus){ }}
        <button class="layui-btn layui-btn-xs merchantLableEditBtn" style="display:none;"
                lay-event="unFroze">启用
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs merchantLableEditBtn" style="display:none;"
                lay-event="delete">注销
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-xs merchantLableEditBtn" style="display:none;"
                lay-event="info">详情
        </button>
        {{# } }}
    </script>

// 监听评分规则表工具条
    table.on('tool(tableList)', function (obj) {
        var data = obj.data;
        if ('froze' === obj.event) {
            // 冻结
            editdata = data;
            layer.confirm('确定要冻结当前操作员吗？', {
                btn: ['确定', '取消']
            }, function () {
                operateOperator(editdata, "FROZE");
            }, function () {

            });
        } else if ('delete' === obj.event) {
            // 注销
            deletedata = data;
            layer.confirm('确定要注销当前操作员吗？', {
                btn: ['确定', '取消']
            }, function () {
                operateOperator(deletedata, "CLOSE");
            }, function () {

            });
        } else if ('unFroze' === obj.event) {
            // 启用
            unFrozedata = data;
            layer.confirm('确定要启用当前操作员吗？', {
                btn: ['确定', '取消']
            }, function () {
                operateOperator(unFrozedata, "UNFROZE");
            }, function () {

            });
        } else if ('info' === obj.event) {
            // 详情
            infodata = data;
            var index = layui.layer.open({
                title: "操作员详情",
                type: 2,
                content: "operatorInfo.jsp",
                success: function (layero, index) {
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            });
            layui.layer.full(index);
            $(window).on("resize", function () {
                layui.layer.full(index);
            });
        }
    });