码迷,mamicode.com
首页 > 其他好文 > 详细

TopJUI Combobox 联动

时间:2019-04-21 10:12:39      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:setvalue   dcom   jquery   cti   end   form   load   ons   链接   

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

有两种实现方法:

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

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

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

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

以地区四级联动为例

 1 <fieldset>
 2     <legend>地址选择</legend>
 3 </fieldset>
 4 <div class="topjui-row">
 5     <div class="topjui-col-sm6">
 6         <label class="topjui-form-label"></label>
 7         <div class="topjui-input-block">
 8         <input type="text" id="province" name="province" data-toggle="topjui-combobox"
 9             data-options="valueField:‘text‘,url:contextPath + ‘/common/_address.jsp?areaName=-1‘,
10                        childCombobox:{ id:‘city‘, url:contextPath + ‘/common/_address.jsp?areaName={parentValue}‘}">
11         </div>
12     </div>
13     <div class="topjui-col-sm6">
14         <label class="topjui-form-label"></label>
15         <div class="topjui-input-block">
16         <input type="text" id="city" name="city" data-toggle="topjui-combobox"
17             data-options="valueField:‘text‘,
18                 childCombobox:{ id:‘county‘, url:contextPath + ‘/common/_address.jsp?areaName={parentValue}‘}">
19         </div>
20     </div>
21 </div>
22 <div class="topjui-row">
23     <div class="topjui-col-sm6">
24         <label class="topjui-form-label">县/区</label>
25         <div class="topjui-input-block">
26         <input type="text" id="county" name="county" data-toggle="topjui-combobox" data-options="valueField:‘text‘">
27         </div>
28     </div>
29     <div class="topjui-col-sm6">
30         <label class="topjui-form-label">地址</label>
31         <div class="topjui-input-block">
32         <input type="text" id="street" name="street" data-toggle="topjui-textbox" 
33             data-options="validType:‘length[0,50]‘">
34         </div>
35     </div>
36 </div>

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

1 if ("object" == typeof d.childCombobox) {
2     var e = d.childCombobox,
3         f = a("#" + e.id);
4     if (f.combobox("setText", ""), f.combobox("setValue", ""), e.url) {
5         var g = e.url.replace("{parentValue}", b);
6         f.combobox("reload", g)
7     }
8 }

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

 1 if ("object" == typeof d.childTextbox) { 
 2     var e = d.childTextbox,
 3         f = a("#" + e.id);
 4     if (f.textbox("setText", ""), f.textbox("setValue", ""), e.url) {
 5         var g = e.url.replace("{parentValue}", b);
 6         $.getJSON(g, function (da) {
 7             f.textbox("setValue", da.text);
 8             f.textbox("setText", da.text);
 9         });
10     }
11 }

附:全国行政三级地区数据下载地址(四级过大)

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 000000 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 

TopJUI Combobox 联动

标签:setvalue   dcom   jquery   cti   end   form   load   ons   链接   

原文地址:https://www.cnblogs.com/lxz-jlu/p/10743720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!