# layui扩展-下拉树 selectTree，精简树结构扩展

**Repository Path**: zzf_1/layui_treeSelect

## Basic Information

- **Project Name**: layui扩展-下拉树 selectTree，精简树结构扩展
- **Description**: 扩展layui组件下拉树，特点：通过从后台传递的一维表结构在前端执行解析，减轻后端的工作量并稍微的提升效率
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-10-26
- **Last Updated**: 2022-08-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui扩展-下拉树 selectTree，精简树结构扩展

#### 项目介绍
扩展layui组件下拉树，特点：通过从后台传递的一维表结构在前端执行解析，减轻后端的工作量并稍微的提升效率

#### 软件架构
两个扩展，所在目录：extend
1,streamLineTree.js
2,selectTree.js

#### 使用说明
1,streamLineTree:
``` javascript
	layui.tree({
            elem: '#menu' //传入元素选择器
            , firstParent: null
            , selectedItem: {Id:'6345efa0-e523-4221-96d9-a0d415039a3a'}//选中项的值
            , nodes: res.Data //数据行，参考table.json
            , dataMap: {//数据映射
                id: 'Id',
                parentid: 'ParentId',
                displayName: 'Name',
                spread: 'spread'
            }
            , click: function (node) {//单击事件
				//单击事件
            }
            , done: function (defaultSelectedValue) {//加载完毕回调
                console.log(defaultSelectedValue);
            }
        });

``` 

2,selectTree:
``` javascript

<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo" value="模块管理" selectedvalue="6345efa0-e523-4221-96d9-a0d415039a3a">

layui.extend({ selectTree: 'extend/selectTree'}).use(['jquery', 'tree','selectTree'], function () {
            var selectTree = layui.selectTree;
            layui.$.ajax({
                url: 'table.json'
                , type: 'get'
                , success: function (res) {
                    layui.selectTree.render({
                        elem: '#demo',
                        tree: {
                            firstParent: null //第一层的parent的值
                            , nodes: res.data //nodes的数据一维表
                            , dataMap: {      //接口数据与必须数据的映射关系
                                id: 'Id',
                                parentid: 'ParentId',
                                displayName: 'Name',
                                spread: 'spread'//是否展开，默认展开
                            }
                        }
                    });
                }
            });
```