备案控制台
开发者社区 开发与运维 文章 正文

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

2023-07-23 591
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）

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

来源：xm-select 开源文档


da60509c175647868eb796c88b043915.gif


运行环境配置

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

文章标签：
JavaScript
前端开发
容器
API
算法
数据格式
数据库
漏刻有时
目录
相关文章
阿甘兄
|
9月前
|
JavaScript 前端开发 Java
67jqGrid - 搜索操作工具栏
67jqGrid - 搜索操作工具栏
阿甘兄
32 0
兜里只有三分钱~
|
10月前
uniapp input框监听回车搜索事件效果demo（整理）
uniapp input框监听回车搜索事件效果demo（整理）
兜里只有三分钱~
186 0
漏刻有时
|
12月前
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
漏刻有时
294 0
蒋川@卡拉云
|
缓存 前端开发 JavaScript
React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好，但如果要在 React 中实现一个功能丰富的表格，其实是非常不容易的。在本站之前的文章《最好的 6 个 React Table 组件详细亲测推荐》 中有提到过 react-table 这个库，如果对这个库不太了解的同学可以先了解一下，这里不再赘述。简而言之，react-table 是一个非常强大的库，它与常见的表格组件不同，它不负责渲染 HTML 和 CSS，而是提供了一系列的 hooks 让我们可以灵活地构建功能强大的表格组件。
蒋川@卡拉云
1226 0
杰克.陈
|
前端开发 API 定位技术
【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
原文:【百度地图API】如何使用suggestion--下拉列表方式的搜索建议 摘要： 　　百度地图上有一个很强大的搜索建议功能，以下拉列表的方式展示出来。比如，输入“百度”，下拉列表中就会出现“北京市海淀区百度在线网络技术(北京)有限公司”。
杰克.陈
2299 0
bug天选之子
|
10月前
【项目经验】：elementui多选表格默认选中
elementui多选表格默认选中
bug天选之子
438 0
梦回故国楼台梦
|
2月前
|
前端开发 API
【亮剑】在Web开发中，我们经常需要使用下拉选择框（Select）来让用户从多个选项中选择一个
【4月更文挑战第30天】在React Web开发中，创建下拉选择框通常使用`<select>`标签。要设置占位符，可添加一个`value=""`的`<option>`标签。
梦回故国楼台梦
32 0
xiaohua616
|
2月前
uniapp uni-combox 下拉提示无匹配项（完美解决--附加源码解决方案及思路）
uniapp uni-combox 下拉提示无匹配项（完美解决--附加源码解决方案及思路）
xiaohua616
108 0
漏刻有时
|
12月前
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
漏刻有时
237 0
祈澈菇凉
|
8月前
|
JSON JavaScript 数据库
vue搜索表格功能，根据input输入框和下拉框传递的参数进行搜索
vue搜索表格功能，根据input输入框和下拉框传递的参数进行搜索
祈澈菇凉
85 1