# Layui-TreeSelect

**Repository Path**: mazhongyi_admin/treeselect

## Basic Information

- **Project Name**: Layui-TreeSelect
- **Description**: 基于 layui和ztree的树形下拉选择器。支持异步加载，提供点击回调和加载完成后的回调，支持搜索、占位符修改、手动选中节点以及刷新树结构，更多功能参见详细介绍。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://wujiawei0926.gitee.io/treeselect/
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 80
- **Created**: 2018-12-19
- **Last Updated**: 2021-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LayUI拓展组件：TreeSelect树形下拉选择器

#### 项目介绍
基于 layui和ztree的树形下拉选择器。支持异步加载，提供点击回调和加载完成后的回调，支持搜索、占位符修改、手动选中节点以及刷新树结构，更多功能参见使用文档。
演示地址：[演示地址](http://mazhongyi.gitee.io/treeselect)


有问题加群：673841541，不然几个小时才看见



![输入图片说明](https://images.gitee.com/uploads/images/2018/1227/163538_e417d400_569676.gif "222.gif")
#### 使用示例

```
<input type="text" id="tree" lay-filter="tree" class="layui-input">

<script>
    layui.use(['treeSelect', 'form'], function() {
				var setting = {
					view: {
						selectedMulti: true
					},
					check: {
						enable: true
					},
					data: {
						simpleData: {
							enable: true,
							idKey: "id",
							pIdKey: "pId",
							rootPId: 0
						}
					},

				}
				var treeSelect = layui.treeSelect;
				treeSelect.render({
					// 选择器
					elem: '#tree',
					// 数据
					data: 'data/data3.json',
					// 异步加载方式：get/post，默认get
					type: 'get',
					// 占位符
					placeholder: '请输入搜索关键字',
					// 是否开启搜索功能：true/false，默认false
					search: true,
					setting: setting,
					// 点击回调
					click: function(d) {
						console.log(d.current.id);
						document.getElementById("tree").value = d.current.id;
					},
					check: function(d) {
						var value = "";
						for (var i = 0; i < d.current.length; i++) {
							value += d.current[i].id;
							if (i < d.current.length - 1) {
								value += ","
							}
						}
						document.getElementById("tree").value = value;

					},
					// 加载完成后的回调函数
					success: function(d) {
						console.log(d);
						//                选中节点，根据id筛选
						//                treeSelect.checkNode('tree', 3);

						//                获取zTree对象，可以调用zTree方法
						//                var treeObj = treeSelect.zTree('tree');
						//                console.log(treeObj);

						//                刷新树结构
						//                treeSelect.refresh();
					}
				});

				treeSelect.render({
					// 选择器
					elem: '#tree2',
					// 数据
					data: 'data/data3.json',
					// 异步加载方式：get/post，默认get
					type: 'get',
					// 占位符
					placeholder: '占位符',
					// 是否开启搜索功能：true/false，默认false
					search: true,
					setting: setting, //ztree格式设置
					// 点击回调
					click: function(d) {
						console.log(d.current.id);
					},
					check: function(d) {
						console.log(d);
					},
					// 加载完成后的回调函数
					success: function(d) {
						console.log(d);
						//                选中节点，根据id筛选
						//                treeSelect.checkNode('tree', 3);

						//                获取zTree对象，可以调用zTree方法
						//                var treeObj = treeSelect.zTree('tree');
						//                console.log(treeObj);

						//                刷新树结构
						//                treeSelect.refresh();
					}
				});

			});
</script>
```

#### 提示
- 返回数据中的open属性用来判断是否自动展开节点
- 返回数据格式与ztree要求的格式相同

#### 数据格式参考
```
[
    {
        "name": "应用统计系",
        "pId": "1214",
        "id": "121402"
    },
    {
        "name": "材料化学系",
        "pId": "1214",
        "id": "121403"
    },
    {
        "name": "基础数学教学部",
        "pId": "1214",
        "id": "121404"
    },
    {
        "name": "基础化学教学部",
        "pId": "1214",
        "id": "121405"
    },
    {
        "name": "秘书科",
        "pId": "1102",
        "id": "110202"
    },
   
    {
        "name": "作物栽培学与耕作学",
        "pId": "1201",
        "id": "76AA1A932E01EAD5E0506464F06413E2"
    },
    {
        "name": "校卫生所",
        "pId": "1115",
        "id": "111513"
    }
]
```