3 Star 50 Fork 13

不死鸟 / layselect

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 3.30 KB
一键复制 编辑 原始数据 按行查看 历史
不死鸟 提交于 2021-10-19 14:40 . 使用说明更新

layselect

介绍

layui下拉框组件 layselect

软件架构

下载layselect后可直接放入layui/lay/modules/中当做原生组件使用,也可自行建立文件夹/modules/,layui使用的时候引用。

安装教程

  1. 直接下载放入工程

使用说明

  1. 直接放到layui/lay/modules/模块下作为原生组件
  2. 自定义目录如/modules/,layui.use之前声明使用 layui.config({ base: '../js/layui_exts/' }).extend({ regionSelect: 'regionSelect/regionSelect' }).use([''],function(){})
  3. 有问题可联系:872694792@qq.com
  4. 使用样例
layui.config({
	base:'js/modules/'
}).extend({
	layselect:'layselect'
}).use(['jquery','form','layselect'], function(){
	var select = layui.layselect,$=layui.jquery,form=layui.form;
		console.log(select);
		select.render({
			  elem:"#unit",
			  url:'json/groupshow.json',//归属类型
			  select:1,//默认选中索引
			  success:function(data){
				  //初始化完毕,data为绑定到组件上的数组集合
			  },
			  fail:function(e){
				  //失败时回调
			  },
			  format:function(data){
				  //对数据进行映射处理,需映射成:code,codeName,status,select,groupName,groupChildren
			  },
			  onselect:function(data){
				  //点击选中时触发,data为选中的value
			  }
		  });
		//映射案例
		select.render({
			  elem:"#forbiType",
			  url:'json/forbidden.json',//店铺列表
			  format:function(row){
				  return{
					  code:row.id,
					  status:row.status,
					  codeName:row.name
				  };
			  }
		});
		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);
			  }
		});
});

API说明

属性 说明 默认值
url 获取数据的请求地址,返回标准JSON格式:{code:'',codeName:'',status:'',groupName:'',groupChilddren:[]} 条件必传,指定option时可不传
elem 绑定的元素ID 必传
data 请求URL携带的参数 非必传
type 请求URL的方式,默认get 非必传
option 元素数据,数组类型,用于不通过请求url获取数据,本地自动赋值,option指定这url可不穿 非必传
select 指定默认选择项 非必传
方法 说明 默认值
format 请求返回数据格式与标准格式不一致时做映射处理 非必传
success 请求成功时回调,返回绑定到组件的数组集合 非必传
fail 请求失败时回调,返回失败信息 非必传
onselect 点击选择时事件响应(如事件无响应,记得加lay-filter属性=id) 非必传

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

DEMO演示

  1. DEMO演示
JavaScript
1
https://gitee.com/godbirds/layselect.git
git@gitee.com:godbirds/layselect.git
godbirds
layselect
layselect
master

搜索帮助