Layui多选框的使用xmSelect

最新推荐文章于 2024-09-26 16:43:06 发布

冒牌程序员的成长

最新推荐文章于 2024-09-26 16:43:06 发布

阅读量1w

点赞数 2

分类专栏： Layui的使用

本文链接：https://blog.csdn.net/qq_39736671/article/details/103351500

版权

Layui的使用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Layui多选框的使用xmSelect

1.页面
2.js
3.实例展示

1.页面

首先引入xmSelect.js

<script  type="text/javascript" src="js/xm-select.js"></script>

html页面

<body>
		<form class="layui-form">
			<div id="demo1" style="width:300px;"></div>
			<div id="demo2" style="width:300px;"></div>
			<div id="demo3" style="width:300px;"></div>
			<div id="demo4" style="width:300px;"></div>
		</form>
	</body>

2.js

	 <script type="text/javascript">
	 			//参数
	 			/*
	 			 属性				解释													类型			默认值
	 			 data	 		显示的数据											array		[]
	 			 content 		 自定义下来框html								string		-
	 			 initValue	初始化选中的数据，需要在data中存在；array		[]
	 			 tips				默认提示，类似placeholder				string		请选择
	 			 empty			空数据提示											string      暂无数据
	 			 filterable 	是否开启搜索										boolean	fasle
	 			 searchTips	搜索提示											string		请选择
	 			 delay			搜索延迟ms										int			500
	 			 * */
	 			//模拟参数
	 			var data=[
						{name: '北京1', value: 1, selected: true, disabled: true},
						{name: '北京2', value: 2, selected: true},
						{name: '北京3', value: 3, disabled: true},
						{name: '北京4', value: 4},
						{name: '北京5', value: 5},
						{name: '北京6', value: 6},
						{name: '北京7', value: 7},
						{name: '北京8', value: 8},
						{name: '北京9', value: 9},
					];
					
				//获取数据
	 			var demo1 = xmSelect.render({
					el: '#demo1', //id
					name: 'validweek',//用于表单提交
					layVerify: 'required',//非空校验
					layVerType: 'msg',//提示信息
					data: data,//数据
					//自己构件选项
					/*template:function({item,arr,name,value}){
						return name+'<span style="position:absolute;right:10px;color:red">'+value+'</span>'
					},*/
					toolbar: {
						show: true,
						list: ['ALL', 'CLEAR', 'REVERSE']
					},
					theme:{//主题
						color:'Orange'
					},
					filterable:'true',//开启搜索
					paging:'true',//显示分页
					pageSize:'5',//默认10
					//配置label样式
					model:{
						label:{
							type:'block',//text|block|count
							//1.使用字符串拼接方法
							text:{
								left:'',
								right:'',
								separator:','
							},
							//2.使用方块显示
							block:{
								showCount:2,//最大显示数量，0：不限制
								showIcon:false,//是否显示删除图标
								template:null,//自定义渲染name,
							},
							//3.自定义
							count:{
								template(data, sels){//data：所有的数据，sels:选中的数据
									return `已选中 ${sels.length} 项, 共 ${data.length} 项`
								}
							}
						}
					},
   			})
   			//数据回显(将后台数据拼接成array)比如
   			var resultData='${webInfo.validweek}'.split(',').sort();//4,5,6
   			//回显数据
		 	demo1.setValue(resultData);
		 	//获取选中的数据
		 	var str=demo1.getValue('valueStr');
   			
	 </script>

3.实例展示

在这里插入图片描述