LayUI—tree树形结构的使用

最新推荐文章于 2024-03-13 10:13:33 发布
最新推荐文章于 2024-03-13 10:13:33 发布
阅读量10w+ 收藏 214
点赞数 64
分类专栏： 前端 LayUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40205116/article/details/100180581
版权
前端 同时被 2 个专栏收录
27 篇文章 8 订阅
订阅专栏
LayUI
10 篇文章 4 订阅
订阅专栏

树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理一下。

官网地址：https://www.layui.com/v1/doc/modules/tree.html

先看一下显示的效果图。

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

先需要引入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<Dept> 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<Dept> getChildren() {
        return children;
    }

    public void setChildren(List<Dept> children) {
        this.children = children;
    }

    public Dept(Integer id, String name, String deptName, String phone, String number, double idx, Dept parent, List<Dept> 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树形菜单，只需要一个标签容器即可。

<div id="dept_tree">
</div>

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

<style type="text/css">
    #dept_main, #dept_particulars{
        width: 48.5%;
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        background: white;
        box-sizing: border-box;
    }
    #dept_tree{
        margin-top: 20px;
    }
</style>

<div id="dept_main" style="margin-right: 2%;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>所有部门</legend>
    </fieldset>
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="addDept"><i class="layui-icon">&#xe654;</i>添加部门</button>
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="gain">获取选中节点</button>
    <div id="dept_tree">

    </div>
</div>
<div id="dept_particulars">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>部门详情</legend>
    </fieldset>
    <div id="dept_home">
        <div class="layui-tree-emptyText">无数据</div>
    </div>
</div>

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<Dept> dpet = deptService.findByParentIsNull(sort);    //查找所有菜单
    List<HashMap<String, Object>> result = new ArrayList<>();    //定义一个map处理json键名问题
    return fun(dpet, result);
}

private Object fun(List<Dept> dpet, List<HashMap<String, Object>> result) {
    for(Dept d : dpet){
        HashMap<String, Object> map = new HashMap<>();
        map.put("id", d.getId());
        map.put("title", d.getName());
        map.put("spread", true);      //设置是否展开
        List<HashMap<String, Object>> result1 = new ArrayList<>();
        List<Dept> 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详情页面代码。

<meta charset="UTF-8" />
<style type="text/css">
    .myData .layui-form-item{
        margin: 20px 100px 10px 45px;
    }
    .myData .layui-form-label{
        width: 85px;
    }
    .layui-input-block {
        margin-left: 120px;
    }
</style>
<form class="layui-form myData" action="save" method="post" lay-filter="stuform">
    <input type="hidden" name="id" data-th-value="${model.id}" />

    <div class="layui-form-item">
        <label class="layui-form-label">上级部门：</label>
        <div class="layui-input-block">
            <input type="text" name="parentId" id="tree" lay-filter="tree" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" th:value="${model.name}" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">部门负责人：</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" th:value="${model.deptName}" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">电话：</label>
        <div class="layui-input-block">
            <input type="text" name="phone" th:value="${model.phone}" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">编号：</label>
        <div class="layui-input-block">
            <input type="text" name="number" th:value="${model.number}" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-block">
            <input type="text" name="idx" value="0" th:value="${model.idx}" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button lay-submit class="layui-btn layui-btn-radius layui-btn-normal" lay-filter="btnSub">
                <i class="layui-icon">&#xe642;</i>修改并保存
            </button>
        </div>
    </div>
</form>

<script th:inline="javascript">
    layui.use(["treeSelect", "form", "tree"], function () {
        var form = layui.form;
        var tree = layui.tree;
        form.render('select');
        var treeSelect = layui.treeSelect;
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: 'dept/treeSelect?id='+[[${model.id==null ? 0 : model.id}]],
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '上级菜单',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 加载完成后的回调函数
            success: function (d) {
                // 选中节点，根据id筛选
                treeSelect.checkNode('tree', [[${model.parent == null? parentId: model.parent.id}]]);
                treeSelect.refresh('tree');
            }
        });

        form.on('submit(btnSub)', function (data) {
            $.post('dept/save', data.field, function (result) {
                if (result.success) {
                    tree.reload('treeId', {data: getData()});
                }
                layer.msg(result.msg, {offset: 'rb'});
            });
            return false;
        });
    });
