174 lines
4.2 KiB
Markdown
174 lines
4.2 KiB
Markdown
# 输入框树形选择
|
||
|
||
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对象|
|