您现在的位置是：网站首页> 编程资料编程资料

LayUI—tree树形结构的使用解析_javascript技巧_

2023-05-24 330人已围观

简介 LayUI—tree树形结构的使用解析_javascript技巧_

树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。

最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理一下。

先看一下显示的效果图

点击节点右面会显示对应部门的详情信息，可以修改。可以自定义按钮添加部门，也可以直接用自带的方法对部门进行新增，修改和删除。可以获取选中的节点，根据项目需求（有的需要选中保存）。

先需要引入LayUI的样式文件JS和CSS。

案例对应的实体类Dept

@Entity public class Dept { private Integer id; private String name; //部门名称 private String deptName; //部门负责人 private String phone; //电话号 private String number; //编号 private double idx; //排序 @JsonIgnore private Dept parent; @JsonIgnore private List children = new ArrayList<>(); @Id @GeneratedValue public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getDeptName() { return deptName; } public void setDeptName(String deptName) { this.deptName = deptName; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public String getNumber() { return number; } public void setNumber(String number) { this.number = number; } public double getIdx() { return idx; } public void setIdx(double idx) { this.idx = idx; } @ManyToOne @CreatedBy public Dept getParent() { return parent; } public void setParent(Dept parent) { this.parent = parent; } @OneToMany(cascade=CascadeType.ALL,mappedBy="parent") @OrderBy(value="idx") public List getChildren() { return children; } public void setChildren(List children) { this.children = children; } public Dept(Integer id, String name, String deptName, String phone, String number, double idx, Dept parent, List children) { this.id = id; this.name = name; this.deptName = deptName; this.phone = phone; this.number = number; this.idx = idx; this.parent = parent; this.children = children; } public Dept(Integer id) { this.id = id; } public Dept() { } }

显示LayUI树形菜单，只需要一个标签容器即可。

在案例中还有一些其他样式，比如右边的详情信息，新增按钮等。

完整代码如下

所有部门
部门详情
无数据

JS请求数据渲染页面代码，data为请求数据源，当时直接放入的请求链接，好像不行，所以之后才写了一个方法去请求数据源。

layui.use(['tree', 'util'], function() { var tree = layui.tree; var util = layui.util; tree.render({ elem: '#dept_tree', data: getData(), id: 'treeId', showCheckbox: true, //是否显示复选框 onlyIconControl: true }); }); function getData(){ var data = []; $.ajax({ url: "dept/treeload", //后台数据请求地址 type: "post", async:false, success: function(resut){ data = resut; } }); return data; }

tree 组件提供的有以下基础参数，可根据需要进行相应的设置。

参数选项说明类型示例值
elem指向容器选择器String/Object-
data数据源Array-
id设定实例唯一索引，用于基础方法传参使用。String-
showCheckbox是否显示复选框Booleanfalse
edit是否开启节点的操作图标。默认 false。
  • 若为 true，则默认显示“改删”图标
  • 若为 数组，则可自由配置操作图标的显示状态和顺序，目前支持的操作图标有：add、update、del，如：edit: ['add', 'update', 'del']
Boolean/Array['update', 'del']
accordion是否开启手风琴模式，默认 falseBooleanfalse
onlyIconControl是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩Booleanfalse
isJump是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式）Booleanfalse
showLine是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。Booleantrue
text自定义各类默认文本，目前支持以下设定：

text: {

defaultNodeName: '未命名' //节点默认名称

,none: '无数据' //数据为空时的提示文本

}

Object-

因为tree指定了json数据的键名称，所以后台传递过来的数据对应的键名不一样时需要做一下处理，或者实体类中的属性名就和tree的JSON数据的键名称一样。

键名：

属性选项说明类型示例值
title节点标题String未命名
id节点唯一索引，用于对指定节点进行各类操作String/Number任意唯一的字符或数字
children子节点。支持设定选项同父节点Array[{title: '子节点1', id: '111'}]
href点击节点弹出新窗口对应的 url。需开启 isJump 参数String任意 URL
spread节点是否初始展开，默认 falseBooleantrue
checked节点是否初始为选中状态（如果开启复选框的话），默认 falseBooleantrue
disabled节点是否为禁用状态。默认 falseBooleanfalse

后台请求数据的方法。

@RequestMapping(value = "/treeload") @ResponseBody public Object treeload(){ Sort sort = Sort.by("idx"); List dpet = deptService.findByParentIsNull(sort); //查找所有菜单 List> result = new ArrayList<>(); //定义一个map处理json键名问题 return fun(dpet, result); } private Object fun(List dpet, List> result) { for(Dept d : dpet){ HashMap map = new HashMap<>(); map.put("id", d.getId()); map.put("title", d.getName()); map.put("spread", true); //设置是否展开 List> result1 = new ArrayList<>(); List children = d.getChildren(); //下级菜单 //这里可以根据自己需求判断节点默认选中 /*if(m.getParent() != null || m.getChildren().size() == 0){ map.put("checked", true); //设置为选中状态 }*/ map.put("children", fun(children, result1)); result.add(map); } return result; }

因为这里新建的实体类字段名和tree指定了json数据的键名称不一样，所以这里用了一个fun递归方法处理的。中间可以根据项目需求，根据条件判断是否需要选中该节点。

返回的JSON数据格式

[ { "children": [ //子节点 { "children": [ { "children": [], "id": 30, "title": "测试", "spread": true }, { "children": [], "id": 31, "title": "开发", "spread": true }, { "children": [ { "children": [], "id": 36, "title": "测试节点", "spread": true } ], "id": 32, "title": "测试", "spread": true } ], "id": 2, "title": "技术部", "spread": true }, { "children": [], "id": 19, "title": "财务部", "spread": true } ], "id": 1, //节点id "title": "某某公司", //节点名称 "spread": true }, { "children": [], "id": 33, "title": "测试", "spread": true } ]

设置节点点击回调方法（在加载数据方法tree.render中添加以下代码）。

click: function (obj) { var id = obj.data.id; $("#dept_home").load("dept/show?id="+id); }

把请求过来的详情页面load到右边的div中显示。后台请求方法

@RequestMapping(value = "/show") public void show(DeptForm form, ModelMap map) throws InstantiationException, IllegalAccessException { Dept model = new Dept(); Integer id = form.getId(); Integer parentId = 0; if(id!=null) { model = deptService.findById(id); parentId = model.getParent()==null?0:model.getParent().getId(); } map.put("parentId", parentId); map.put("model", model); }

DeptForm类为一个接收类，其中字段和实体类中一样。根据请求传递过来的id，查询这条数据的详细信息，之后把查询的当前部门详情数据及父级节点id（用于下拉树TreeSelect）传递给详情页面。

show.html详情页面代码。

提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：LayUI树形表格treetable使用及说明_javascript技巧_

                                                                
下一篇：LayUI下拉树TreeSelect的使用解读_javascript技巧_

                                    

            

        

        

            
相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网