</script>

上级部门使用的是LayUI下拉树显示的，下拉树数据请求方法。关于下拉树的使用，可以访问LayUI下拉树TreeSelect的使用

@RequestMapping(value="/treeSelect")
@ResponseBody
public Object treeSelect(Integer id) {
    Sort sort = Sort.by("idx");
    Specification<Dept> spec = buildSpec1();
    List<Dept> list = deptService.findAll(spec,sort);
    return buildTree(list, id);
}

private Object buildTree(List<Dept> list, Integer id) {
    List<HashMap<String, Object>> result=new ArrayList<>();
    for (Dept dept : list) {
        if(dept.getId() != id) {
            HashMap<String, Object> node=new HashMap<>();
            node.put("id", dept.getId());
            node.put("name",dept.getName());
            node.put("open", false);
            node.put("checked", false);
            if(dept.getChildren().size() != 0) {
                node.put("children",buildTree(dept.getChildren(), id));
            }
            result.add(node);
        }
    }

    return result;
}

public Specification<Dept> buildSpec1() {
    Specification<Dept> specification = new Specification<Dept>() {

        private static final long serialVersionUID = 1L;

        @Override
        public Predicate toPredicate(Root<Dept> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
            HashSet<Predicate> rules=new HashSet<>();
            Predicate parent = cb.isNull(root.get("parent"));
            rules.add(parent);
            return cb.and(rules.toArray(new Predicate[rules.size()]));
        }

    };
    return specification;
}

显示的效果。

上面修改并保存后台方法（因为修改和新增共用的一个方法，用id区分的）。

@Override
public Object save(DeptForm form) {
    try {
        Dept model = new Dept();
        Integer id = form.getId();
        if(id != null) {
            model = deptService.findById(id);
        }
        //父级菜单id
        Integer parentId = form.getParentId();
        if(parentId == null) {
            model.setParent(null);
        }else {
            model.setParent(new Dept(parentId));
        }
        BeanUtils.copyProperties(form, model,"id", "parent");
        deptService.save(model);
        return new AjaxResult("数据保存成功！");
    } catch (Exception e) {
        return new AjaxResult(false,"数据保存失败");
    }
}

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

edit: ['add', 'update', 'del'], //操作节点的图标
operate: function(obj){
    var type = obj.type; //得到操作类型：add、edit、del
    var data = obj.data; //得到当前节点的数据
    var elem = obj.elem; //得到当前节点元素

    var id = data.id;
    var name = data.title;
    if(type === 'add'){ //增加节点
        $.post("dept/save", {parentId: id, name: "未命名"}, function (result) {
            tree.reload('treeId', {data: getData()});
        })
        //返回 key 值
        return ;
    } else if(type === 'update'){ //修改节点
        $.post("dept/update", {id: id, name: name}, function () {
            tree.reload('treeId', {data: getData()});
        })
    } else if(type === 'del'){ //删除节点
        $.post("dept/delete", {id: id}, function () {
            tree.reload('treeId', {data: getData()});
        });
    };
}

其中operate为操作节点回调方法。

obj.type为操作类型，add为新增，update为修改，edl为删除。obj.data为操作节点后的数据。

新增节点后，向后台发送请求添加节点，save方法和上面修改方法一样，id为新建节点的父级节点id。

修改节点，同样，向后台发送修改请求，并传递对象的id，和修改后的数据作为参数。后台响应方法。

