Introduction to xm-select
Beginning with Layui, a multi-select solution for dropdown selector boxes
git address:/maplemei/xm-select
Documentation Description:/static/xm-select/#/component/options
When to use
- Dropdown boxes have a relatively large amount of data
- Need to support drop-down box search
How to use customized search
- Refer to xm-select, use the latest version, the old version update method does not work.
<script type="text/javascript" th:src="@{/res/js/xm-select-1.2.}"></script> - Define the position of the drop-down box
<div ></div> - Calling the reader for rendering
let list = [];
let pageSize = 10;
if(demoSelect == null){
orgNameSelect = ({
el: '#demoSelect',
data: [], // data
paging: true, // if paging
pageSize: pageSize, // number per page
max:10, // the maximum number of selections that can be made
// Trigger the listener
on: function(data){
// Listens for data of type name, value.
let arr = ;
if( > 0){
((item) => {
();
();
});
$("#id").val((","));
$("#name").val((","));
}else{
$("#id").val("");
$("#name").val("");
}
}, // Style
// Styles
theme: {
color: '#4991E1', }, // style: { color: $("#name".val(")); }
}, // radio: true,// radio-option
// radio: true,// radio
// clickClose: true,// close when selected
pageRemote: true,// whether to enable remote paging
pageEmptyShow: false,// Show empty page.
remoteSearch: true,// remoteSearch
// Remote search method
// val: current search value, cb(arr, totalPage): callback function, need to callback an array, structure is the same as data, remote paging need a second parameter: total page number
// show: the state of the dropdown box, pageIndex: the current page number of the page.
remoteMethod: function(val, cb, show, pageIndex){
// Call the backend interface
$.ajax({
url: "/getList?param=111,
url: "/getList?param=111, type: "GET",
dataType: "JSON", success: function(resp) {
success: function(resp) {
if ( === SUCCESS_CODE) {
if ( > 0){
let data = ;
list = [];
for(let i=0; i<; i++){
({"name":data[i].orgName, "value":data[i].orgId}));
}
// pageSize
let pages = ( / pageSize);
cb(list,pages); }
}else{
// Initialize to null
cb([],0);
}
}
}
}).
}, // Enable searching.
// Enable search
filterable: true, }
}).
}else{
("update"); }
// reset clears the selected data the update method is just an update, they can both be retriggered once remoteMethod
(); }
}
display effect
