layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）

始于 layui 的一个多选解决方案，前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了。xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展。
来源：xm-select 开源文档

运行环境配置

js/jquery.2.14.js，实现对远程搜索API接口ajax的调用；
js/layui/layui.js，插件运行环境；
js/layui/xm-select.js，下拉多选插件

    <script src="js/jquery.2.14.js" charset="utf-8"></script><!--layui封装库--><script src="js/layui/layui.js" charset="utf-8"></script><link rel="stylesheet" href="js/layui/css/layui.css"><script src="js/layui/xm-select.js" charset="utf-8"></script>

HTML容器

<div class="layui-input-inline"><div id="demo1" class="xm-select-demo" style="width: 200px;"></div>
</div>
<div class="layui-input-inline"><div id="btn" class="layui-btn layui-btn-normal">查询</div>
</div>

核心代码

配置项

 var demo1 = xmSelect.render({el: '#demo1',tips: '选择ITEM',//选项提示文字radio: true,//单选paging: true,//是否翻页pageSize: 10,//每页数量filterable: true,//搜索模式remoteSearch: true,//远程搜索remoteMethod: function (val, cb, show) {//远程数据接口调用})

远程数据接口

使用$.get获取远程数据，由于远程数据使用的非xm-select格式化数据

 data: [{label: '张三', id: 1, group: 1},{label: '李四', id: 2, group: 1},{label: '王五', id: 3, group: 2},]

为此需要将远程数据进行结构化数据的循环输出。当然，官网也提供了自定义属性prop：

 prop: {name: 'label',value: 'id',},

即数据库返回的并不是name和value, 也许你提交的时候不止name和value, 需要根据自己需要的数据格式进行自定义。本案例由于需要对数据进行选择和排除禁用两项功能，使用数据循环方案予以解决。

使用selected属性

默认选中项，在数据后台编辑状态时使用或者在系统初始化默认使用。

 data: [{name: '水果', value: 1, selected: true},]

使用disabled属性

禁用项，即该状态下的选项无法被选择使用。

 data: [{name: '水果', value: 1,  disabled: true},]

远程数据回调的数据格式处理

var selData = "", disData = '43725,43726,45327';
if (res[i].itemid == selData) {data.push({name: listName, value: res[i].itemid, selected: true})} else if (disData.indexOf(res[i].itemid) > -1) {data.push({name: listName, value: res[i].itemid, disabled: true})} else {data.push({name: listName, value: res[i].itemid})}

远程核心代码

$.get('./api/api.php?act=getItem&token=3cab7ce4142608c0f40c785b5ab5ca24', {name: val,keys: '安防设备'}, function (res) {var data = [];var selData = "", disData = '43725,43726,45327';for (var i = 0; i < res.length; i++) {var listName = res[i].name + "|" + res[i].itemid;if (res[i].itemid == selData) {data.push({name: listName, value: res[i].itemid, selected: true})} else if (disData.indexOf(res[i].itemid) > -1) {data.push({name: listName, value: res[i].itemid, disabled: true})} else {data.push({name: listName, value: res[i].itemid})}}console.log(data);cb(data);}, 'json');

获值

    $("#btn").click(function () {var selectArr = demo1.getValue();console.log(selectArr[0].name);})

远程数据字段展示

{"itemid": "43725","type": "0","snmp_oid": "","hostid": "10084","name": "百度|www.baidu.com","key_": "ping.host[www.baidu.com]","delay": "1m","history": "30d","trends": "30d","status": "0","value_type": "0","trapper_hosts": "","units": "","formula": "","logtimefmt": "","templateid": "0","valuemapid": "0","params": "","ipmi_sensor": "","authtype": "0","username": "","password": "","publickey": "","privatekey": "","flags": "4","interfaceid": "1","description": "","inventory_link": "0","lifetime": "30d","evaltype": "0","jmx_endpoint": "","master_itemid": "0","timeout": "3s","url": "","query_fields": [],"posts": "","status_codes": "200","follow_redirects": "1","post_type": "0","http_proxy": "","headers": [],"retrieve_mode": "0","request_method": "0","output_format": "0","ssl_cert_file": "","ssl_key_file": "","ssl_key_password": "","verify_peer": "0","verify_host": "0","allow_traps": "0","uuid": "","state": "0","error": "","hosts": [{"hostid": "10084","proxy_hostid": "0","host": "Zabbix server","status": "0","lastaccess": "0","ipmi_authtype": "-1","ipmi_privilege": "2","ipmi_username": "","ipmi_password": "","maintenanceid": "0","maintenance_status": "0","maintenance_type": "0","maintenance_from": "0","name": "Zabbix server","flags": "0","templateid": "0","description": "","tls_connect": "1","tls_accept": "1","tls_issuer": "","tls_subject": "","proxy_address": "","auto_compress": "1","custom_interfaces": "0","uuid": "","inventory_mode": "-1"}],"parameters": [],"triggers": [{"triggerid": "23025","expression": "{34226}=0","description": "百度 Ping 不可达 / 安防设备","url": "","status": "0","value": "0","priority": "4","lastchange": "1665649665","comments": "","error": "","templateid": "0","type": "0","state": "0","flags": "4","recovery_mode": "0","recovery_expression": "","correlation_mode": "0","correlation_tag": "","manual_close": "0","opdata": "","event_name": "","uuid": ""},{"triggerid": "23029","expression": "{34230}>1","description": "百度 Ping 延迟大于 1000 毫秒 / 安防设备","url": "","status": "0","value": "0","priority": "2","lastchange": "1660360605","comments": "","error": "","templateid": "0","type": "0","state": "0","flags": "4","recovery_mode": "0","recovery_expression": "","correlation_mode": "0","correlation_tag": "","manual_close": "0","opdata": "","event_name": "","uuid": ""}],"itemDiscovery": {"itemdiscoveryid": "8222","itemid": "43725","parent_itemid": "43699","key_": "ping.host[{#IP}]","lastcheck": "1666920798","ts_delete": "0"},"lastclock": "1666920825","lastns": "259796911","lastvalue": "0.010557174682617188","prevvalue": "0.010809659957885742","tags": [{"tag": "微信","value": "c3e42012-621c-4948-8e3e-721defb7d6e9"},{"tag": "用户名称","value": "北师大附中"},{"tag": "设备归属","value": "安防设备"},{"tag": "联系电话","value": "刘先生 13333333333"},{"tag": "归属区域","value": "外围监控"}]
}

提供一种常规的数据合并模型算法

在xm-select时，需要设置默认使用selected属性选中属性，增加selected: true的字段。为此，首先需要读取数据库中已经选择的选项，组成二维数组，然后和选项数据进行数组合并，组成新的data.

var demo2 = xmSelect.render({el: '#demo2', data: [{name: '水果', value: 1, selected: true, disabled: true},{name: '蔬菜', value: 2, selected: true},{name: '桌子', value: 3, disabled: true},{name: '北京', value: 4},]
})

数据库筛选数据

    var data1 = [{name: '水果', value: 1, selected: true},{name: '蔬菜', value: 2, selected: true},]

原始数据

    var data2 = [{name: '水果', value: 1},{name: '蔬菜', value: 2},{name: '桌子', value: 3},{name: '北京', value: 4}]

合并计算

    var a1 = data1.concat(data2);console.log(getUnique(a1));

封装函数

    function getUnique(data) {var arr = [];if (data != null) {for (var i = 0; i < data.length; i++) {if (JSON.stringify(arr).toString().indexOf(data[i].name) == -1) {if (data[i].selected == undefined) {arr.push({name: data[i].name,value: data[i].value,});} else {arr.push({name: data[i].name,value: data[i].value,selected: data[i].selected});}}}return arr;}}

@lockdata.cn

layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）相关推荐

jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
html5 下拉框美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法在页面中引入tasty ...
Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
TP中给select下拉框选中的内容搜索选中seleted
开发某个搜索功能时,在select下拉框选中条件后,单击搜索后总是重置下拉框条件,不能固定之前选中的条件.因此使用TP框架中的IF标签来实现. 代码如下: <select name=" ...
layui 实现下拉多选功能 [xm-select]
背景近期负责的管理后台,有下拉多选的业务需求通过网上的经验搜索,发现 xm-select 是个非常不错的选择并且,当前的后台使用的正是 layui 前端框架所以,在此整理一下对下拉多选功能 ...
html设置下拉筛选可以多选,select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
php select下拉框,下拉框处理（select）
在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再 ...