Layselect 展示示例

作者：Darker.Wang

联系：872694792@qq.com

背景：项目过程中，select的下拉框的数据基本是可配置的，之前使用easyui时对select的数据通过一个url即可获取到数据，非常方便，切换到layui没有相应的功能。特写了这个组件，需要的自行下载引用。 使用方式：将layselect.js文件放到项目中指定的位置（也可直接放到layui的lay文件夹中直接使用），放到其他地方的遵循layui使用规范，如下：

layui.config({base: '../js/layui_exts/'}).extend({
  regionSelect: 'regionSelect/regionSelect'
}).use([''],function(){})

码云地址：https://gitee.com/godbirds/layselect

云服资源： 阿里云 腾讯云 新客户礼包 腾讯云数据库 礼品兑换

 使用代码参考

  //如果放到layui.lay中，不用config引入，当成原生组件layui.use直接使用
  layui.config({
  	base:'js/modules/'
  }).extend({
  	layselect:'layselect'
  }).use(['jquery','form','layer','layselect'], function(){
  	var $=layui.jquery,select=layui.layselect,form=layui.form,layer=layui.layer;
  		//分租类型指定选中项
  		select.render({
  			elem:"#unit",
  			url:'json/groupshow.json',//归属类型
  			select:"0-1",//指定默认选择项的索引（从0开始），分租时用类似 0-1表示默认选中，"-"前面0是第一个分租，后面1是第一个分租中子集合的第二个元素
  			success:function(data){
  				console.log(data);
  			},
  			onselect:function(key,value){
  				layer.msg("选择了："+key+value); //这里content是一个普通的String
  			}
  		});
  		//一般展示
  		select.render({
  			  elem:"#subjectType",
  			  url:'json/common.json',//归属类型
  			  select:10000,//指定默认选择项的索引
  			  format:function(data){
  				  return data;
  			  },
  			  success:function(data){},
  			  onselect:function(data){
  				layer.msg("选择了："+data);  
  			  }
  		  });
  		  //不请求URL自定义数据
  		select.render({
  			  elem:"#orderData",
  			  //url:'',//归属类型
  			  option:[
  				  {code:'1',codeName:'1-第一个'},
  				  {code:'2',codeName:'2-第二个'},
  				  {code:'3',codeName:'3-第三个'},
  				  {code:'4',codeName:'4-第四个',select:true},
  				  {code:'5',codeName:'5-第五个'},
  				  {code:'6',codeName:'6-第六个'}],
  			  select:"0",//确认默认项：option内部select=true的优先级高于外部select指定索引,最终的默认选项是4-第四个
  			  onselect:function(data){
  				  layer.msg("选中了："+data);
  			  }
  		});
  		  //映射案例
  		  select.render({
  			  elem:"#forbiType",
  			  url:'json/forbidden.json',//店铺列表
  			  format:function(row){
  				  return{
  					  code:row.id,
  					  status:row.status,
  					  codeName:row.name
  				  };
  			  }
  		  });
  		  select.render({
  			  elem:"#producttype1",
  			  url:'json/producttype.json',//产品类型
  			  onselect:function(value){//优先级高于form.on(select(obj))
  				  $('#producttype2').empty();//二级先清空，否则加载不到时还是原来的，根据需求清空
  				  select.render({
  					  elem:"#producttype2",//加载二级类型
  					  url:'json/producttype-'+value+".json",
  					  onselect:function(value2){
  						  console.log("value="+value+"value2="+value2)
  						  $('#productType').empty();//同时清空实际产品类型
  						  select.render({
  							  elem:"#productType",//加载明细类型(三级菜单)
  							  url:'json/producttype-'+value+'-'+value2+'.json'
  						  });
  					  }
  				  });
  			  }
  		  });
  	});