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
TopJUI Combobox 联动相关推荐
- C# Combobox联动
接上一篇博文,对界面做一个小修改,做4个combobox,形成窗口之间的联动: 界面如下: 选择combobox里的条件,单击查询获取数据 首先连接数据库,获取到数据到第一个combobox里,代码在 ...
- ComboBox联动
//从webservice中取数据ajax Ext.Ajax.request({ url: 'WebService.asmx/GetCombox ...
- 用Ext 2.0 combobox 做的省份和城市联动选择框
因项目需要,做了这个,发上来给大家参考一下,呵呵. 刚开始的思路是通过定义好的数组通过combobox的store的loadData方式加载数据,后来发现还不如直接定义好数组格式就是store的格式, ...
- CheckedListBox与下拉框联动代码
private void yewubind(string id){//给业务类型下拉框绑定业务类型数据DataTable dtyewu = sb.SelectLast(id, 0);bool flag ...
- (转)WinForm控件使用文章收藏整理完成
http://home.cnblogs.com/group/topic/29829.html 对C# WinForm开发系列收集的控件使用方面进行整理, 加入了一些文章, 不断补充充实, 完善这方面. ...
- (转) MiniUI使用
来源于https://my.oschina.net/yunsy/blog/542597 1.MiniUI页签定位 <body> <inputname= "bizType&q ...
- C# WinForm控件、自定义控件整理(大全)
C# WinForm开发系列 - CheckBox/Button/Label/ProgressBar WinForm下CheckedListBox的数据绑定 Winform 下无闪烁走马灯效果实现 c ...
- C#深入.NET平台的软件系统分层开发
今天我们来讲讲分层开发,你从标题能不能简单的认识一下什么是分层呢? 不懂也没关系,接下来我来给你讲讲. 第一章 软件系统的分层开发 (1)其实分层模式可以这样定义:将解决方案中功能不同的模块分到不同的 ...
- c语言%u的作用,C语言中%p,%u,%lu都有什么用处
gdb 定位 oops call trace [ 1.454380] BUG: unable to handle kernel NULL pointer dereference at 00000 ...
- extjs 引入html页面,Extjs嵌入html
方式一:使用组件的html属性嵌入html代码,如果html代码中存在参数可以使用字符串拼接的方式拼接html代码. html页面: Extjs中嵌入html Extjs代码: Ext.Loader. ...
最新文章
- 一次DPM备份Exchange DAG的故障处理过程
- 如何区分“Invoice代码”和“Invoice号码”?
- Spark _08窄依赖和宽依赖stage
- Swift 与 JSON 数据
- linux ssh服务,Linux配置SSH服务以便实现远程连接
- 国编是什么,需要什么条件,是什么流程?
- 『转』陆涛为什么不爱米莱
- 语言阿克曼函数_函数式的动态规划
- 程序员面试金典——1.6像素翻转
- win10 安装tensorflow-gpu
- 富文本编辑器粘贴图片
- ‘真三国无双5’完美存档修改
- 国空三区三线思考之:Arcgis自上而下从左到右进行编号
- 《咸鱼分享》DNS反向解析
- PTA L1-059 敲笨钟
- Pj Immediate Decodability
- CV_8U与CV_32F等image type的不同
- Photoshop 2020投影被裁切,显示不完整的解决办法
- iOS各个版本的特性和差别
- 一句“哥,咱家有钱了”