TopJUI Combobox 联动

这里给联动进行一个简单定义：因Combobox选择或输入的值发生改变时对自身或者其它组件产生影响称为联动。（注：editable确定是否可以手动输入）

有两种实现方法：

一、自己写对应的onChange、onSelect方法进行联动。这种方法灵活性强一些。

注意这两个方法的激发条件即可，尤其注意在数据赋值而激发的负面影响，会导致loadData事件失效。

详细可参考JQuery/EasyUI内的文档，较为全面。

二、调用框架内部内置的方法

以地区四级联动为例

 <fieldset>
     <legend>地址选择</legend>
 </fieldset>
 <div class="topjui-row">
     <div class="topjui-col-sm6">
         <label class="topjui-form-label">省</label>
         <div class="topjui-input-block">
 　　　　　　　　<input type="text" id="province" name="province" data-toggle="topjui-combobox"
     　　　　　　　　data-options="valueField:'text',url:contextPath + '/common/_address.jsp?areaName=-1',
                        childCombobox:{ id:'city', url:contextPath + '/common/_address.jsp?areaName={parentValue}'}">
         </div>
     </div>
     <div class="topjui-col-sm6">
         <label class="topjui-form-label">市</label>
         <div class="topjui-input-block">
 　　　　　　　　<input type="text" id="city" name="city" data-toggle="topjui-combobox"
     　　　　　　　　data-options="valueField:'text',
         　　　　　　　　childCombobox:{ id:'county', url:contextPath + '/common/_address.jsp?areaName={parentValue}'}">
         </div>
     </div>
 </div>
 <div class="topjui-row">
     <div class="topjui-col-sm6">
         <label class="topjui-form-label">县/区</label>
         <div class="topjui-input-block">
 　　　　　　　　<input type="text" id="county" name="county" data-toggle="topjui-combobox" data-options="valueField:'text'">
         </div>
     </div>
     <div class="topjui-col-sm6">
         <label class="topjui-form-label">地址</label>
         <div class="topjui-input-block">
 　　　　　　　　<input type="text" id="street" name="street" data-toggle="topjui-textbox"
     　　　　　　　　data-options="validType:'length[0,50]'">
         </div>
     </div>
 </div>

childCombobox在onChange中激活，即值发生改变后会同步联动其相关联的组件，代码如下：

 if ("object" == typeof d.childCombobox) {
     var e = d.childCombobox,
         f = a("#" + e.id);
     if (f.combobox("setText", ""), f.combobox("setValue", ""), e.url) {
         var g = e.url.replace("{parentValue}", b);
         f.combobox("reload", g)
     }
 }

可以在此添加与其它组件间的联动，如添加对文本框的联动

 if ("object" == typeof d.childTextbox) {
     var e = d.childTextbox,
         f = a("#" + e.id);
     if (f.textbox("setText", ""), f.textbox("setValue", ""), e.url) {
         var g = e.url.replace("{parentValue}", b);
         $.getJSON(g, function (da) {
             f.textbox("setValue", da.text);
             f.textbox("setText", da.text);
         });
     }
 }

附：全国行政三级地区数据下载地址（四级过大）

CREATE TABLE `s_area` (
  `areaId` int(20) NOT NULL COMMENT 'ID',
  `areaCode` varchar(50) NOT NULL COMMENT ' 地区码',
  `areaName` varchar(30) NOT NULL COMMENT '地区名称',
  `level` tinyint(4) DEFAULT '-1' COMMENT '级别',
  `cityCode` varchar(50) DEFAULT NULL COMMENT '电话区号',
  `center` varchar(50) DEFAULT NULL COMMENT '经纬度',
  `parentId` int(20) NOT NULL,
  `zipCode` varchar(6) NOT NULL DEFAULT '' COMMENT '邮编',
  `fullName` varchar(50) NOT NULL DEFAULT '' COMMENT '地址全称',
  PRIMARY KEY (`areaId`,`parentId`,`areaName`),
  KEY `areaCode` (`areaCode`),
  KEY `parentId` (`parentId`),
  KEY `level` (`level`),
  KEY `areaName` (`areaName`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='地区码表';

链接：https://pan.baidu.com/s/1gSnjtc1Yq1KovUB-j63KUw
提取码：mhdl