新版本特性:
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版本(一)
高级查询组件下拉框联动(三)