手机端selector组件api文档
标签(空格分隔): 前端开发 js
因为二级用的比较多,为减少多余代码,故分为两个版本。参照之前的selector想法
参数列表
- 手机端模拟选择-2级
- @param
- level [级别:1,2,3]
- line [显示行数:默认为3]
- height [行高:默认40]
- idDefault [是否填充默认值:默认false]
- splitStr [分割符号:默认’ ‘(例如:’/’,’-‘,’#’)]
- Linkpage [是否联动:默认false]
- dataLink [有联动时的数据(有格式)]
- data1 [一级数据(Linkpage:false时才有用)]
- data2 [二级数据(Linkpage:false时才有用)]
- header [头部代码]
- afterOne:function(){} [选择一级后回调函数]
- afterTwo:function(){} [选择二级后回调函数]
- confirm:function(){} [确定回调]
- cancel:function(){} [取消回调]
- @return deffered{‘show’:fn,’hide’:fn,’updateData’:fn}
组件调用
联动方式的调用:
//level与data个数要相等
//method接口方法:show,hide
//当level:1时,linkpage不能为true
var method=$('.select-value').selectList({
//层级,决定选择框是几等分
level:2,
//Linkpage:false时才有data1,data2
// data1:level1,
// data2:level2,
//Linkpage:true时才有ddataLink
//显示高度
// height:40,
dataLink:dataJson,
Linkpage:true,
//显示行数
line:6,
//是否有默认值,默认为false
idDefault:true,
//分割字符,默认为' '
splitStr:'-',
//标题html
header:'<div class="selector-header">这是真的<a href="javascript:;" class="selector-cancel">取消</a><a href="javascript:;" class="selector-confirm">确定</a></div>',
afterOne:function(result){
// console.info(result.target.html())
},
afterTwo:function(result){
//console.info(result.target.html())
},
confirm:function(){
//更新渲染数据
method.updateData(level3);
console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
},
cancel:function(){
console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
}
})
//回调函数
// console.info(method)
// method.show();
// method.hide();
不联动方式的调用:
var method4=$('.select-value4').selectList({
level:2,
data1:level1,
data2:level2,
line:5,
Linkpage:false,
idDefault:true,
afterOne:function(result){
// console.info(result.target.html())
},
afterTwo:function(result){
//console.info(result.target.html())
},
confirm:function(){
method4.updateData([level2,level1]);
//console.info($('.select-value').data('id1')+'-'+$('.select-value').data('id2')+'-'+$('.select-value').data('id3'));
}
})
为什么要用这个组件
:
1.除了组件自带需要的样式,需要用户额外编写的css基本没有,除了想修改选择插件每个li的高度。
2.json格式默认为:
level3=[
{
"name": '111',
"value": '1',
"child": [
{
"name": '222',
"value": '3',
"child": [
{
"name": 'fff',
"value": '3'
},
{
"name": 'ggg',
"value": '4'
},
{
"name": 'hhh',
"value": '5'
},
{
"name": 'yyy',
"value": '6'
}
]
},
{
"name": '555',
"value": '6',
"child": [
{
"name": 'fff',
"value": '3'
},
{
"name": 'ggg',
"value": '4'
},
{
"name": 'hhh',
"value": '5'
},
{
"name": 'yyy',
"value": '6'
}
]
}
]
},
{
"name": 'ddd',
"value": '2',
"child": [
{
"name": 'fff',
"value": '3'
},
{
"name": 'ggg',
"value": '4'
},
{
"name": 'hhh',
"value": '5'
},
{
"name": 'yyy',
"value": '6'
}
]
}
];
借用上展的json转换器可将campaign上的json格式转换成这种格式:这样可以增加json的灵活性,不用因为json格式不同就需要改组件内部代码。
;(function(){
var data = [],data2 = [];
cityData = JSON.stringify(cityData).replace(/\"id\":/g, "\"value\":");
cityData=JSON.parse(cityData);
for (var i = 0,length = cityData.length; i < length; i++) {
if (cityData[i].parentId !== '100000') {
data2.push(cityData[i]);
}else{
data.push(cityData[i]);
}
};
$.each(data, function(index, val) {
var parentId = val.value;
var _val = val;
_val.child = [];
$.each(data2, function(index, val) {
if (val.parentId === parentId) {
_val.child.push(val);
};
});
});
window.dataJson = data;
})();
3.可修改selector头部代码,增加组件样式灵活性
4.调用组件的元素可以和填充的表单元素不是同一个,如果没设置则默认相同
不同的情况:(data-input)
<div class="select-input2" data-input=".select-value2">
请点击这里选择,二级联动选择,选择元素和内容填充元素不同
</div>
<input type="text" class="select-value2" value="收到额外人 饿的方式度过333" readonly="true">
相同时:
<input type="text" class="select-value3" value="" readonly="true">
5.自动填充默认值
value格式需要和分割符一致,默认为空格,则为value="默认值1 默认值2"
默认值是用name来匹配,取匹配到的第一个,不是默认值则通过id来匹配
6.新增了更新数据的功能,支持动态更新