CascadeView级联组件实现思路详解(分离思想和单链表)

{"id": 1,"text": "北京市","code": 110000,"parentId": 0},{"id": 2,"text": "河北省","code": 220000,"parentId": 0},{"id": 3,"text": "河南省","code": 330000,"parentId": 0}

//查第一个级联项的列表/api/cascade?parentId=0//根据第一个级联项选的值，查第二个级联项的列表/api/cascade?parentId=1//根据第二个级联项选的值，查第三个级联项的列表/api/cascade?parentId=4

<ul id="licenseLocation-view" class="cascade-view clearfix"><li><select class="form-control"><option value="">请选择省份</option></select></li><li><select class="form-control"><option value="">请选择城市</option></select></li><li><select class="form-control"><option value="">请选择区县</option></select></li></ul>

<ul id="companyLocation-view" class="cascade-view clearfix"><li><select class="form-control"></select></li><li><select class="form-control"></select></li><li><select class="form-control"></select></li></ul>

define(function () {return {url: '',//数据查询接口textField: 'text', //返回的数据中要在<option>元素内显示的字段名称valueField: 'text', //返回的数据中要设置在<option>元素的value上的字段名称paramField: 'id', //当调用数据查询接口时，要传递给后台的数据对应的字段名称paramName: 'parentId', //当调用数据查询接口时，跟在url后面传递数据的参数名defaultParam: '', //当查询第一个级联项时，传递给后台的值，一般是0，''，或者-1等，表示要查询第上层的数据keepFirstOption: true, //是否保留第一个option（用作输入提示，如：请选择省份），如果为true，在重新加载级联项时，不会清除默认的第一个optionresolveAjax: function (res) {return res;}//因为级联项在加载数据的时候会发异步请求，这个回调用来解析异步请求返回的响应}});

define(function (require, exports, module) {var $ = require('jquery');var Class = require('mod/class');var EventBase = require('mod/eventBase');var PublicDefaults = require('mod/cascadePublicDefaults');var CascadeItem = require('mod/cascadeItem');/*** PublicDefaults的作用见CascadeItem组件内的注释*/var DEFAULTS = $.extend({}, PublicDefaults, {$elements: undefined, //级联项jq对象的数组，元素在数据中的顺序代表级联的先后顺序valueSeparator: ',', //获取所有级联项的值时使用的分隔符，如果是英文逗号，返回的值形如 北京市,区,朝阳区values: '', //用valueSeparator分隔的字符串，表示初始时各个select的值onChanged: $.noop //当任意级联项的值发生改变的时候会触发这个事件});var CascadeView = Class({instanceMembers: {init: function (options) {//通过this.base调用父类EventBase的init方法this.base();var opts = this.options = this.getOptions(options),items = this.items = [],that = this,$elements = opts.$elements,values = opts.values.split(opts.valueSeparator);this.on('changed.cascadeView', $.proxy(opts.onChanged, this));$elements && $elements.each(function (i) {var $el = $(this);//实例化CascadeItem组件，并把每个实例的prevItem属性指向前一个实例//第一个prevItem属性设置为undefinedvar cascadeItem = new CascadeItem($el, $.extend(that.getItemOptions(), {prevItem: i == 0 ? undefined : items[i - 1],value: $.trim(values[i])}));items.push(cascadeItem);//每个级联项实例发生改变都会触发CascadeView组件的changed事件//外部可在这个回调内处理业务逻辑//比如将所有级联项的值设置到一个隐藏域里面，用于表单提交cascadeItem.on('changed.cascadeItem', function () {that.trigger('changed.cascadeView', that.getValue());});});//初始化完成自动加载第一个级联项items.length && items[0].load();},getOptions: function (options) {return $.extend({}, this.getDefaults(), options);},getDefaults: function () {return DEFAULTS;},getItemOptions: function () {var opts = {}, _options = this.options;for (var i in PublicDefaults) {if (PublicDefaults.hasOwnProperty(i) && i in _options) {opts[i] = _options[i];}}return opts;},//获取所有级联项的值，是一个用valueSeparator分隔的字符串//为空的级联项的值不会返回getValue: function () {var value = [];this.items.forEach(function (item) {var val = $.trim(item.getValue());val != '' && value.push(val);});return value.join(this.options.valueSeparator);}},extend: EventBase});return CascadeView;});

define(function (require, exports, module) {var $ = require('jquery');var Class = require('mod/class');var EventBase = require('mod/eventBase');var PublicDefaults = require('mod/cascadePublicDefaults');var AjaxCache = require('mod/ajaxCache');//这是一个可缓存的Ajax组件var Ajax = new AjaxCache();/*** 有一部分option定义在PublicDefaults里面，因为CascadeItem组件不会被外部直接使用* 外部用的是CascadeView组件，所以有一部分的option必须变成公共的，在CascadeView组件也定义一次* 外部通过CascadeView组件传递所有的option* CascadeView内部实例化CascadeItem的时候，再把PublicDefaults内的option传递给CascadeItem*/var DEFAULTS = $.extend({}, PublicDefaults, {prevItem: undefined, // 指向前一个级联项value: '' //初始时显示的value});var CascadeItem = Class({instanceMembers: {init: function ($el, options) {//通过this.base调用父类EventBase的init方法this.base($el);this.$el = $el;this.options = this.getOptions(options);this.prevItem = this.options.prevItem; //前一个级联项this.hasContent = false;//这个变量用来控制是否需要重新加载数据this.cache = {};//用来缓存数据var that = this;//代理select元素的change事件$el.on('change', function () {that.trigger('changed.cascadeItem');});//当前一个级联项的值发生改变的时候，根据需要做清空和重新加载数据的处理this.prevItem && this.prevItem.on('changed.cascadeItem', function () {//只要前一个的值发生改变并且自身有内容的时候，就得清空内容that.hasContent && that.clear();//如果不是第一个级联项，同时前一个级联项没有选中有效的option时，就不处理if (that.prevItem && $.trim(that.prevItem.getValue()) == '') return;that.load();});var value = $.trim(this.options.value);value !== '' && this.one('render.cascadeItem', function () {//设置初始值that.$el.val(value.split(','));//通知后面的级联项做清空和重新加载数据的处理that.trigger('changed.cascadeItem');});},getOptions: function (options) {return $.extend({}, this.getDefaults(), options);},getDefaults: function () {return DEFAULTS;},clear: function () {var $el = this.$el;$el.val('');if (this.options.keepFirstOption) {//保留第一个option$el.children().filter(':gt(0)').remove();} else {//清空全部$el.html('');}//通知后面的级联项做清空和重新加载数据的处理this.trigger('changed.cascadeItem');this.hasContent = false;//表示内容为空},load: function () {var opts = this.options,paramValue,that = this,dataKey;//dataKey是在cache缓存时用的键名//由于第一个级联项的数据是顶层数据，所以在缓存的时候用的是固定且唯一的键：root//其它级联项的数据缓存时用的键名跟前一个选择的option有关if (!this.prevItem) {paramValue = opts.defaultParam;dataKey = 'root';} else {paramValue = this.prevItem.getParamValue();dataKey = paramValue;}//先看数据缓存中有没有加载过的数据，有就直接显示出来，避免Ajaxif (dataKey in this.cache) {this.render(this.cache[dataKey]);} else {var params = {};params[opts.paramName] = paramValue;Ajax.get(opts.url, params).done(function (res) {//resolveAjax这个回调用来在外部解析ajax返回的数据//它需要返回一个data数组var data = opts.resolveAjax(res);if (data) {that.cache[dataKey] = data;that.render(data);}});}},render: function (data) {var html = [],opts = this.options;data.forEach(function (item) {html.push(['<option value="',item[opts.valueField],'" data-param-value="',//将paramField对应的值存放在option的data-param-value属性上item[opts.paramField],'">',item[opts.textField],'</option>'].join(''));});//采用append的方式动态添加，避免影响第一个option//最后还要把value设置为空this.$el.append(html.join('')).val('');this.hasContent = true;//表示有内容this.trigger('render.cascadeItem');},getValue: function () {return this.$el.val();},getParamValue: function () {return this.$el.find('option:selected').data('paramValue');}},extend: EventBase});return CascadeItem;});

define(function (require, exports, module) {  var $ = require('jquery');  var CascadeView = require('mod/cascadeView');  function publicSetCascadeView(fieldName, opts) {    this.cascadeView = new CascadeView({      $elements: $('#' + fieldName + '-view').find('select'),      url: '../api/cascade.json',      onChanged: this.onChanged,      values: opts.values,      keepFirstOption: this.keepFirstOption,      resolveAjax: function (res) {        if (res.code == 200) {          return res.data;        }      }    });  }  var LOCATION_VIEWS = {    licenseLocation: {      $input: $('input[name="licenseLocation"]'),      keepFirstOption: true,      setCascadeView: publicSetCascadeView,      onChanged: function(e, value){        LOCATION_VIEWS.licenseLocation.$input.val(value);      }    },    companyLocation: {      $input: $('input[name="companyLocation"]'),      keepFirstOption: false,      setCascadeView: publicSetCascadeView,      onChanged: function(e, value){        LOCATION_VIEWS.companyLocation.$input.val(value);      }    }  };  LOCATION_VIEWS.licenseLocation.setCascadeView('licenseLocation', {    values: LOCATION_VIEWS.licenseLocation.$input.val()  });  LOCATION_VIEWS.companyLocation.setCascadeView('companyLocation', {    values: LOCATION_VIEWS.companyLocation.$input.val()  });});