@RequestMapping(value = "/update")
@ResponseBody
public Object update(DeptForm form) {
    try {
        Dept model = deptService.findById(form.getId());
        model.setName(form.getName());
        deptService.save(model);
        return new AjaxResult("数据保存成功！");
    } catch (Exception e) {
        return new AjaxResult(false,"数据保存失败");
    }
}

删除节点同理，传递删除节点的id。删除请求方法。

@RequestMapping(value="/delete")
@ResponseBody
public Object delete(Integer id) {
	try {
		deptService.deleteById(id);
		return new AjaxResult("数据删除成功");
	} catch (Exception e) {
		return new AjaxResult(false,"数据删除失败");
	}
}

使用按钮操作树形菜单。

现在页面中定义两个按钮，给按钮添加lay-demo=""属性，并设置属性值，JS通过这个属性值，绑定点击事件。

<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="addDept"><i class="layui-icon">&#xe654;</i>添加部门</button>
<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="gain">获取选中节点</button>

绑定添加部门和获取选中节点按钮的点击事件的JS代码。

util.event('lay-demo', {
    addDept: function(othis){
        $.get('dept/edit', function(data) {
            layer.open({
                type: 1,
                title: '新增',
                area: ['530px'],
                content: data,
                btn: ['提交', '退出'],
                yes: function () {
                },
                success: function (layero, index) {
                    layui.use('form', function () {
                        var form = layui.form;
                        layero.addClass('layui-form');
                        var submitBtn = layero.find('.layui-layer-btn0');
                        submitBtn.attr('lay-filter', 'formVerify').attr('lay-submit', '');
                        layero.keydown(function (e) {
                            if (e.keyCode == 13) {
                                submitBtn.click();
                            }
                        });

                        form.on('submit(formVerify)', function (data) {
                            $.post('dept/save', data.field, function (result) {
                                if (result.success) {
                                    layer.close(index);
                                    tree.reload('treeId', {data: getData()});
                                }
                                layer.msg(result.msg, {offset: 'rb'});
                            });
                            return false;
                        });
                    });
                }
            })
        })
    },
    gain: function () {
        var checkData = tree.getChecked('treeId');
        var str = JSON.stringify(checkData);
        $.post('dept/checkedGain', {data: str}, function () {
        });
        layer.alert(JSON.stringify(checkData), {shade:0});
    }
});

添加部门按钮点击事件，先发送请求到后台，跳转到eidt新增页面，edit.html新增页面代码，和上面的show.html显示部门详情页面差不多。上级部门同样使用的LayUI下拉树显示的，下拉树数据请求方法，和上面的详情页面下拉树请求方法一致。LayUI下拉树TreeSelect的使用。新增后的保存方法也和上面的保存方法一致。

后台请求方法代码，跳转到edit页面。

@RequestMapping(value = "/edit")
public void edit(){
    
}

edit.html页面完整代码如下。

<meta charset="UTF-8" />
<style type="text/css">
    .myData .layui-form-item{
        margin: 20px 100px 10px 45px;
    }
    .myData .layui-form-label{
        width: 85px;
    }
    .layui-input-block {
        margin-left: 120px;
    }
</style>
<form class="layui-form myData" action="save" method="post" lay-filter="stuform">

    <div class="layui-form-item">
        <label class="layui-form-label">上级部门：</label>
        <div class="layui-input-block">
            <input type="text" name="parentId" id="tree2" lay-filter="tree2" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">部门负责人：</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">电话：</label>
        <div class="layui-input-block">
            <input type="text" name="phone" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">编号：</label>
        <div class="layui-input-block">
            <input type="text" name="number" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-block">
            <input type="text" name="idx" value="0" class="layui-input" />
        </div>
    </div>
</form>

<script th:inline="javascript">
    layui.use(["treeSelect", "form"], function () {
        var form = layui.form;
        form.render('select');
        var treeSelect = layui.treeSelect;
        treeSelect.render({
            // 选择器
            elem: '#tree2',
            // 数据
            data: 'dept/treeSelect',
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '上级菜单',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 加载完成后的回调函数
            success: function (d) {
            }
        });
    });
