高级查询组件dynamicCondition升级为v2.0.0版本（二）

新版本特性：
1.新增ops和allowDel属性。

<ul id="dynamicCondition" style="display:none;">
	<li field="DynamicCondition.id" title="id" edit="text" layVerify="number"></li>
	<li field="DynamicCondition.logicDel" title="是否有效" ops="equal" edit="editorRadio" layVerify=""></li>
	<li field="DynamicCondition.name" title="姓名" ops="equal,like,end" edit="text" layVerify=""></li>
	<li field="DynamicCondition.sex" title="性别" edit="select" layVerify="number" templet="#dict-sex"></li>
	<li field="DynamicCondition.birthday" title="生日" edit="date" layVerify=""></li>
	<li field="DynamicCondition.phone" title="手机号码" edit="text" layVerify=""></li>
	<li field="DynamicCondition.email" title="邮箱"  edit="text" layVerify=""></li>
	<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>
	<li field="DynamicCondition.goodsClassifyId" title="商品分类" ops="equal" edit="goodsClassifyTree" layVerify="" ></li>
</ul>

这里新增了ops属性和allowDel属性。
在这里插入图片描述
2.支持扩展编辑器。可以实现下拉框级联，下拉树，单选组等ui控件。
编辑器默认的方法：

    var editor = {
    		/***
    		 * 生成DOM对象ele,jquery封装返回$(ele)
    		 * 当创建查询条件时调用。
    		 * return ele,或者$(ele)
    		 */
    		createElement:function(item){
				return $("<div></div>");
    		}
    		/***
    		 * 初始值填充DOM。这个方法只会在用户点击查询按钮，弹出窗口渲染时，给对应查询条件设置之前保存的值。
    		 * ele createElement 生成的对象
    		 * val 值 格式{value:"",text:""}
    		 */
    		,fillElement:function(ele, val){
    			$(ele).val(val.value);
    			$(ele).attr("oldVal",val.value);
    		}
    		/***
    		 * 用于ajax请求提交的参数值。当点击弹出窗口的查询按钮时会用到。
    		 */
    		,getRequestValue:function(ele){
    			return $(ele).val();
    		}
    		/***
    		 * 查询条件中显示的值。
    		 */
    		,getRequestText:function(ele){
    			return this.getRequestValue(ele);
    		}
    		/***
    		 * createElement和fillElement调用后渲染。
    		 * 因为createElement执行后创建的ele还没有放入document中，所以还无法渲染。
    		 * 因为增加一个render方法，调用render时创建的elel已经加入到document了，所以在此方法中可以完成渲染。
    		 */
    		,render:function(ele){
    		}
    };

如果要实现自定义的编辑器，需要根据需要覆盖对应的方法就可以了。
举个例子：扩展一个简单的单选查询条件编辑器，看是如何实现扩展的吧。

  //单选查询条件
  var editorRadio = dynamicCondition.createEditor("editorRadio");
  $.extend( editorRadio ,{
		createElement:function(item){
	  		var randomId= (Math.random()+"").substr(2);
	  		var ele = $("<div style='text-align: center;'>");
	  		ele.append('<input type="radio" name="rd'+randomId+'" value="N" title="是"/>');
	  		ele.append('<input type="radio" name="rd'+randomId+'" value="Y" title="否" />');
	  		return ele;
		}
		,fillElement:function(ele, val){
			$(ele).find('input[value="'+val.value+'"]').prop('checked', true); 
		}
  		,getRequestValue:function(ele){
  			return  ele.find("input:checked").val();
  		}
	    ,getRequestText:function(ele){
		    return  ele.find("input:checked").attr("title");
		}
  })

在这里插入图片描述

3.新增辅助接口：afterOpen, instance.getRowDivs(fieldName)，instance.getVal(fieldName)
afterOpen是在用户点击查询按钮弹出查询条件窗口后的回调函数。比如实现下拉框级联可以用到。
其实也可以不定义afterOpen，用下面的方法代替。
instance.getRowDivs(fieldName)和instance.getVal(fieldName) 看图：
在这里插入图片描述

function dynamicConditionQuery(){
	dynamicCondition.getInstance().open();
	//直接在这里写下拉框级联相关逻辑和定义afterOpen回调函数效果是一样的。
}

高级查询组件dynamicCondition升级为v2.0.0版本（二）

猜你喜欢