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 = der({
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){
de ==200){
idSelectTreeRadioValue.update({
data: res.data,
autoRow:true,
})
}
}
});
完整代码：：
<!DOCTYPE html>
<html lang="zh"th=""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">
<!--<i class="layui-icon layui-icon-ok layuiadmin-button-btn"></i>-->选择
</button>
<button class="layui-btn layuiadmin-btn-useradmin layui-btn-warm"id="reset_btn">
<!--<i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i>-->重置
</button>
</div>
</div>
</div>
</div>
<div id="btn_content " >
</div>
</div>
<script inline="none">
layui.use(['layer',"xmSelect","form"],function(){
$ = layui.jquery;
var layer = layui.layer;
var xmSelect = Select;
var form = layui.form;
var selectValue ="";//记录选择的数据
//渲染下拉框
var idSelectTreeRadioValue = der({
el:"#user_sel",
clickClose:true,//单选完关闭下拉框
filterable:true,//搜索
direction:'down',// 展开⽅向下layui和bootstrap哪个好
//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){
de ==200){
idSelectTreeRadioValue.update({
data: res.data,
autoRow:true,
})
}
});
//选择
$('#search_btn').click(function(){
selectValue = Value('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){
de == 200){
//资⾦⽤途树形下拉框
idSelectTreeRadioValue = der({
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 = Value('valueStr'); //获取选中值
params['bsId']= bsidSelCheck;
$("#bsName").Value('nameStr')); //选中值的名字
下拉框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。