# 输入框树形选择

layui需要引入 **ztree** 模块

js

```html
<script src="assets/js/common/layui-input-tree.js"></script>
```

初始化

```js
var layuiInputTree = new LayuiInputTree(layui);
```

···

## 渲染

### 单选

html

```html
<div class="layui-input-block">
    <input type="hidden" id="roleId">
    <input type="text" id="roleName" class="layui-input" placeholder="勾选角色">
</div>
```

js

```js
layuiInputTree.initSelect({
    id: 'roleName',
    url: 'api/role/listztree',
    key: {
        id: 'roleId',
        name: 'roleName',
        title: 'roleName',
        pId: 'roleParentId',
        checked: 'checked',
        children: 'subs',
        isParent: 'isParent',
        isHidden: 'isHidden',
        url: 'url',
    },
    defaultParams: {id: '123123'},
    selectedData: {id: '', name: ''}
    onConfirm: function(zTree, selectedNode) {
        if(!selectedNode) {
            $('#roleId').val('');
            return;
        }
        $('#roleId').val(selectedNode.id);
    },
    onClear: function(zTree) {}
})
```

参数
|名称|类型|描述|是否必填|
|-|-|-|-|
|url|string|请求地址|是|
|id|string|触发选择的input输入框ID|是|
|key|obj|返回列表对象与ztree节点匹配的字段。id:节点id；name:名称；title:标题，pId:上级ID；checked:是否选中；isParent:是否父节点；isHidden：是否隐藏；url:节点链接。以上属性均为非必填|否|
|defaultParams|obj|请求默认携带的参数|否|
|getSelectedData|function|返回已经选择的数据|否|
|onConfirm|function|点击确定按钮后触发|否|
|onClear|function|点击清除按钮后触发|否|

方法

getSelectedData：返回ztree回显时的数据

事件

onConfirm：树形列表点击确定按钮后触发

|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|
|selectedNode|obj|选择的节点|

onClear：树形列表点击清空按钮后触发

|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|

### 多选

html

```html
<div class="layui-input-block">
    <input type="hidden" id="roleIds">
    <input type="text" id="roleNames" class="layui-input" placeholder="勾选角色">
</div>
```

js

```js
var selectedRoles = [{id:'', name:''}]
layuiInputTree.initMultiSelect({
    id: 'roleNames',
    url: 'api/role/listztree',
    key: {
        id: 'roleId',
        name: 'roleName',
        title: 'roleName',
        pId: 'roleParentId',
        checked: 'checked',
        children: 'subs',
        isParent: 'isParent',
        isHidden: 'isHidden',
        url: 'url',
    },
    checkboxType: {Y: '', N: ''},
    defaultParams: {id: '123123'},
    getSelectedDatas: function() {
        return [{id:'', name:''}]
    },
    onConfirm: function (zTree, selectedNodes) {
        // 将返回结果保存，回显时用
        if (selectedNodes.length == 0) {
            $('#roleIds').val('');
            return;
        }
        var roleIds = '';
        $.each(selectedNodes, function (index, item) {
            if (roleIds != '') {
                roleIds += ',';
            }
            roleIds += item.id;
        })
        $('#roleIds').val(roleIds);
    }
})
```

参数
|名称|类型|描述|是否必填|
|-|-|-|-|
|url|string|请求地址|是|
|id|string|触发选择的input输入框ID|是|
|key|obj|返回列表对象与ztree节点匹配的字段。id:节点id；name:名称；title:标题，pId:上级ID；checked:是否选中；isParent:是否父节点；isHidden：是否隐藏；url:节点链接。以上属性均为非必填|否|
|checkboxType|obj|复选框类型，Y 属性定义 checkbox 被勾选后的情况；N 属性定义 checkbox 取消勾选后的情况；"p" 表示作会影响父级节点；"s" 表示操作会影响子级节点。默认均为"ps"|否|
|defaultParams|obj|请求默认携带的参数|否|
|getSelectedDatas|function|返回已经选择的数据列表|否|
|onConfirm|function|点击确定按钮后触发|否|
|onClear|function|点击清除按钮后触发|否|

方法

getSelectedDatas：返回ztree回显时的数据列表

事件

onConfirm：树形列表点击确定按钮后触发

|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|
|selectedNodes|array|触发选择的节点列表|

onClear：树形列表点击清空按钮后触发

|名称|类型|描述|
|-|-|-|
|zTree|obj|ztree对象|