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">&emsp;<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 " 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("<option value=\""+res.data[i].id+"\" selected>"+res.data[i].name+"</option>");}else{$("#"+id+"").append("<option value=\""+res.data[i].id+"\">"+res.data[i].name+"</option>");}}//重新渲染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标签idelementId: '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');});}

xm-select下拉框，下拉树相关推荐

除了下拉框/下拉联想词优化推广，还可以做那些网络推广？
现在的企业,不能像几年前,单纯的搭建好网站或网络平台,具备了网络推广完善的功能,做做SEOer就万事大吉了. 因为这几年网络变化太大了,自媒体.小视频的爆发,所以现在我们更需要结合多平台多渠道多方位的 ...
php select下拉框,下拉框处理（select）
在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再 ...
vxe-table可编辑表格使用下拉框时下拉框层级问题
在vue项目中,对于表格的复杂操作,使用vxe-table会带给我们很多很多的方便. 现在记录一个使用vxe-table时可编辑表格的下拉框的层级问题 vxe-table提供了两种选择 :edit-r ...
html5日期不联动下拉框,下拉框联动问题赋值时候失效
我想将三个下拉框变成一个组件初始是没问题的下拉福州市可以读取接口获取福州市的几个区然后选区查到街道但是直接传值的时候一次性把三个都传进去导致第一个读取了后面两个被重置了一个一个传又破坏了 ...
css 下拉框下三角形
css 用border属性实现下拉框三角形效果如图思路设置一个空元素,设置左右边框以及上边框,其宽度即为三角形的高, 效果如图: 1.当设置上边框以及左右边框,再将左右边框颜色透明,则为下三角 ...
bootstrap-select 插件搜索下拉框下拉选项太多导致下拉不显示
用bootstrap-select的做搜索下拉框的时候,如果下拉的选项太多的话,初次就会显示不出来,只有输入搜索内容时候才会显示内容.使用体验极为不佳.我用到的是1000+选项就会出现这问题. 看了源 ...
select下拉框下拉跳转代码
2019独角兽企业重金招聘Python工程师标准>>> <select name="dh" onchange="javascript:locati ...
zTree（二）树状图下拉框
需求添加.修改终端需要选择组织,组织是多级架构(树状图显示). 思路 1.因为下拉框需要树状图显示,所以排除使用select做下拉框,改用input 模拟下拉框 2.树状图采用zTree插件开工 ...
html6+树状下拉列表,layui+ztree 树状下拉框
一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· 部门 @* *@ [js] ① 以下为固定方法 function initSelectTr ...
element 下拉框中树节点选中之后不收回下拉框
element UI 下拉框选项包含树节点 <sg-selectref="select"size="small"clearableplaceholder= ...

xm-select下拉框，下拉树

使用案例

下面为部分代码，不完整

单选下拉树

下拉框

复选下拉树多选下拉树

下拉树批量初始化，获取值方法

xm-select下拉框，下拉树相关推荐

最新文章

热门文章

xm-select下拉框，下拉树

使用案例

下面为部分代码，不完整

单选下拉树

下拉框

复选下拉树 多选下拉树

下拉树批量初始化，获取值方法

xm-select下拉框，下拉树相关推荐

最新文章

热门文章

复选下拉树多选下拉树