layui实现树状Treetavble表格

最新推荐文章于 2024-03-23 06:17:57 发布

北木桥溪

最新推荐文章于 2024-03-23 06:17:57 发布

阅读量742

点赞数 1

分类专栏：前端文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_54685622/article/details/125789276

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、定义表格

 <div style="float:left;width:25%">
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
       		</div>

2、表格js实现tree

<script>
    layui.use(['form','table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treeTable = layui.treetable;
        form = layui.form,
        // 渲染表格
        layer.load(2);
        treeTable.render({
            treeColIndex: 1,//设置下拉箭头在第在几列
            treeSpid: 1,//最上级的父级id   (-1是根目录)
            treeIdName: 'deptId',//id字段的名称(自己的id)
            treePidName: 'parentId',//pid字段的名称（父亲的id）
            elem: '#munu-table',//表格的id
            url: '/core/confidentialityagency/listAll',
            page: false,
            cols: [
	            	[
	                {type: 'numbers'},
	                {field: 'deptName', minWidth: 200, title: '机构'}
	            ]
            ],
            done: function () {
                layer.closeAll('loading');
            }
        });
        //点击实现
        table.on('row(munu-table)', function (obj) {
        	alert("机构ID："+obj.data.deptId);
            console.log(obj.data.deptId); //得到当前行数据
          ///根据行Id加载机构数据及人员数据。
        });
 });        
</script>

3、后台实现查询

@RequestMapping("/confidentialityagency/listAll")
	@ResponseBody
	public JsonResult getDeptTress() {
		QueryWrapper<SysDept> queryWrapper=new QueryWrapper<>();
		queryWrapper.lambda().ne(SysDept::getParentId, "-1");//除去根目录，（treeSpid: 1,//最上级的父级id   (-1是根目录)）
		List<SysDept> list = sysDeptMapper.selectList(queryWrapper);
		return JsonResult.success("查看成功", list);
	}