Fetch the repository succeeded.
layui下拉框组件 layselect
下载layselect后可直接放入layui/lay/modules/中当做原生组件使用,也可自行建立文件夹/modules/,layui使用的时候引用。
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);
}
});
});
属性 | 说明 | 默认值 |
---|---|---|
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) | 非必传 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
Activity
Community
Health
Trend
Influence
:Code submit frequency
:React/respond to issue & PR etc.
:Well-balanced team members and collaboration
:Recent popularity of project
:Star counts, download counts etc.