layui 表格操作


<table id="table1" class="layui-table" lay-filter="table1"></table>


  layui.use('contlist', layui.factory('contlist')).use(['admin','laypage', 'contlist', 'table'], function(){
    var $ = layui.$

    ,table = layui.table;
 

$.ajax({
      url: 'https://easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/ceshi',
      headers: {
        "token": 'dsohaonoagnoangonaog'
      },
      type: 'post',
      dataType: 'json',
      success: function(res) {
        renderTable(res.data);
      }
    })

    // 渲染表格  id="table1" 
    var renderTable = function(data) {
      layer.load(2);
      treetable.render({
        data: data,
        treeColIndex: 2, // 树形图标显示在第几列
        treeSpid: -1, // 最上级的父级id
        treeIdName: 'id', // id字段的名称
        treePidName: 'pid', // pid字段的名称
        treeDefaultClose: true, // 是否默认折叠
        treeLinkage: false, // 父级展开时是否自动展开所有子级
        elem: '#table1', // 表格id
        page: false, // 树形表格一般是没有分页的
        cols: [[
            { type: 'radio' },
            { field: 'bumenid', title: '部门ID' },
            { field: 'bumenname', title: '部门名称' },
            { field: 'sex', title: '上级部门' },
            { field: 'sortnum', title: '排序号' }
        ]],
        done: function() {
          layer.closeAll('loading');
        }
      });
    }
	
	//监听工具条  lay-filter="table1"
  table.on('tool(table1)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID:'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行:<br>'+ JSON.stringify(data))
    }
  });
  
	
	
	
	
})

评论

刷新

友情链接