Layui treeTable相关

全栈程序员站长

发布于 2022-08-23 15:47:05

1.8K0

发布于 2022-08-23 15:47:05

大家好，又见面了，我是你们的朋友全栈君。

layui官网是没有treeTable这个功能的，需要下载额外的插件实现，幸运的是有符合layui风格的treeTable插件，此篇围绕树状表格讲述。 treeTable官网指路：https://gitee.com/whvse/treetable-lay/wikis/pages

下载

有Gitee账号

官网TreeTable资源下载路径：https://gitee.com/whvse/treetable-lay

无Gitee账号

我已上传资源：https://download.csdn.net/download/Swn__/13624186

导入

treeTable的导入方式和layui其他组件一样，都是通过layui的语法导入，不同的是你可以将treeTable.js放到你目录的任意一个地方，不是必须要放到layui/lay/modules中，如果你放到你的js目录下，你需要这样配置你的layui（具体根据个人目录设置）。

使用

这里不演示静态表格树，只演示通过API接口获取数据的表格树。

代码如下：

<table class="layui-table layui-form" id="data-table" lay-filter="tableEvent"></table>

//js部分
re = treeTable.render({
	tree: {
		iconIndex: 3, // 折叠图标显示在第几列
		isPidData: true, // 是否是id、pid形式数据
		idName: 'code', // id字段名称
		pidName: 'pcode' // pid字段名称
	},
	elem: '#data-table',//要渲染的表格dom
    url: tableDataUrl, //url接口地址，包括参数
	height: 'full-80',  //设置表格高度，滚动时表头固定
	parseData: function(data){  //对后台传来的参数进行解析，例如message-->msg，若有此函数必须要有return
		tableData = data.data;
		return data;  
	},
	end: function(e) {
		form.render(); //form格式整理
	},
	done: function(res) {
		console.log(tableData); //框架解析后的数据children格式
	},
	cols: [
		[{
				field: 'No',
				title: 'No',
				type: 'numbers',
				width: 50
			},
			{
				field: 'name',
				title: '名称',
				width: 200
			},
			{
				field: 'operate',
				title: '操作',
				align: 'center',
				templet: function(item) {
				    return '<a lay-event="edit" data-toggle="tooltip" data-placement="right" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>' +
							'<a lay-event="delete" data-toggle="tooltip" data-placement="right" title="删除"><i class="layui-icon layui-icon-delete" style="color:red"></i></a>'+
							'<a lay-event="add" data-toggle="tooltip" data-placement="right" title="添加"><i class="layui-icon layui-icon-add-circle" style="color:red"></i></a>';
				},
				width: 150
			},
		]
	]

json数据格式（新版不用指定pid的值，自动识别）说明：通过在数据里面增加open字段来控制是否默认展开 open：true 默认展开如果没有该参数，则是默认关闭，另外，该参数也可以自定义名称，

treeTable.render({
    tree: {
        openName: 'open',   // 自定义默认展开的字段名
    }
});

json数据格式如下：

{
  "code": 0,
  "msg": "",
  "data": [
    {
      "code": 1,
      "name": "系统管理",
      "pcode": 0,
      "open": true  
    },
     {
      "code": 2,
      "name": "用户管理",
      "pcode": 1,
      "open": true  
    },
    {
      "code": 3,
      "name": "查询用户",
      "pcode": 2,
      "open": true  
    },
    {
      "code": 4,
      "name": "添加用户",
      "pcode": 2,
      "open": true  
    },
  ]
}

上述的tree参数中是构成树状表格的关键，除了那些之外，还有部分如下图所示（截取官网图片）：

另外对表格的样式、布局、颜色、也有相应的参数配置，若是想要和layui统一，默认样式还是挺不错的。除了上述参数之外，还提供自定义配置：自定义表头和自定义树形图标。

除了上述加载方式之外，官网还另外提供了两种：懒加载和reqData方法。

懒加载

懒加载用于数据量特别大的情况下，逐层加载，先加载第一层，当下拉框打开之后再加载第二层，这样可以避免等待时间过长的情况。这是官网给出的例子：

var insTb = treeTable.render({
    elem: '#demoTb1',
    url: 'json/menus.json',
    request: {pidName: 'pid'}        // 懒加载请求携带的参数名称
    tree: {
        iconIndex: 1,                // 折叠图标显示在第几列
        idName: 'authorityId',       // 自定义id字段的名称
        pidName: 'parentId',         // 自定义标识是否还有子节点的字段名称
        haveChildName: 'haveChild',  // 自定义标识是否还有子节点的字段名称
        isPidData: true              // 是否是pid形式数据
    },
    cols: [[
        {type: 'numbers'},
        {field: 'authorityName', title: '菜单名称'},
        {field: 'menuUrl', title: '菜单地址'},
        {field: 'authority', title: '权限标识'}
    ]]
});

reqData方式

reqData是通过该函数去请求ajax，通过callback方法回调数据。如果要实现远程访问数据且懒加载，则用这种方式实现。例子如下：

var insTb = treeTable.render({
    elem: '#demoTreeTb',
    tree: {
        iconIndex: 2,           // 折叠图标显示在第几列
        isPidData: true,        // 是否是id、pid形式数据
        idName: 'authorityId',  // id字段名称
        pidName: 'parentId'     // pid字段名称
    },
    cols: [[
        {type: 'numbers'},
        {type: 'checkbox'},
        {field: 'authorityName', title: '菜单名称'},
        {field: 'menuUrl', title: '菜单地址'},
        {field: 'authority', title: '权限标识'}
    ]],
    reqData: function(data, callback) {
        // 在这里写ajax请求，通过callback方法回调数据
        $.get('json/menus.json', function (res) {
            if(res.code==0) callback(res.data);
            else callback(res.msg);
        });
    }
});

懒加载+ajax请求

treeTable.render({
    reqData: function(data, callback) {
        var pid = data?data.id:'';
        $.get('list.json?pid='+pid, function (res) {
            callback(res.data);
        });
    }
});

json数据参考格式：

{"code": 200, "data": [{"id": "1", "name": "xxx", "haveChild": true}]} 通过haveChild标识是否还有子节点，id也是必须的字段，这两个字段的名字可以在tree参数里面自定义。

reqData这个方法里面也可以一次性把所有数据都返回，也可以懒加载。

事件监听

监听工具条点击事件

//这里的data-table是表格的ID，并不是表格的event事件
treeTable.on('tool(data-table)', function(obj){
    var data = obj.data;  // 获得当前行数据
    var event = obj.event; // 获得lay-event对应的值
    if (event === 'edit') {
     	console.log('您点击了编辑');
     } else if (event === 'delete'){
     	console.log('您点击了删除');
     } else if (event === 'add'){
     	console.log('您点击了添加');
     }
});

监听复选框选择

treeTable.on('checkbox(data-table)', function(obj){
    console.log(obj.checked);  // 当前是否选中状态
    console.log(obj.data);  // 选中行的相关数据
    console.log(obj.type);  // 如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

监听单元格编辑：

treeTable.on('edit(test)', function(obj){
    console.log(obj.value); //得到修改后的值
    console.log(obj.field); //当前编辑的字段名
    console.log(obj.data); //所在行的所有相关数据  
});

监听行单双击事件：

// 监听行单击事件
treeTable.on('row(test)', function(obj){
    console.log(obj.tr) //得到当前行元素对象
    console.log(obj.data) //得到当前行数据
    // obj.del(); // 删除当前行
    // obj.update(fields) // 修改当前行数据
});
 
// 监听行双击事件
treeTable.on('rowDouble(test)', function(obj){
    // obj 同上
});

监听单元格单双击事件：

// 监听行单击事件
treeTable.on('cell(test)', function(obj){
    console.log(obj.field); //当前单元格的字段名
    console.log(obj.data) // 得到当前行数据
});
 
// 监听行双击事件
treeTable.on('cellDouble(test)', function(obj){
    // obj 同上
});

实例方法

var insTb = treeTable.render({ });

刷新

insTb.reload(options);   // 重载表格
insTb.refresh();  // 刷新(异步模式)
insTb.refresh(data);  // 刷新(数据模式)
insTb.refresh(id);  // 刷新指定节点下的数据(异步模式)
insTb.refresh(id, data);  // 刷新指定节点下的数据(数据模式)

复选框

insTb.checkStatus();  // 获取选中数据(是否是半选会有一个isIndeterminate字段标识)
insTb.checkStatus(false);  // 获取选中数据，不要半选状态
insTb.setChecked(['1','2']);  // 设置选中数据
insTb.removeAllChecked();  // 移除全部选中

折叠/展开

insTb.expand(id);  // 展开指定节点
insTb.fold(id);  // 折叠指定节点
insTb.expandAll();  // 展开全部
insTb.foldAll();  // 折叠全部

搜索

insTb.filterData('keywords');   // 根据关键字模糊搜索
insTb.filterData(['1','2']);   // 根据id搜索
insTb.clearFilter();   // 清除搜索

更新数据(只更新数据，不更新界面)

insTb.del(id);   // 根据id删除
insTb.update(id, fields);  // 根据id更新

其他方法

pid形式数据转children形式数据

treeTable.pidToChildren(data, idName, pidName, childName);

使用方法

re = treeTable.render({
				treeColIndex: 1, //树形图标显示在第几列
				treeSpid: "", //最上级的父级id
				treeIdName: 'XMID', //id字段的名称
				treePidName: 'PXMID', //pid字段的名称
				treeDefaultClose: true, //是否默认折叠
				treeLinkage: false, //父级展开时是否自动展开所有子级
				elem: '#tree-table', //元素
				cellMinWidth: 80,//最小宽度
				url: tableDataUrl, //请求地址
				 page: false,  //分页
				end: function(e) {
					form.render(); //form格式整理
				},
				done: function(res) {
					tableData = res.data;
				},
				cols: [
					
				],
			});

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/138832.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月6，如有侵权请联系 cloudcommunity@tencent.com 删除

https