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

实现下拉框联动例子.

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版本（二）

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

猜你喜欢