精华内容
下载资源
问答
  • xm-select 原始数据的回显及修改
    2022-01-08 17:07:33

    1)前段

    	<div >
    			<div id="userInfo"></div>
    	</div>
    
    	<script>
    		var userInfor = xmSelect.render({
    			el: '#userInfo',
    			language: 'zn',
    			name: 'userName',
    			prop: {
    				name: 'realName',
    				value: 'userName',
    			},
    			data: []
    		});
    		
    		var users = findUsers();//取得所有的人
    		var olds = $("#persons").val().split(","); //原来的人员
    		userInfor .update({
    			data: users,
    			initValue:olds   //intivalue初始化原来的值
    		})			
    </script>
    
    更多相关内容
  • xm-select-v1.2.1

    2020-12-23 16:26:06
    xm-select 基于 layui 的一个多选解决方案。
  • xm-select.js

    2020-05-20 16:50:45
    xm-select.js 大家如果需要可以下载
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范...其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。
  • xm-select.zip

    2020-04-22 16:04:41
    layui多选引用。
  • xm-select

    2022-03-19 23:30:57
    xm-select: 基于Layui, 下拉选择框的多选解决方案 xm-select 介绍 始于Layui, 下拉选择框的多选解决方案 前身前往formSelectes, 由于渲染速度慢, 代码冗余, 被放弃了 xm-select使用了新的开发方式, 利用preact...

    xm-select: 基于Layui, 下拉选择框的多选解决方案

    xm-select

    介绍

    始于Layui, 下拉选择框的多选解决方案

    前身前往formSelectes, 由于渲染速度慢, 代码冗余, 被放弃了

    xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展

    xm-select参数设置

     

    官网文档xm-select

    展开全文
  • 1、xm-select实现下拉框多选且可搜索 ?????????...第一步、下载xm-select.js 文档地址:...解压文件,xm-select-v1.2.4/dist/xm-select.js 第二步、引入xm-select.js <scrip

    1、xm-select实现下拉框多选且可搜索

    👇👇👇

    第一步、下载xm-select.js

    文档地址https://maplemei.gitee.io/xm-select/#/component/install【看文档,解疑难】
    【补充:xm-select也可实现单选,详情参考文档哟~】

    下载步骤

    进入文档,点击左边的 “安装与使用”,根据需求选择下载方式,我选择的是码云下载
    在这里插入图片描述
    我下载的是1.2.4版本:
    在这里插入图片描述
    解压文件,xm-select-v1.2.4/dist/xm-select.js
    在这里插入图片描述

    第二步、引入xm-select.js

    <script src="/static/js/xm-select.js"></script>
    

    第三步、写一个'<div id="school"></div>'

    第四步、渲染数据

    第1种、非动态渲染数据

    【在data那儿直接填入数据,不是由后台传入】

    var tagIns1 = xmSelect.render({
        el: '#school', // div的id值
        toolbar: { // 工具条【‘全选’,‘清空’】
          show: true, // 开启工具条
          showIcon: false, // 隐藏工具条的图标
        },
        // tips: '选择校区', // 让默认值不是“请选择”,而是“选择校区”
        filterable: true, // 开启搜索模式,默认按照name进行搜索
        paging: true, // 启用分页
        pageSize: 3, // 每页的数据个数
        data: [ // 默认是name(相当于我们常传的value值)和value(相当于我们常传的id)
    		{name: '小仙妮学校', value: 1},
    		{name: '小可爱学校', value: 2},
    		{name: '小天使学校', value: 3},
    		{name: '小公举学校', value: 4},
    	]
      })
    

    在这里插入图片描述

    第2种、动态渲染数据

    【在data那儿动态传入后台给出的数据】

      var tagData1 = {:json_encode($data.school)}; // 获取到后台给出的数据-PHP写法
      
      var tagIns1 = xmSelect.render({
        el: '#school', // div的id值
        toolbar: { // 工具条【‘全选’,‘清空’】
          show: true, // 开启工具条
          showIcon: false, // 隐藏工具条的图标
        },
        // tips: '选择校区', // 让默认值不是“请选择”,而是“选择校区”
        filterable: true, // 开启搜索模式,默认按照name进行搜索
        paging: true, // 启用分页
        pageSize: 3, // 每页的数据个数
        data: tagData1, // 动态传入数据
        prop: { // 也许你的数据库返回的并不是name和value, 也许你提交的时候不止name和value, 怎么办? 自定义就行
          name: 'title',
          value: 'id'
        },
        // on: function (data) { // 监听事件
          // var arr = data.arr;
          // if(arr.length == 0) { // arr.length表示已选值的个数
            // tagIns3.update({disabled: false}); // 启用tagIns3
          // } else {
            // tagIns3.update({disabled: true}); // 禁用tagIns3
            // tagIns3.setValue([]); // 让tagIns3里面的已选值清空
          // }  
        // }
      })
    

    在这里插入图片描述
    知识点——prop自定义属性

    借用文档里的一句话:也许你的数据库返回的并不是namevalue, 也许你提交的时候不止namevalue, 怎么办? 自定义就行

    比如,此处后台传的数据是:
    在这里插入图片描述

    2、涉及的部分重要知识解析

    一、赋值与取值

    文档里有细致讲解:
    在这里插入图片描述

    1、取值

    var school = tagIns1.getValue('value'); // 获取到对应的value值(相当于我们常传的id)
    var school = tagIns1.getValue('name');  // 获取到对应的name值(相当于我们常传的value值)
    

    2、赋值

    详见文档~:https://maplemei.gitee.io/xm-select/#/component/install

    3、清空

    tagIns1.setValue([]); // 让tagIns1里面的已选值清空
    

    二、启用与禁用

    tagIns1.update({disabled: false}); // 启用tagIns1
    tagIns1.update({disabled: true});  // 禁用tagIns1
    

    三、监听选择

    文档里有细致讲解:
    在这里插入图片描述
    example:

      var tagData1 = {:json_encode($data.school)}; // 获取到后台给出的数据-PHP写法
      
      var tagIns1 = xmSelect.render({
        el: '#school', // div的id值
        toolbar: { // 工具条【‘全选’,‘清空’】
          show: true, // 开启工具条
          showIcon: false, // 隐藏工具条的图标
        },
        // tips: '选择校区', // 让默认值不是“请选择”,而是“选择校区”
        filterable: true, // 开启搜索模式,默认按照name进行搜索
        paging: true, // 启用分页
        pageSize: 3, // 每页的数据个数
        data: tagData1, // 动态传入数据
        prop: { // 也许你的数据库返回的并不是name和value, 也许你提交的时候不止name和value, 怎么办? 自定义就行
          name: 'title',
          value: 'id'
        },
        on: function (data) { // 监听选择-当tagIns1有已选值时,就禁用tagIns3下拉框,并且让tagIns3里面的已选值清空;当tagIns1没有已选值时,就启用tagIns3下拉框
          var arr = data.arr;
          if(arr.length == 0) { // arr.length表示已选值的个数。arr.length == 0表示tagIns1没有已选值
            tagIns3.update({disabled: false}); // 启用tagIns3
          } else {
            tagIns3.update({disabled: true}); // 禁用tagIns3
            tagIns3.setValue([]); // 让tagIns3里面的已选值清空
          }
        }
      })
    

    3、动态渲染下拉框里已选值的初始数据

    1、目标

    xm-select下拉框里已选值的初始数据是后台传过来的数据

    2、结果

    在这里插入图片描述
    点击操作列里的编辑按钮👇
    在这里插入图片描述

    3、后台传过来的数据

    输入{:dump($data)}(PHP写法)
    在这里插入图片描述

    4、方法

    因为后台传过来的数据是value值,所以采用 通过value方式赋值 的方法。

    文档中对该方法也有范例:
    在这里插入图片描述

    5、代码

    在这里插入图片描述

    var clockinData = {:json_encode($data.info.clockin)}; // 获取后台传过来的value值——PHP写法
    console.log(clockinData); // [1,5]
    
    tagIns4.setValue(clockinData); // 采用 通过value方式赋值 的方法 
    

    4、下拉树

    参考文档:https://maplemei.gitee.io/xm-select/#/plugin/tree
    在这里插入图片描述

    1、目标

    实现下拉多选树

    2、结果

    在这里插入图片描述
    在这里插入图片描述

    3、后台传过来的数据

    在这里插入图片描述

    4、代码

    var promotion_data = {:json_encode($data.salaryType)}; // 获取到后台给出的数据-PHP写法
    
    tag_promotion = xmSelect.render({
        el: '#promotionList', // div的id值
        filterable: true, // 开启搜索模式,默认按照name进行搜索
        // autoRow: true, // 是否开启自动换行(选项过多时)
        tree: { // 下拉树配置
          show: true, // 是否展示为树状结构
          showFolderIcon: true, // 是否显示节点前的三角图标
          showLine: true, // 是否显示虚线
          indent: 20, // 间距
          // expandedKeys: [], // 默认展开节点的数组, 为 true 时, 展开所有节点
          // strict: true, // 是否严格遵守父子模式
          // simple: false, // 是否开启极简模式
          // clickExpand: true, // 点击节点是否展开
          // clickCheck: true, // 点击节点是否选中
        },
        toolbar: { // 工具条【‘全选’,‘清空’】
          show: true, // 开启工具条
          showIcon: false, // 隐藏工具条的图标
        },
        tips: '请选择提成类型', // 让默认值不是“请选择”,而是“请选择提成类型”
        prop: { // 也许你的数据库返回的并不是name和value, 也许你提交的时候不止name和value, 怎么办? 自定义就行
          name: 'title',
          value: 'id'
        },
        data: promotion_data, // 动态传入数据
    })
    

    4-扩展、下拉树获取选中节点父id

    因为文档中并未给出获取选中节点父id的方法,所以需要我们自己处理哟~

    1、解决思维

    • 根据文档可知,通过tag_promotion.getValue('value')可以获取到下拉树选中节点子id的数组合集(tag_promotionxm-select的初始化后的赋值名,详情见上面的4部分)
    • 那么👀
    • 我们就有解决思维啦:
      • 1、获取到下拉树选中节点子id的数组合集;
      • 2、在后台传的数据中,通过选中节点子id,获取到其对应的父节点数组;
      • 3、对获取到的父节点数组去重;
      • 4、合并下拉树选中节点子id的数组合集和去重后的下拉树获取选中节点父id数组合集,并转换成字符串型,传给后台。

    2、代码

    // 初始化公共变量
    var finalPromotion = ''; // 最终下拉树的结果:选中父级的id和选中子级的id 字符串合集
    
    // 处理提成类型,获取到选中父级的id
    var value = tag_promotion.getValue('value'); // 获取到选中子级的id数组集合
    var pid =[]; // 获取到选中父级的id数组集合(未去重)
    promotion_data.map((item,index)=>{
         item.children.map((it,idx)=>{
             value.map((x,y)=>{
                if(x==it.id){
                  pid.push(item.id);
                }
             })
         })
    })
    var filterPid = [];
    pid.filter(item=>{
         if(filterPid.indexOf(item)==-1){
             filterPid.push(item);
         }
    })
    // console.log(filterPid); // 获取到选中父级的id数组集合(已去重)
    
    finalPromotion = filterPid.concat(value).toString(); // 合并数组
    console.log(finalPromotion)
    
    展开全文
  • xm-select的简单使用

    千次阅读 2021-06-30 15:50:46
    后来使用 xm-select 官网:https://maplemei.gitee.io/xm-select/#/component/install 这个使用就非常简单了只需要引入lyaui和自身的js就可以了 xm-select.js:https://gitee.com/maplemei/xm-select/r

    基于客户需求 需要一个select 多选 下拉框。
    前台框架使用layUI 于是进行查找—》formSelects 4.x 这是layUI的一个第三方插件 但是看了一下发现已经停止维护了!!!
    在这里插入图片描述
    后来使用 xm-select
    官网:https://maplemei.gitee.io/xm-select/#/component/install
    这个使用就非常简单了只需要引入lyaui和自身的js就可以了

    xm-select.js:https://gitee.com/maplemei/xm-select/releases
    找到最新版本下载zip 解压,再放入项目中即可,下来就是正式的应用了。

    引入js

    <script type="text/javascript" src="<%=basePath%>CustomerserviceJs/jquery-1.10.2.min.js"></script>
    <script src="<%=basePath%>lib/layui/layui.js" charset="utf-8"></script>
    <script src="<%=basePath%>lib/layui/xm-select.js" charset="utf-8"></script>
    

    页面中放入占位标签

    <div id="demo1" class="xm-select-demo" ></div>
    

    js初始化

    <script type="text/javascript">
    	    var data = ${data}; //后台实体类转json后的数据
    	    var val = [];
    	    var oldVal = "${notic.range}"; //已选中的值
    	    for(var i = 0; i < data.length; i++){ //循环所有选项
    	    	if(oldVal.indexOf(data[i].rescode) != -1){ //判断是否需要默认选中
    	    		var con = {name:data[i].resname, value:data[i].rescode,  selected: true, disabled: true};
    	    	} else {
    	    		if(oldVal){ // 判断是否需要加disable属性
    	    			var con = {name:data[i].resname, value:data[i].rescode, disabled: true};	
    	    		} else { // 正常
    	    			var con = {name:data[i].resname, value:data[i].rescode};
    	    		}
    	    	}
    	    	val.push(con);
    	    }
    	    var demo1= xmSelect.render({
    	    	el: '#demo1'
    	       ,data: val
    	    })
    </script>
    

    官方示例:
    在这里插入图片描述

    上面的这些代码都是基于业务需要,
    点击查看时:将之前已选中的数据选中然后加上disable 防止操作。可进行修改。

    下来再说一下如何获取选中的值

    var val = xmSelect.get('#demo1', true).getValue('valueStr');  //  获取选中的Id并用 "," 拼接。
    var val = xmSelect.get('#demo1', true).getValue('nameStr');  //  获取选中的name并用 "," 拼接。
    

    然后再将值传入后台。 具体操作可以看官方文档。
    在这里插入图片描述
    OK 到这来问题就解决了!!!

    展开全文
  • div id="demo3" class="xm-select-demo" style="width: 300px;"></div> <script> var demo3 = xmSelect.render({ el: '#demo3', model: { label: { type: 'text' } },...
  • xm-select 下拉框分组单选事件

    千次阅读 2021-02-23 14:18:50
    xm-select 下拉框分组单选事件 效果图 分组基本写法自行查看官网 xm-select官网 官网下拉框分组写法中未含有 单选 操作样式,所以我们得自己增加on里面的监听事件,数据中的ParentId可自由设定,用做为监听事件中...
  • xm-select 下载下来,下载链接。解压把 xm-select.js 放到项目里; 2.引入js文件 在页面引入 xm-select.js <script type="text/javascript" src="js/xm-select.js"></script> 3. div 标签 <div ...
  • 1. 示例 ...divid="demo2"class="xm-select-demo"></div> <script> var demo2 = xmSelect.render({ el: '#demo2', toolbar: { show: true }, data: [ {name: '北京', value: 1,...
  • layui 官方镜像站 ...基于layui xm-select 多选 https://maplemei.gitee.io/xm-select/#/senior/getValue lay_cascader 级联选择器 https://gitee.com/yixiacoco/lay_cascader LayUi组件:TableSelect
  • layui 实现下拉多选功能 [xm-select]

    千次阅读 2021-11-02 14:50:28
    近期负责的管理后台,有下拉多选的...通过网上的经验搜索,发现 xm-select 是个非常不错的选择 并且,当前的后台使用的正是 layui 前端框架 所以,在此整理一下 对下拉多选功能 【xm-select 】 的使用步骤 欢迎指摘 …
  • 我想实现动态循环添加多个xm-select,要怎么实现呢?for循环就渲染出来第一个</p>
  • xm-select远程分页搜索数据回显 数据请求回来之后,对数据进行处理(或后台处理后返回) 选中数据的赋值selected = true,禁止选择的数据赋值disabled = true
  • xm-select下拉框,下拉树

    千次阅读 2020-09-11 14:12:58
    单选下拉树 ...<ul id="bsId1" data-id="0"></ul> <input type="hidden" name=...渲染xm-select树方法:包含ajax请求数据 //单选下拉树 var idSelectTreeRadioValue; //code:参数 id:要渲染的dom位置 ur
  • 我想使用xm-select扩展组件实现动态添加多个带搜索功能的下拉菜单,可以实现么? 我是先获取到后台传过来的数据然后for循环插入dom,但是渲染就只能渲染出一个,我需要怎么渲染多个呢ÿ...
  • layui xm-select的使用

    2021-01-27 10:35:07
    div id="handle_userArr0" class="xm-select-demo"></div> </div> 一般在layui中,下拉框用xm-select 比较方便。 var handle_userArr0 =ltreedata(handle_userArr0, dbcode, "1", "handle_...
  • xm-select使用

    千次阅读 2020-11-07 13:02:23
    最近项目上需要加载一个问题分类下拉框,数据量不是普通的六七个,还需要有搜索功能,原生的下拉框是满足不了了, 于是使用layui的第三方组件xmSelect,... xmSelect: 'xm-select' }).use(['xmSelect'],function(){
  • 基于layui和xm-select实现的一个日期多选小demo 效果如下: 代码如下: <html> <head> <title>日期多选组件demo</title> <script src="./layui.js"></script> &...
  • 页面引入layui.css、layui.js和xm-select.js 页面实现效果: layui.css、layui.js和xm-select.js 获取: Layui 官网:https://www.layui.com/ Layui 扩展组件 xmSelect 地址:...
  • xm-select是一款比较好用的组件,但是仍然不是很完美,对于一些需求紧靠配置无法得到满足,就比如说:选中当前分类及其所有子分类: 从上面两个 官方例子截图可以看出:在严格父子结构模式下;选中父级时只选中了...
  • Layui使用总结及多选方案Xm-select

    千次阅读 2021-01-30 15:26:31
    // 在homepage2.html里使用sample2模块 图例: 二,Xm-select 参考:Xm-select官网 始于 layui 的一个多选解决方案。前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了 1.普通多选形式 //多选下拉框渲染对象 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,783
精华内容 6,713
关键字:

xm-select

友情链接: FFT.zip