layui三方下拉选择插件xmSelect的使用详解

1、实战

1.1、引入xm-select

<script type="text/javascript" th:src="@{/lib/ui/xm-select/xm-select.js}" charset="utf-8"></script>

1.2、初始化

• 创建下拉框所在容器

<div id="xmSelect"></div>

const deptSelectObj = xmSelect.render({
    el: '#xmSelect',
    //自动换行
    autoRow: true,
    //开启搜索框
    filterable: true,
    //树形结构相关属性
    tree: {
        //以树状结构展示
        show: true,
        showFolderIcon: true,
        //展示虚线
        showLine: true,
        //节点间距
        indent: 20,
    },
    toolbar: {
        //展示工具条 全选/清除这些
        show: true,
        list: ['ALL', 'CLEAR']
    },
    //高度自适应
    height: 'auto',
    //显示的数据，正常使用，我们仅需改成接口调用即可
    data: function(){
        return [
            {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},
            ]},
        ]
    }
});

示例代码1： 

layui.use(["jquery", "xmSelect", "popup"], function() {
                layui.$.ajax({
                    url: "/app/admin/role/select?format=tree",
                    dataType: "json",
                    success: function (res) {
                        let value = layui.$("#pid").attr("value");
                        let initValue = value ? value.split(",") : [];
                        console.log(res.data);
                        layui.xmSelect.render({
                            el: "#pid",
                            name: "pid",
                            initValue: initValue,
                            tips: "请选择",
                            data: res.data,
                            value: "0",
                            model: {"icon":"hidden","label":{"type":"text"}},
                            clickClose: true,
                            radio: true,
                            tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false,expandedKeys:true},
                            on: function(data){
                                let id = data.arr[0] ? data.arr[0].value : "";
                                if (!id) return;
                                layui.$.ajax({
                                    url: '/app/admin/role/rules?id=' + id,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code) {
                                            return layui.popup.failure(res.msg);
                                        }
                                        layui.xmSelect.get('#rules')[0].update({data:res.data});
                                    }
                                });
                            }
                        })
                        if (res.code) {
                            layui.popup.failure(res.msg);
                        }
                    }
                });
            });

效果1： 

示例代码2： 

layui.xmSelect.render({
	el: "#rules",
	name: "rules",
	initValue: initValue,
	data: res.data,
	tree: {"show":true,expandedKeys:initValue},
	toolbar: {show:true,list:["ALL","CLEAR","REVERSE"]},
})

效果2：