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.实例展示
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
