下拉树形列表layui-treeSelect2

介绍

站在巨人的肩膀上（Layui-TreeSelect基础上），重新构建树形下拉选择框。样式保持和layui尽量相符。

• 暂不支持搜索筛选

1、支持本地JSON对象数据做数据源

2、支持重新刷新整个树结构

3、支持启用禁用节点（作为多选择情况，启用则允许勾选；作为单选节点，启用则显示，否则隐藏）

4、支持zTree的简单树，treeSetting参数

计划：

• 完善禁用和启用
• 支持多选

使用说明

依赖：

layui v2.5.4

zTree v3.5.40 需要引用exhide库

第一步：页面引入 layui和zTree

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<link href="~/lib/zTree.v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/lib/layui/layui.all.js"></script>
<script src="~/lib/zTree.v3/js/jquery.ztree.all.min.js"></script>
<script src="~/lib/zTree.v3/js/jquery.ztree.exhide.min.js"></script>

html下拉框定义

<input type="text" id="treeSel" lay-filter="tree" class="layui-input" placeholder="请选择所属部门" />

初始化（刷新树）

layui.config({
    base: "/lib/laymodules/"
}).extend({
    treeSelect2: 'treeSelect2/treeSelect2'
}).use(["treeSelect2"], function () {
    var treeSelect2 = layui.treeSelect2;
    treeSelect2.render({
        elem: '#treeSel',
        data: [
            {name:'最顶层', id:1, parentId:-1},
            {name:'最高组织部门', id:2, parentId:1},
            {name:'研发部', id:3, parentId:1},
            {name:'硬件研发部', id:4, parentId:1}
        ],
        valueId: "id",//数据源中唯一标准值的属性名称，默认id
        treeSetting: {//zTree配置，详参见zTree官网
            treeId: 'treeSelTree',
            check: {
                enable: false,
                chkboxType: {
                    "Y": "p",
                    "N": "ps"
                },
                chkStyle: "checkbox"
            },
            data: {
                key: {
                    name: "name",
                    title: "name"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: '-1'
                }
            }
        }
        , click: function (obj) {
            console.log(obj);
        }
        , success: function () {
            treeSelect2.selectNode('tree', '4');//选择硬件研发部
        }
    });
});

刷新树，刷新完成之后会触发原来success事件

treeSelect2.refresh('tree', {data:[
    {name:'最顶层', id:1, parentId:-1},
    {name:'最高组织部门1', id:2, parentId:1},
    {name:'研发部1', id:3, parentId:1},
    {name:'硬件研发部1', id:4, parentId:1}
]});

选择节点

treeSelect2.selectNode('tree', 4);//选择id为4的节点

取消选择

treeSelect2.revokeNode('tree');

禁用节点

treeSelect2.disableNode('tree', 4, true);//选择id为4的节点，true为禁用，false为启用

销毁树

treeSelect2.destroy('tree');

获取zTree对象

treeSelect2.zTree('tree');

链接地址

layui-treeselect2