1. 程式人生 > >高階查詢元件dynamicCondition升級為v2.0.0版本(二)

高階查詢元件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回撥函式效果是一樣的。
}

相關連結:
外掛原始碼:去碼雲下載 或者 去layui官網下載
體驗地址1:動態新增條件查詢Demo
體驗地址2:帶後臺的查詢demo
基於layui的動態新增條件查詢ui外掛
高階查詢元件dynamicCondition升級為v2.0.0版本(一)
高階查詢元件下拉框聯動(三)