TopJUI Combobox 联动

这里给联动进行一个简单定义:因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 

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

时间: 2024-10-29 07:57:01

TopJUI Combobox 联动的相关文章

vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)

?? vs2013+MVC3.0+EasyUI的ComboBox联动使用(二) 简单介绍:在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用. 载入ComboBox数据,而且实现联动效果, 本文将採用EasyUI中的Date控件与ComboBox实现联动效果,如图: ----------------------------------------------------------------------------------------------

Extjs4 Combobox 联动始终出现loading错误的解决办法

当重复选者combobox 联动时,下级的Combobox 会出现loading的错误表现形式,虽然Store数据已加载完也是一样. 废话少说贴代码就知道如何处理了:(注意红色部分的关键语句) }, { xtype:'combobox', labelStyle:'color:blue;', labelWidth : 70,//标签宽度 width : 200,//字段宽度 msgTarget: 'side', allowBlank: false,    //是否允许空值 labelStyle:'

C# Combobox联动

接上一篇博文,对界面做一个小修改,做4个combobox,形成窗口之间的联动: 界面如下: 选择combobox里的条件,单击查询获取数据 首先连接数据库,获取到数据到第一个combobox里,代码在上一篇博文里有,这里不多加叙述,实现之后进行第一个和第二个combobox的联动: 打开combobox1的SelectedIndexChanged()函数,当Combobox的值发生变化时,Combobox的值随之变化,同理Combobox3的联动写在Combobox2的SelectedIndex

Ext 4.2以后版本 ComboBox 联动

//combox树 ComboTree: function (upDep, empStore) { var com = Ext.create('Ext.ux.desktop.ComboTree', { margin: '0 0 5 5', labelWidth: 60, //rootText: 'text', emptyText: '请选择部门...', flex: 3, rootId: 'id', expanded: true, storeUrl: '/data/personMatter/or

Winform中多个ComboBox联动问题

本人在窗体中添加了一个FlowLayoutPanel控件flpControlContain,为了能让控件自动排位(省了自己控制位置)代码如下://在窗体中添加一个按钮,每当该按钮点击一次,添加一个下拉框 private void btnAddNew_Click(object sender, EventArgs e){this.ConditonCount++;//是一个私有字段,用于记录当前添加的是第几个,每添加一个自增1//添加列名下拉列表ComboBox cmb = new ComboBox(

TopJUI Combobox onSelect 事件失效BUG

版本:2.2.8 onChange : function(b, c) 两个参数:当前选择后在Combobox中显示的数据,实际是textField:另一个是改变前的数据 onSelect : function(b) 当前选择到的记录数据 如:{id: "83787C0376074F2FAC5A1EDD13292929", selected: true, text: "集团1", value: "集团1"} 可以采用域操作符进行访问 问题:onCh

comboBox联动

cboProType--Items集合数据为: 0-其他1-旅行社协议2-公司协议3-VIPCARD4-INTERNET //cboProName绑定 private void BindProName() { conn.Open(); SqlDataAdapter da = new SqlDataAdapter("select ContractID,ContractName from Contract", conn); DataSet ds = new DataSet(); da.Fi

DevExpress2011控件教程)编辑控件(comboBox,AspxCheckBox) 范例1

DevExpress2011控件教程)编辑控件(comboBox,AspxCheckBox) 范例1 AspxCheckBox 是一个检查编辑控件去展示特殊条件是否关闭或者打开.它通常会展示Yes/No 或者是 True/False 的选择给用户.用户可以通过用鼠标点击编辑控件改变Check状态或者通过按 SPACE键来改变. 2011版本允许有2或3种状态. ASPxCheckBox支持2到3中状态,依赖 AllowGrayed属性设置. 用程序设置状态,一般使用Checked 或者 Chec

Struts2框架配置和基本用法

struts2框架1.配置web.xml <filter> <filter-name>Struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>Str