手机端selector组件api文档

标签(空格分隔): 前端开发 js


因为二级用的比较多,为减少多余代码,故分为两个版本。参照之前的selector想法

参数列表


组件调用

联动方式的调用:

//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.新增了更新数据的功能,支持动态更新