</script>

页面效果。

获取选中节点按钮点击事件。如果项目需要保存数据时，就需要获取到选中节点的数据了。这里可以获取到选中节点的数据，之后当参数传递到后台。传递到后台是一个JSON数据的字符串，需要转换一下，这里给推荐大家两个很好用的JSON转换工具net.sf.json.JSONObject和Alibaba Fastjson。这里用的是Alibaba Fastjson，需要引入以下依赖。

<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>fastjson</artifactId>
	<version>1.2.47</version>
</dependency>

这里用于输出，新建了一个和tree的json数据的键名称一样的工具类DeptTree，代码如下。

import java.util.ArrayList;
import java.util.List;

public class DeptTree {
    private Integer id;
    private String title;
    private boolean checked;
    private boolean spread;
    private List<DeptTree> children = new ArrayList<>();

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public List<DeptTree> getChildren() {
        return children;
    }

    public void setChildren(List<DeptTree> children) {
        this.children = children;
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
    }

    public boolean isSpread() {
        return spread;
    }

    public void setSpread(boolean spread) {
        this.spread = spread;
    }
}

后台接收到传递过来的JSON数据字符串，转换后输出方法。

@RequestMapping(value = "/checkedGain")
@ResponseBody
public void checkedGain(String data){
    List<DeptTree> array2 = JSONArray.parseArray(data, DeptTree.class);
    treeData(array2);
}

//递归输出选中数据
private void treeData(List<DeptTree> array2) {
    for (DeptTree tree: array2){
        System.out.println(tree.getTitle()+"==="+tree.getId());
        if(tree.getChildren() != null){
            treeData(tree.getChildren());
        }
    }
}

选中节点，点击获取选中节点数据。

后台对应方法接收到数据，转换后输出结果。

数据拿到了，之后保存方法就简单了。

后台方法代码基本都在上面了，页面全部代码。

<style type="text/css">
    #dept_main, #dept_particulars{
        width: 48.5%;
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        background: white;
        box-sizing: border-box;
    }
    #dept_tree{
        margin-top: 20px;
    }
</style>

<div id="dept_main" style="margin-right: 2%;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>所有部门</legend>
    </fieldset>
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="addDept"><i class="layui-icon">&#xe654;</i>添加部门</button>
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="gain">获取选中节点</button>
    <div id="dept_tree">

    </div>
</div>
<div id="dept_particulars">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>部门详情</legend>
    </fieldset>
    <div id="dept_home">
        <div class="layui-tree-emptyText">无数据</div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['tree', 'util', 'layer'], function() {
        var tree = layui.tree;
        var util = layui.util;
        var layer = layui.layer;
        tree.render({
            elem: '#dept_tree',
            data: getData(),
            id: 'treeId',
            showCheckbox: true,     //时候显示复选框
            onlyIconControl: true,
            edit: ['add', 'update', 'del'], //操作节点的图标
            click: function (obj) {
                var id = obj.data.id;
                $("#dept_home").load("dept/show?id="+id);
            },
            operate: function(obj){
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素

                var id = data.id;
                var name = data.title;
                if(type === 'add'){ //增加节点
                    $.post("dept/save", {parentId: id, name: "未命名"}, function (result) {
                        tree.reload('treeId', {data: getData()});
                    })
                    //返回 key 值
                    return ;
                } else if(type === 'update'){ //修改节点
                    $.post("dept/update", {id: id, name: name}, function () {
                        tree.reload('treeId', {data: getData()});
                    })
                } else if(type === 'del'){ //删除节点
                    $.post("dept/delete", {id: id}, function () {
                        tree.reload('treeId', {data: getData()});
                    });
                };
            }
        });

        util.event('lay-demo', {
            addDept: function(othis){
                $.get('dept/edit', function(data) {
                    layer.open({
                        type: 1,
                        title: '新增',
                        area: ['530px'],
                        content: data,
                        btn: ['提交', '退出'],
                        yes: function () {
                        },
                        success: function (layero, index) {
                            layui.use('form', function () {
                                var form = layui.form;
                                layero.addClass('layui-form');
                                var submitBtn = layero.find('.layui-layer-btn0');
                                submitBtn.attr('lay-filter', 'formVerify').attr('lay-submit', '');
                                layero.keydown(function (e) {
                                    if (e.keyCode == 13) {
                                        submitBtn.click();
                                    }
                                });

                                form.on('submit(formVerify)', function (data) {
                                    $.post('dept/save', data.field, function (result) {
                                        if (result.success) {
                                            layer.close(index);
                                            tree.reload('treeId', {data: getData()});
                                        }
                                        layer.msg(result.msg, {offset: 'rb'});
                                    });
                                    return false;
                                });
                            });
                        }
                    })
                })
            },
            gain: function () {
                var checkData = tree.getChecked('treeId');
                var str = JSON.stringify(checkData);
                $.post('dept/checkedGain', {data: str}, function () {
                });
                layer.alert(JSON.stringify(checkData), {shade:0});
            }
        });
    });

    function getData(){
        var data = [];
        $.ajax({
            url: "dept/treeload",    //后台数据请求地址
            type: "post",
            async:false,
            success: function(resut){
                data = resut;
            }
        });
        return data;
    }
    
