高階查詢元件dynamicCondition升級為v2.0.0版本(二)
阿新 • • 發佈:2018-12-07
新版本特性:
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版本(一)
高階查詢元件下拉框聯動(三)