xm-select介绍
始于Layui, 下拉选择框的多选解决方案
git地址：https://gitee.com/maplemei/xm-select
文档说明：https://codecp.tech/static/xm-select/#/component/options
什么情况下使用
- 下拉框的数据量比较大
- 需要支持下拉框的搜索
如何使用自定义搜索
-
引用xm-select,使用最新版本，老版本update方法无法使用
<script type="text/javascript" th:src="@{/res/js/xm-select-1.2.2.js}"></script> -
定义下拉框的位置
<div id="demo1"></div> -
调用reader进行渲染
let list = [];
let pageSize = 10；
if(demoSelect == null){
orgNameSelect = xmSelect.render({
el: '#demoSelect',
data: [], // 数据
paging: true, // 是否分页
pageSize: pageSize, // 每页数量
max:10, // 最多可以选的个数
// 触发监听
on: function(data){
// 监听到的数据类型包含 name，value
let arr = data.arr;
let checkIdArr = [];
let checkNameArr = [];
if(arr.length > 0){
arr.forEach((item) => {
checkIdArr.push(item.value);
checkNameArr.push(item.name);
});
$("#id").val(checkIdArr.join(","));
$("#name").val(checkNameArr.join(","));
}else{
$("#id").val("");
$("#name").val("");
}
},
// 样式
theme: {
color: '#4991E1',
},
// radio: true,// 单选
// clickClose: true,// 选中后关闭
pageRemote: true,// 是否开启远程分页
pageEmptyShow: false,// 显示空页
remoteSearch: true,// 远程搜索
// 远程搜索方法
// val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码
// show: 下拉框显示状态, pageIndex: 分页下当前页码
remoteMethod: function(val, cb, show, pageIndex){
// 调用后台接口
$.ajax({
url: "/getList?param=111,
type: "GET",
dataType: "JSON",
success: function(resp) {
if (resp.code === SUCCESS_CODE) {
if(resp.data.total > 0){
let data = resp.data.list;
list = [];
for(let i=0; i<data.length; i++){
list.push({"name":data[i].orgName,"value":data[i].orgId});
}
// 页码
let pages = Math.ceil(resp.data.total / pageSize);
cb(list,pages);
}else{
// 初始化为空
cb([],0);
}
}
}
});
},
// 开启搜索
filterable: true,
});
}else{
console.log("更新");
// reset 会把已选中的数据清除 update方法只是更新，他们都可以重新触发一次remoteMethod
orgNameSelect.reset();
}
显示效果
