layui 第三方组件平台

返回首页 发布组件

selectM.js 多选插件 selectN.js 无限级插件(json数据与layui-tree结构一致)

创建:2018-9-17

文档



实现动态设置选中值 set方法
实现自定义提示文字
实现ajax方式获取候选数据
实现禁用某些选项(基于候选数据,status=0)
实现设置下拉框宽度
实现选项搜索(仅支持无限级)
实现表单验证 lay-verify
实现自定义候选数据键名
重置(reset)恢复改为用set方法
HTML元素
	<form class="layui-form" method="post">

<div class="layui-form-item">
<label class="layui-form-label">多级1</label>
<div id="cat_ids1">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多级2</label>
<div id="cat_ids2">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多选1</label>
<div class="layui-input-block" id="tag_ids1">

</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多选2</label>
<div class="layui-input-block" id="tag_ids2">

</div>
</div>

<div class="layui-form-item" style="text-align:center;">
<div class="layui-input-block">
<button type="button" class="layui-btn" lay-submit="" lay-filter="demo">console.log</button>
</div>
</div>
</form>




<div id="btn-wrap">
<button type="button" class="layui-btn set1">设置多级1</button>
<button type="button" class="layui-btn set2">设置多选1</button>
</div>
js使用
<script charset="UTF-8" src="./layui/layui.js"></script> 
<script>

var tagData = [{"id":12,"name":"长者","status":0},{"id":13,"name":"工厂"},{"id":14,"name":"小学生"},{"id":15,"name":"大学生"},{"id":16,"name":"研究生"},{"id":17,"name":"教师"},{"id":18,"name":"记者"}];
var catData = [{"id":1,"name":"周边旅游","children":[{"id":24,"name":"广东","status":0,"children":[{"id":7,"name":"广州"},{"id":23,"name":"潮州"}]}]},{"id":5,"name":"国内旅游","children":[{"id":8,"name":"华北地区","children":[{"id":9,"name":"北京"}]}]},{"id":6,"name":"出境旅游","children":[{"id":10,"name":"东南亚","children":[{"id":11,"name":"马来西亚","children":[{"id":20,"name":"沙巴","children":[{"id":21,"name":"美人鱼岛","children":[{"id":22,"name":"潜水"}]}]}]}]}]}];

layui.config({
base : './'
}).extend({
selectN: './layui_extends/selectN',
selectM: './layui_extends/selectM',
}).use(['layer','form','jquery','selectN','selectM'],function(){
$ = layui.jquery;
var form = layui.form
,selectN = layui.selectN
,selectM = layui.selectM;


//无限级分类-基本配置
var catIns1 = selectN({
//元素容器【必填】
elem: '#cat_ids1'
,search:[false,true]
//候选数据【必填】
,data: catData
});


//无限级分类-所有配置
var catIns2 = selectN({
//元素容器【必填】
elem: '#cat_ids2'
//候选数据【必填】
,data: catData
//设置了长度
,width:null
//默认值
,selected: [6,10,11]

//为真只取最后一个值
,last:true

//空值项提示,可设置为数组['请选择省','请选择市','请选择县']
,tips: '请选择'

//事件过滤器,lay-filter名 不设置与选择器相同(去#.)
,filter: ''

//input的name 不设置与选择器相同(去#.)
,name: 'cat2'

//数据分隔符
,delimiter: ','

//数据的键名
,field:{idName:'id',titleName:'name',childName:'children'}

//表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
,formFilter: null

});


//多选标签-基本配置
var tagIns1 = selectM({
//元素容器【必填】
elem: '#tag_ids1'
//候选数据【必填】
,data: tagData
,max:2
,width:400
//添加验证
,verify:'required'
});


//多选标签-所有配置
var tagIns2 = selectM({
//元素容器【必填】
elem: '#tag_ids2'

//候选数据【必填】
,data: tagData

//默认值
,selected: [12,17]

//最多选中个数,默认5
,max : 6

//input的name 不设置与选择器相同(去#.)
,name: 'tag2'

//值的分隔符
,delimiter: ','

//候选项数据的键名
,field: {idName:'id',titleName:'name'}


});


form.on('submit(demo)',function(data){
console.log('catIns1 当前选中的值名:',catIns1.selected);
console.log('catIns1 当前选中的值:',catIns1.values);
console.log('catIns1 当前选中的名:',catIns1.names);
console.log('catIns1 当前最后一个选中值:',catIns1.lastValue);
console.log('catIns1 当前最后一个选中名:',catIns1.lastName);
console.log('catIns1 当前最后一个是否已选:',catIns1.isSelected);
console.log('');


console.log('tagIns1 当前选中的值名:',tagIns1.selected);
console.log('tagIns1 当前选中的值:',tagIns1.values);
console.log('tagIns1 当前选中的名:',tagIns1.names);

console.log('');

var formData = data.field;
console.log('表单对象:',formData);
})

//通过js动态选择
$('.set1').click(function(){
catIns1.set([6,10]);

});
//通过js动态选择
$('.set2').click(function(){
tagIns1.set([12,13,14,15]);
});
});




</script>
详情请看演示

所有配置参数

下载

立即下载 去码云下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。