1、实战
1.1、引入xm-select
1.2、初始化
创建下拉框所在容器
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：