xm-select的简单使用

基于客户需求需要一个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 到这来问题就解决了！！！

xm-select的简单使用

猜你喜欢