输入框树形选择

layui需要引入 ztree 模块

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

初始化

var layuiInputTree = new LayuiInputTree(layui);

···

渲染

单选

html

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

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

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

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对象

4.2 KiB Raw Blame History Unescape Escape

输入框树形选择

渲染

单选

多选

4.2 KiB

Raw Blame History