iselector组件

iselector

iselector插件是一个城市联动插件，它支持以下两种渲染模式：

1、自定义标签
2、select

Author

name:lq
concat:[email protected]

Example

http://codepen.io/N-feng/pen/kXyxKm

Options

iselector组件
@param       {object}       dataJson            传入json数据
@param       {string}       container           父节点
@param       {string}       template            自定义html模板
@param       {object}       placeholder         列默认显示的文字
@param       {object}       field               input的字段名 [省，市，区]
@param       {boolean}      iselect             是否用于select,默认是false，用于自定义
@param       {boolean}      isvalue             value存的是id 还是 name 默认true.是存id
@param       {boolean}      shorthand           是否开启简写功能,默认不开启 false
@param       {number}       level               多少列  默认是一列(级) 1
@param       {object}       values              返回选中的值
@return      {function}     joinHtml            拼接html的函数，用于json数据自定义的，里面有4个传值
                                                 [data-json数据, pid-json数据的父id, level-列数（级数）, 
                                                 placeholder-默认显示的文字]

Methods

无

Usage

/* 自定义标签 */
<div class="selector-container clearfix city-container"></div>

//实例化城市
$('.city-container').IUI('iselector',{
    dataJson: cityData,            //json数据
    level: 3,                    //多少级联动
    startClick: function(self, target, config) {
        console.log(self, target, config);
    }
});

/* select */
<div class="selector-container clearfix city-select"></div>

//原生select实例化
$('.city-select').IUI('iselector',{
    dataJson: cityData,
    level: 3,
    template: '<select name="{{field}}" role="content" data-caller="{{caller}}" class="selector-control selector-control-{{level}}">{{content}}</select>',
    iselect: true,
    shorthand: true
});

//选择之后的回调方法
/**
* [description]   自定义触发事件第一个列(级)所执行的事件
* 省
*/
$('.city-container').on('choose-1', function(event, self, tagert, plusIndex, values) {
  var self = self;                 //this
  var tagert = tagert;            //选中的选项
  var vals = values;                //返回的值是倒过来的[省，市，区]
  var index = plusIndex;          //索引
  console.log(self, tagert, plusIndex, vals);
});

/**
* [description]   自定义触发事件第一个列(级)所执行的事件
* 市
*/
$('.city-container').on('choose-2', function(event, self, tagert, plusIndex, values) {
  var self = self;                 //this
  var tagert = tagert;            //选中的选项
  var vals = values;                //返回的值是倒过来的[省，市，区]
  var index = plusIndex;          //索引
  console.log(self, tagert, plusIndex, vals);
});

/**
* [description]   自定义触发事件第一个列(级)所执行的事件
* 区
*/
$('.city-container').on('choose-3', function(event, self, tagert, plusIndex, values) {
  var self = self;                 //this
  var tagert = tagert;            //选中的选项
  var vals = values;                //返回的值是倒过来的[省，市，区]
  var index = plusIndex;          //索引
  console.log(self, tagert, plusIndex, vals);
});

Attention

请注意因业务需求，所以所有下级都根据上级选择之后自动选择第一项。