</script>

如果对你有帮助，点赞关注一下呗^_^，留下你的足迹。

小马 同学
关注
  • 64
    点赞
  • 踩
  • 214
    收藏
    觉得还不错? 一键收藏
  • 73
    评论
专栏目录
layui-tree树形模板
05-30
layui-tree是layui提供的树形管理，可以用于后台做权限列表的使用，只需要后台整理好数据给前台展示，勾选之后提交给后台即可。
layui树形下拉菜单
07-30
layui使用tree完美整合树形下拉菜单，实例已实现初始化下拉列表、动态赋值、获取选中值等功能，一看就懂，下载即用！
php 无限分类实现 layui tree
最新发布
u012285295的博客
03-13 433
格式就是子孙的节点，放到父节点的children下，那php怎么将存入数据库的数据整理成这个样子呢？第一次想到的就是利用递归完成子孙树，但是简单的递归很难加入children这个子节点。注意 33 行的 &$tree[$key] 这句话。这个是一次循环实现无限极分类的关键所在。以地址的形式操作数组。不理解的可以分开打印怎么实现的。处理数据程序 data.php。
LayUi+MVC 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
ab17171313的博客
07-27 1583
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
layui树形菜单动态遍历的例子
10-16
今天小编就为大家分享一篇layui树形菜单动态遍历的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui树形示例.zip
11-05
layui树形表格，之前文章里一直没有提供源码，这次专门把代码抽了出来，注意：不要直接打开页面，路径会乱码，json调用不到，用前端工具打开，例如：Hbuilder 。 文章地址：https://blog.csdn.net/qq_35393472/article/details/83302605
Layui----动态树
m0_74934282的博客
07-12 960
LayUI的动态树（Dynamic Tree）是LayUI框架中提供的一种功能强大且易于使用的组件，用于在网页中展示具有层级结构的数据，LayUI是一款基于jQuery的前端开发框架，动态树是LayUI框架中提供的一个组件，用于在网页中展示具有层级结构的数据，如树形菜单。动态树组件可以实现数据的展开和折叠、节点的选中和取消选中等功能，并提供了丰富的事件和方法，方便开发者对树节点进行操作和控制。通过动态树组件，开发者可以方便地实现树状结构的数据展示和交互操作，提升用户体验。
LayUI中的内置模块之 树形组件文档 - layui.tree
daimeijin的博客
08-14 7397
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 树形组件文档 在一段漫长的雪藏后，我们在 layui 2.5.0 的版本中重新创作了 tree，以便它能够更加适用于绝大多数业务场景，而风格依然遵循 layui 独有的极简和清爽。需要提醒的是，如果
layui框架学习（30：树形模块）
gc_2299的博客
06-29 1383
学习并记录layui框架中内置模块的树形模块的函数、参数设置方式。
LayUi之树形结构的详解（附有全案例代码）
m0_74315688的博客
07-12 2466
怎么灵活的使用LayUi?怎么用LayUi完成树形结构中的数据交互？一篇全部解决，手把手教学！！
Layui之动态树(树形菜单)详解
ChatYU的博客
07-12 2922
树形菜单的展示及编写，菜单栏的级别
layui组件之树形下拉框
04-22
layui组件之树形下拉框例子，看完你就会写下拉树了。不过同时还需要下载ztree的相关js和style 不过压缩包里都有呢！希望对大家有所帮助
layui tree树结构源码
12-21
layui tree树结构源码
layui树形下拉菜单完整实例
10-31
layui使用tree完美整合树形下拉菜单，实例已实现初始化下拉列表、动态赋值、获取选中值等功能，一看就懂，下载即用！
thinkphp转layui树形组件
09-22
由于layui树形组件格式的特殊性，可能从mysql查出数据组装成layui属性组件所需的数据格式这一点会让你头痛； 在该文件中完整的展示了如何利用tp的模型从mysql取得数据，并进行无限分类，最终转换成layui树形组件所需正确格式，当然也添加了一些layui所需的自定义属性（例如：title、spread等），几乎每一行都有注释，也表明了如何将无限分数据转为layui属性组件的要点总结，希望可以帮助到你。
LayUI树形表格treetable使用详解
热门推荐
小马同学
04-29 14万+
LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 layui.config({ base : 'static/layui/' }).extend({ treetable : 'treetable-lay/treetab...
LayUI下拉树TreeSelect的使用
小马同学
12-30 3万+
树形结构在实际开发中是很长用的一种结构。最近写了一个LayUI的小案例，其中用到了TreeSelect，这里整理一下。 TreeSelect官网地址：https://fly.layui.com/extend/treeSelect/ 显示效果图。 因为TreeSelect不是LayUI官方开发的，而是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 之后页面只需要引入...
HTML实现百度地图定位及导航功能
小马同学
04-27 2万+
首先使用百度地图需要在百度地图平台申请一个密钥，网址：http://lbsyun.baidu.com/apiconsole/key 申请之后就可以直接引用了。 效果图： 代码实现（详细注释）: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--适应移...
layui tree树组件回显
09-05
layui tree树组件是一款基于layui框架的前端树形结构展示组件。回显指的是在页面加载完成后，已经选中的节点能够显示出来。 要实现layui tree树组件的回显，首先需要在前端页面引入相应的layui和tree组件的JS和CSS文件。然后通过使用layui的tree组件的API方法，进行节点的添加和选中操作。 具体步骤如下： 1. 初始化tree组件，指定树形容器的ID，如var tree = layui.tree。并设置tree组件的相关参数，如是否开启多选等，可根据实际需要进行配置。 2. 创建一个数据对象，用于存储要回显的节点数据。可以通过后端接口获取到需要回显的数据，然后将数据存储到该对象中。 3. 调用tree组件的方法，将节点数据添加到树形结构中。例如，tree.reload('tree', {data: data})，其中'tree'是树形容器的ID，data是要回显的节点数据。 4. 使用tree组件的方法，将指定的节点选中。例如，tree.setChecked('tree', nodeId)，其中'tree'是树形容器的ID，nodeId是要选中的节点的ID。 5. 最后，通过渲染树形结构，使回显的节点在页面中显示出来。如tree.render()。 通过以上步骤，就可以实现layui tree树组件的回显功能。用户在页面加载完成后，会看到预先设定好的节点已经被选中显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 73
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值