xm-select下拉框，下拉树
使用案例
先上图
layui中使用xm-select下拉选择树
1.引入js
<script src="../static/res/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="../static/res/layui/layui.js"></script>
<script src="../static/res/layui/lay/modules/xm-select.js"></script>
2、html选择框位置
<div id="search_content">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
<label class="layui-form-label">请选择学生：label>
<div class="layui-input-inline">
<ul id="user_sel" data-id="0">ul>
div>
div>
div>
div>
3、js代码，渲染下拉树
//渲染下拉框
var idSelectTreeRadioValue = xmSelect.render({
el: "#user_sel",
clickClose: true, //单选完关闭下拉框
filterable: true, //搜索
direction: 'down', // 展开方向 下
//radio: true, //单选
tree: {
show: true,
showFolderIcon: true,
showLine: true,
expandedKeys: true
},
height: "auto",
data: [],
model: {
label: {type: 'text'}
//, icon: 'hidden'
}, //文本显示模式
//处理方式
on: function (data) {
if (data.isAdd) {
return data.change.slice(0, 1)
}
},
});
//获取下拉数据 渲染下拉树
$.ajax({
url: "/getSelectUsers",
type: "get",
//data: { },
//async: false,
success: function (res) {
if (res.code == 200) {
idSelectTreeRadioValue.update({
data: res.data,
autoRow: true,
})
}
}
});
/********方法封装***********/
/**
*
* @param id 要渲染的dom
* @param tips 下拉框默认显示字样
* @param clickClose 是否开启单选完关闭下拉框
* @param filterable 是否开启搜索
* @param radio 是否开启单选
* @param height 高度 "auto"
* @returns {*}
*/
function renderselect(id,tips,clickClose,filterable,radio,height){
return xmSelect.render({
el: "#"+id,
tips: tips,
clickClose: clickClose, //单选完关闭下拉框
filterable: filterable, //搜索
direction: 'down', // 展开方向 下
radio: radio, //单选
tree: {
//把tree删掉就是下拉框
show: true, //是否显示树状结构
showFolderIcon: true, //是否展示三角图标
showLine: true, //是否显示虚线
expandedKeys: true , 默认展开节点的数组, 为 true 时, 展开所有节点
},
height: height, //"auto"
data: [],
model: {
label: {type: 'text'}
} //文本显示模式
, on: function (data) {
// console.log(data)
if (data.isAdd) {
//$("#"+id+"input").val(data.arr[0].value)
return data.change.slice(0, 1)
}
},
});
}
4、数据格式：
data : [{
value : "",
name : "",
selected : false,
disabled : false,
parent : "",
children : []
}]
完整代码：：
DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:my_th>
<head>
<title>学生成绩管理title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/res/layui/css/layui.css">
<link rel="stylesheet" href="../static/res/layui/css/admin.css">
<link rel="stylesheet" href="../static/res/css/base.css">
<link rel="stylesheet" href="../static/res/css/style.css">
<script src="../static/res/bootstrap/js/jquery-3.4.1.min.js">script>
<script src="../static/res/layui/layui.js">script>
<script src="../static/res/nav/nav.js">script>
<script src="../static/res/layui/lay/modules/xm-select.js">script>
head>
<body class="layui-layout-body">
<div class="layui-fluid layui-card" id="data_content">
<div id="search_content">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
<label class="layui-form-label">请选择学生：label>
<div class="layui-input-inline">
<ul id="user_sel" data-id="0">ul>
div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-useradmin" id="search_btn">
选择
button>
<button class="layui-btn layuiadmin-btn-useradmin layui-btn-warm" id="reset_btn">
重置
button>
div>
div>
div>
div>
<div id="btn_content " style="padding: 5px 5px;">
div>
div>
<script th:inline="none">
layui.use(['layer',"xmSelect","form"], function () {
$ = layui.jquery;
var layer = layui.layer;
var xmSelect = layui.xmSelect;
var form = layui.form;
var selectValue = ""; //记录选择的数据
//渲染下拉框
var idSelectTreeRadioValue = xmSelect.render({
el: "#user_sel",
clickClose: true, //单选完关闭下拉框
filterable: true, //搜索
direction: 'down', // 展开方向 下
//radio: true, //单选
tree: {
//把tree删掉就是下拉框
show: true,
showFolderIcon: true,
showLine: true,
expandedKeys: true
},
height: "auto",
data: [],
model: {
label: {type: 'text'}
//, icon: 'hidden'
}, //文本显示模式
//处理方式
on: function (data) {
if (data.isAdd) {
return data.change.slice(0, 1)
}
},
});
//获取下拉数据 渲染下拉树
$.ajax({
url: "/getSelectUsers",
type: "get",
//data: { },
//async: false,
success: function (res) {
if (res.code == 200) {
idSelectTreeRadioValue.update({
data: res.data,
autoRow: true,
})
}
}
});
//选择
$('#search_btn').click(function () {
selectValue = idSelectTreeRadioValue.getValue('valueStr'); //获取选中值
console.log(selectValue);
getlist(selectValue,1,5);
});
//重置
$("#reset_btn").click(function(){
//下拉树置空
idSelectTreeRadioValue.setValue([]);
//选择数据置空
selectValue = "";
});
});
script>
body>
html>
下面为部分代码，不完整
单选下拉树
html页面
<ul id="bsId1" data-id="0"></ul>
渲染xm-select树方法：包含ajax请求数据
//单选下拉树
var idSelectTreeRadioValue;
//code:参数 id：要渲染的dom位置 url：请求url check：默认选中的项的id flag：是否展开下拉树 disable：是否禁用
function renderSelectRadioTree(code, id, url, check, flag, disable) {
var a;
$.ajax({
url: url,
type: "post",
data: {
code: code
},
async: false,
success: function (res) {
if (res.code == 200) {
//资金用途树形下拉框
idSelectTreeRadioValue = xmSelect.render({
el: "#" + id + "",
disabled: disable ? disable : false, //禁用
clickClose: true, //单选完关闭下拉框
filterable: true, //搜索
initValue: [check], //默认选中
direction: 'down', // 展开方向 下
tree: {
show: true,
showFolderIcon: true,
showLine: true,
expandedKeys: flag == true ? true : [-1, -3]
},
model: {
icon: 'hidden',
},
height: "300px",
data: res.data,
model: {label: {type: 'text'}, icon: 'hidden'}, //文本显示模式
//处理方式
on: function (data) {
if (data.isAdd) {
return data.change.slice(0, 1)
}
},
});
}
a = idSelectTreeRadioValue;
}
})
return a;
}
调用方法渲染树：
var editPreBill = new Object(); //存放修改时，回显基本表信息
var url = "/elementDetail/getDetailByAllTree";
// 功能分类 树
var bsIdSelect = renderSelectRadioTree('BUDGET_SUBJECT',"bsId1",url,editPreBill.bsId,false);
获取选中的值：
var bsidSelCheck = bsIdSelect.getValue('valueStr'); //获取选中值
params['bsId'] = bsidSelCheck;
$("#bsName").val(bsIdSelect.getValue('nameStr')); //选中值的名字
下拉框
html：
<select name="pttId" id="pttId" lay-filter="pttId" lay-verify="required">
<option value=""></option>
</select>
js：
// 项目类别-时间分类
renderSelectCheck('PROJ_TIME_TYPE','pttId',editPreBill.pttId);
//获取要素数据 下拉框渲染 可以默认选中的下拉框
function renderSelectCheck(code,id,check){
$.ajax({
url:"/elementDetail/getDetailByCode",
type:"post",
data:{
code:code
},
success:function(res){
if (res.code==200){
for (var i = 0; i < res.data.length ; i++) {
if (check == res.data[i].id){
$("#"+id+"").append(""+res.data[i].id+"\" selected>"+res.data[i].name+"");
}else{
$("#"+id+"").append(""+res.data[i].id+"\">"+res.data[i].name+"");
}
}
//重新渲染
layui.form.render("select");
}else{
//layer.msg(res.msg);
}
}
})
}
复选下拉树 多选下拉树
//复选框下拉树
var Tree;
function Trees(code, id, flag) {
var a;
$.ajax({
url: "/elementDetail/getDetailByAllTree",
type: "post",
data: {
code: code
},
async: true,
success: function (res) {
if (res.code == 200) {
//资金用途树形下拉框
Tree = xmSelect.render({
el: "#" + id + "",
filterable: true,
language: 'zn',
tree: {
show: true,
showFolderIcon: true,
showLine: true,
expandedKeys: flag ? [-1, -3] : true
},
height: "300px",
data: res.data
});
}
a = Tree;
}
})
return a;
}
下拉树批量初始化，获取值方法
HTML:
<label class="layui-form-label">功能分类</label>
<div class="layui-input-inline" id="bsId"></div>
<label class="layui-form-label">资金用途</label>
<div class="layui-input-inline" id="muId"></div>
JS:
//顶部搜索 xmlSelect下拉框 属性
var searchSelectOption = {
//资金用途
moneyUse: {
requestUrl: '/elementDetail/getDetailByAllTree',
requestParam: {code: 'MONEY_USE'},
requestName: 'muId',
elementId: 'muId',
instance: null
},
//功能分类
budgetSubject: {
//获取数据的地址
requestUrl: '/elementDetail/getDetailByAllTree',
//请求携带参数
requestParam: {code: 'BUDGET_SUBJECT'},
//表格搜索查询时请求的name属性(后端controller接收的名字)
requestName: 'bsId',
//html标签id
elementId: 'bsId',
//xmSelect下拉框组件实例
instance: null
}
}
//初始化xm下拉框
xmSelectBatchInitialization(searchSelectOption);
//提交的时候在去获取值
//获取xmSelect下拉框选中的值
xmSelectBatchGetValueList(searchSelectOption, requestParam);
JS:
/**
* xmSelect 下拉框批量初始化
* xmSelectOptioin结构例子:
* var xmSelectOption = {
* moneyUse : {
* ignoreInit: {Boolean} , //批量初始化时是否忽略,你自己手动初始化
* requestUrl: {String} , //初始化时 Ajax请求 的地址
* requestParam: {Object} , //初始化时 Ajax请求 的参数
* elementId: {String} , //页面上元素id
* fmtResult: {Function} , //对请求响应的结果集进行过滤,格式化等 处理函数
* requestName: {String} , //表单提交时此下拉框的 name属性
* option: {Object} , //XmSelect初始化可配置属性
* instance: null, //初始化完成后,存储 XmSelect实例
* },
* idxSystem : {
* ...
* }
* }
* @param xmSelectOption 初始化属性
* @author GongLiHai
* @date 2020/8/31 18:47
*/
function xmSelectBatchInitialization(xmSelectOption) {
$.each(xmSelectOption, function (key, value) {
//忽略初始化的,直接返回
if (value.ignoreInit) {
return true;
}
//请求数据
$.get(value.requestUrl, value.requestParam, function (result) {
var option = {
el: '#' + value.elementId,
data: value.fmtResult ? value.fmtResult(result) : result.data,
name: value.requestName,
filterable: true, //搜索
tree: {
show: true //可折叠结构
}
}
//添加设置的属性
$.each(value.option, function (optionKey, optionValue) {
option[optionKey] = optionValue;
});
//生成下拉框实例
value.instance = xmSelect.render(option);
});
});
}
/**
* xmSelect 下拉框批量获取 选择的值
* @param xmSelectOption 初始化属性
* @param xmSelectValues 选择的值
* @author GongLiHai
* @date 2020/8/31 18:47
*/
function xmSelectBatchGetValue(xmSelectOption, xmSelectValues) {
$.each(xmSelectOption, function (key, value) {
xmSelectValues[value.requestName] = value.instance.getValue('value').toString();
});
}
//获取select框值
function xmSelectBatchGetValueList(xmSelectOption, xmSelectValues) {
$.each(xmSelectOption, function (key, value) {
xmSelectValues[value.requestName] = value.instance.getValue('value');
});
}