# layui-treeselect2

**Repository Path**: wjfjun/layui-treeselect2

## Basic Information

- **Project Name**: layui-treeselect2
- **Description**: 站在巨人的肩膀上（在Layui-TreeSelect基础上），重新构建树形下拉选择框。样式保持和layui尽量相符。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 6
- **Created**: 2019-09-01
- **Last Updated**: 2025-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 下拉树形列表layui-treeSelect2

#### 介绍
站在巨人的肩膀上（[Layui-TreeSelect](https://gitee.com/wujiawei0926/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');
```