1. Toy模板网首页
  2. > Toy博客

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

10月前 作者：漏刻有时 分类：Toy博客 阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

layui.xmselect,javascript,layui,漏刻有时,javascript,前端,开发语言

运行环境配置

  • 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));

layui.xmselect,javascript,layui,漏刻有时,javascript,前端,开发语言

封装函数

    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文章来源地址https://www.toymoban.com/news/detail-716985.html

到了这里，关于layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • layui的基本使用-日期控件的业务场景使用入门实战案例一

    layui的基本使用-日期控件的业务场景使用入门实战案例一

    效果镇楼；       1 前端UI层面；   苟日新一刻钟总结反观：  2  那么业务场景的话，就没有那么简单了。首先就是解决方案里面可不止一个文件夹，是多个项目组成的解决方案。比如仓储层，Repository项目，业务层项目，Services，同时各自对应了各自的接口项目；Model 实体

    2024年02月13日
    浏览(35)

  • Go语言中的Select：深度解析与实战案例

    select  是操作系统中的系统调用，我们以前在学校中学习操作系统课程或者在工作当中，肯定都使用过或者了解过  select 、 poll  和  epoll  等函数构建 I/O 多路复用模型提升程序的性能。Go 语言的  select  与操作系统中的  select  很相似，今天这篇文章会深度解析 Go 语言 

    2024年01月24日
    浏览(45)
  • 基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

    基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

    组件：MultipleSelect.vue 使用：index.vue 多选框多选不换行

    2024年01月22日
    浏览(51)
  • vue所有UI库通用）tree-select 下拉多选（设置 maxTagPlaceholder 隐藏 tag 时显示的内容，支持鼠标悬浮展示更多

    vue所有UI库通用）tree-select 下拉多选（设置 maxTagPlaceholder 隐藏 tag 时显示的内容，支持鼠标悬浮展示更多

    如果可以实现记得点赞分享，谢谢老铁～ 1.需求描述 引用的下拉树形结构支持多选，限制选中tag的个数，且超过制定个数，鼠标悬浮展示更多已选中。 2.先看下效果图 3.实现思路 首先根据API文档，先设置maxTagCount，最多显示多少个 tag。 然后再设置 maxTagPlaceholder，隐藏 tag 时

    2024年02月12日
    浏览(39)
  • select三级联动选择—基于layui的select

    select三级联动选择—基于layui的select

    Layui是一套开源的 Web UI 组件库。layui采用自身极简的模块化规范，并遵循原生 HTML/CSS/JS 的开发模式，极易上手，开箱即用。是前后端初学者必不可少的学习神器。（ps：对于笔者这种前端页面写的很丑的人来说简直是福音啊！） 使用的方式主要有两种，一种直接下载layui的源

    2024年02月06日
    浏览(85)

  • php实战案例记录(16)php://input输入流

    php://input 是PHP中的一个特殊的输入流，它允许访问请求的原始数据。它主要用于处理非表单的POST请求，例如当请求的内容类型为 application/json 或 application/xml 时。使用 php://input 可以获取到POST请求中的原始数据，无论数据是什么格式。使用它来读取和解析JSON、XML或其他格式的

    2024年02月07日
    浏览(34)

  • Pandas实战100例 | 案例 16: 字符串操作 - 分割和转换

    案例 16: 字符串操作 - 分割和转换 知识点讲解 Pandas 提供了丰富的字符串操作功能，这些功能很大程度上类似于 Python 原生的字符串方法。你可以对 DataFrame 或 Series 中的字符串进行分割、转换、替换等操作。这些操作在处理文本数据时非常有用。 字符串分割 : 使用 split 方法分

    2024年02月02日
    浏览(47)

  • layui 实现往 select 标签里面添加 option

    要使用Layui来往 select 标签中添加 option ，你需要使用Layui的 form 模块和jQuery库。请确保你已经引入了Layui和jQuery的相关文件。 下面是一个基本的示例，展示如何使用Layui和jQuery来往 select 标签中动态添加 option ：

    2024年02月12日
    浏览(42)

  • layui下select下拉框不显示或没有效果

    弹层layer选择框没有样式_不可点击_渲染失效的解决办法 一、必须给表单体系所在的父元素加上 class=\\\" layui-form \\\" 在一个容器中设定 class=\\\"layui-form\\\"  来标识一个表单元素块，如果你不想用 form，你可以换成  div  等任何一个普通元素（ 推荐用 form ）；记得要在 外层容器 中定

    2024年02月09日
    浏览(45)

  • Layui select实现主动赋值和触发选择事件，及radio实现可取消

     

    2024年01月23日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包