xm-select 使用指南

约 294 字小于 1 分钟

2024-10-31

xm-select 使用指南

<div class="layui-form-item">
    <label class="layui-form-label">指定审批人</label>
    <div class="layui-input-block">
        <div id="nodeApprovers"></div>
    </div>
</div>

var nodeApproversXmSelect = xmSelect.render({
    el: '#nodeApprovers',
    name: 'nodeApprovers',
    // ----单选配置---
    radio: true, // 设置是否单选
    clickClose: true, // 选择后关闭下拉框
    // ----
    autoRow: true, //自动换行
    data: allEmps, // 选项
    filterable: true, // 支持刷选
    toolbar: { // 开启工具，比如全选，反选，全不选
        show: true,
        list: ['ALL', 'REVERSE', 'CLEAR']
    },
    tree: {
        //以树状结构展示
        show: true,
        showFolderIcon: true,
        //展示虚线
        showLine: true,
        //节点间距
        indent: 20,
    },
    height: 'auto',//高度自适应
    initValue: splitStringBy(openNodeApproverIds, ","), // 初始值 [str]
    on: function (retData) {
        var ids = []
        var names = []
        var retDataArr = retData.arr
        for (i = 0; i < retDataArr.length; i++) {
            ids.push(retDataArr[i].value)
            names.push(retDataArr[i].name)
        }
        var idsStr = ids.join(",")
        var namesStr = names.join(",")
        openNodeApproverIds = idsStr;
    }
});

data的格式如下：

[
    {name: '奖品', value: -2, children: [
        {name: '奖品3', value: -3, children: [
            {name: '苹果3', value: 14},
            {name: '香蕉3', value: 15},
            {name: '葡萄3', value: 16},
        ]},
        {name: '苹果2', value: 4},
        {name: '香蕉2', value: 5},
        {name: '葡萄2', value: 6},
    ]},
]

更新值：

selectEmployeeXmSelect.setValue(['1', '2']);

更新值且禁止修改：

selectEmployeeXmSelect.update({initValue: ["1", "2"], disabled: false});

xm-select 使用指南

公告