高级查询组件下拉框联动（三）

实现下拉框联动例子.

1.首先在ul中定义省份和城市查询条件。

<ul id="dynamicCondition" style="display:none;"><li field="DynamicCondition.province" title="省份" ops="equal" edit="selectProvince" templet="#dict-province"  layVerify="" allowDel="false"></li><li field="DynamicCondition.city" title="城市" ops="equal" edit="selectCity" templet="#dict-city" layVerify="" allowDel="false"></li>
</ul>

因为是级联操作，条件直接有关联关系，所以设置属性allowDel=“false”。不然要考虑条件选择时缺少省份或者城市时太复杂了。
然后因为是下拉框选择，一般操作就是equal，所以设置ops=“equal” 尽量简化，除去不必要的逻辑。
组件自带的编辑器只有text，select，date。上面的selectProvince，selectCity是我们要扩展的编辑器。

2.扩展编辑器。

var editorProvince = dynamicCondition.createEditor("selectProvince");$.extend( editorProvince ,{createElement:function(item){var selectHtml;if($(item.templet).is("select")){selectHtml = $(item.templet).prop("outerHTML");}else{selectHtml = $(item.templet).html();}return $(selectHtml);},getRequestText:function(ele){return  ele.find("option:selected").text();}})var editorCity = dynamicCondition.createEditor("selectCity");$.extend( editorCity ,{createElement:function(item){var selJq = $("<select>");selJq.append("<option value=''></option>");return selJq;},getRequestText:function(ele){return  ele.find("option:selected").text();}})

3.创建查询组件实例。重点是在afterOpen中实现下拉框联动绑定初始化。

var dc = dynamicCondition.create({//通过容器选择器传入，也可以$("#dynamicCondition"),或者document.getElementById("dynamicCondition")elem:"#dynamicCondition" ,tableId:"listTableId" ,conditionTextId:"#msg",afterOpen:function(_dc){//下拉框联动form.on('select(province)', function(data){var params={province:data.value};$.post("/#(appName)/demo/dynamicCondition/getCityList",params,function(data){if(data.code == 0){var eleJq = _dc.getRowDivs("DynamicCondition.city")[0].eleJq;eleJq.html("<option value=''></option>");$.each(data.otherData.cityList, function(key, val) {var option1 = $("<option>").val(val.value).text(val.label);eleJq.append(option1);}); form.render('select');}});})//如果省份有值，则需要初始化城市下拉框var provinceVal =  _dc.getVal("DynamicCondition.province");if(provinceVal){var params={province:provinceVal};$.post("/#(appName)/demo/dynamicCondition/getCityList",params,function(data){if(data.code == 0){var eleJq = _dc.getRowDivs("DynamicCondition.city")[0].eleJq;eleJq.html("<option value=''></option>");$.each(data.otherData.cityList, function(key, val) {var option1 = $("<option>").val(val.value).text(val.label);eleJq.append(option1);}); eleJq.val(eleJq.attr("oldVal"));form.render('select');}});}}});

代码中需要注意的地方:
var provinceVal = _dc.getVal(“DynamicCondition.province”);
通过上面代码可以获取弹出的条件查询窗口中省份的值provinceVal。

var eleJq = _dc.getRowDivs(“DynamicCondition.city”)[0].eleJq;
通过上面代码可以获取selectCity创建的ele对象。每行的div对象有缓存编辑器创建的ele对象。
如果操作符是between，则会缓存eleLeftJq和eleRightJq。

eleJq.val(eleJq.attr(“oldVal”));
eleJq.attr(“oldVal”)这个能获取到值是因为默认的fillElement函数将值写入了oldVal属性。因为之前“城市”下拉框数据还没有加载进去，所以$(ele).val(val.value);设置无效。当“城市”下拉框数据加载完成时想获取原来的数据就可以通过oldVal属性来获取了。

/***
* 初始值填充DOM。这个方法只会在用户点击查询按钮，弹出窗口渲染时，给对应查询条件设置之前保存的值。
* ele createElement 生成的对象
* val 值 格式{value:"",text:""}
*/
fillElement:function(ele, val){$(ele).val(val.value);$(ele).attr("oldVal",val.value);
}

4.设置初始条件。因为设置了 allowDel=“false” ，那么就必须设置初始条件，否则这个条件就看不到了。

dc.setCondition([ ["DynamicCondition.province",null,""],["DynamicCondition.city",null,""]  ]);

到这里下拉框联动就实现了。
相关链接：
插件源码：去码云下载或者去layui官网下载
体验地址1：动态添加条件查询Demo
体验地址2：带后台的查询demo
基于layui的动态添加条件查询ui插件
高级查询组件dynamicCondition升级为v2.0.0版本（一）
高级查询组件dynamicCondition升级为v2.0.0版本（二）

高级查询组件下拉框联动（三）相关推荐

html年月日下拉联动菜单年月日三下拉框联动
<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' co ...
swing下拉框从mysql_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
java下拉框查询_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
antd 下拉框怎么联动_antd下拉框联动使用步骤详解
这次给大家带来antd下拉框联动使用步骤详解,antd下拉框联动使用的注意事项有哪些,下面就是实战案例,一起来看一下. 先说一下效果要求,上面一个下拉框,下面一个,要求上面选中的时候,下面的内容要跟着 ...
使用JavaScript写一个三级下拉框联动
使用JavaScript写一个三级下拉框联动首先我们需要确定思路,定义三个下拉框: 1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组,将数组信息添加下拉框2.2每 ...
Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...
php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动，想当年，为了实现三级联动， - phpStudy...
AJAX实现下拉框联动想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示. 现在使用AJAX真是太方便了,下面做了个简单例子,实现 ...
javascript实现下拉条联动_js实现下拉框联动
今天学习了如何用js实现下拉框的联动,下拉框联动主要指的是当一个下拉框的内容改变时另一个下拉框的内容也会相应的发生改变.比如,我么有时在注册时会需要添加籍贯,当我们选择相应的省份之后,后面的市区也会相 ...

高级查询组件下拉框联动（三）

高级查询组件下拉框联动（三）相关推荐

最新文章

热门文章