效果预览：
1.省份和城市可以实现联动效果。
2.可以自定义查询条件编辑器。如下拉树，单选按钮组。
新版本特性：
1.新增ops和allowDel属性
2.支持扩展编辑器。可以实现下拉框级联，下拉树，单选组等ui控件。
3.新增辅助接口：instance.getRowDivs(fieldName)，instance.getVal(fieldName),afterOpen
具体使用后面介绍。
首先介绍下查询组件一般使用步骤吧。
第一步，首先引入相关的js和css文件。
<link href="/static/layui/css/layui.css" />
<script src="/static/layui/layui.js"></script>
js中模块按需加载组件：
layui.config({
base: '/static/layui-extend/' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
}).extend({
dynamicCondition: 'dynamicCondition/dynamicCondition',
}).use(['table','form','dynamicCondition'], function(){
//这里写你的业务代码
}）
文件存放路径：
第二步，编辑html页面。
<div id="msg" style="margin-top:10px;margin-left:10px;">查询条件：</div>
<ul id="dynamicCondition" style="display:none;">
<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>
</ul>
<script type="text/html" id="toolbarBts">
<div>
<a class="layui-btn layui-btn-xs" onclick="dynamicConditionSave()" #(printStyle(session,"/demo/dynamicCondition/save"))>新增</a>
<a class="layui-btn layui-btn-xs" onclick="dynamicConditionQuery()" #(printStyle(session,"/demo/dynamicCondition/list"))>查询</a>
</div>
</script>
<table class="layui-hide" id="listTable" lay-filter="listMainTable"></table>
第三步，编辑js页面。
1.组件自带查询条件编辑器有text（文本输入框），select（下拉框），date（日期输入框）。
如果要扩展编辑器，则先定义扩展编辑器。具体定义方法后面会讲。点击查看编辑器扩展。
2.创建一个查询组件实例。
var dc = dynamicCondition.create({
//通过容器选择器传入，也可以$("#dynamicCondition"),或者document.getElementById("dynamicCondition")
elem:"#dynamicCondition" //对应第二步中ul标签的id
,tableId:"listTableId" //tableId对应table.render(config)的config.id参数.
,conditionTextId:"#msg" //对应第二步中查询条件容器div的id
//,instanceName:"twoInstance" //单实例不配置，一个页面多个实例时配置。
});
3.设置初始查询条件。如果没有，可以跳过这一步。
dc.setCondition([["DynamicCondition.province",null,""],["DynamicCondition.city",null,""]
,["DynamicCondition.goodsClassifyId",null,""],["DynamicCondition.name","like","张三"]
,["DynamicCondition.sex",null,{value:1,text:"男"}]
,["DynamicCondition.birthday","between","2018-01-01","2018-12-31"]
,["DynamicCondition.logicDel",null,{value:'N',text:"是"}]
]);
设置初始条件的参数是一个二维数组。[“DynamicCondition.province”,null,""]
第一个参数：对应查询条件的li里的field属性值。
第二个参数：取值范围：equal，like,between,start,end,unequal,empty 或者为null（如果为null则等价equal）
第三个参数：可以是字符串或者带value和text属性的对象，如{value:1,text:“男”}。表示对应条件的值。
第四个参数：这个只有当第二个参数是between，才有效。
4.渲染表格。和以前的渲染基本一样，不同点在where的设置。
当有初始条件时，通过dc.buildRequestData()可以设置查询条件。
table.render({
elem: '#listTable'
,url:'/#(appName)/demo/dynamicCondition/list'
,method:"post"
,where: dc.buildRequestData()
,sortType:'server'
,height: tableDivHeight
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,toolbar: '#toolbarBts'
,cols: [[
{field:'layui_seq', title: '序号',width:80,align:'center' }
,{field:'id', title: 'id',sort:true}
,{field:'name', title: '姓名',sort:true}
,{field:'sex', title: '性别',sort:true,templet: '<div>{{ getDictLabel("dict-sex", d.sex) }}</div>'}
,{field:'birthday', title: '生日',sort:true}
,{field:'phone', title: '手机号码',sort:true}
,{field:'email', title: '邮箱',sort:true}
,{field:'province', title: '省份',sort:true}
,{field:'city', title: '城市',sort:true}
,{field:'goodsClassifyName', title: '商品分类',sort:true}
,{field:'logicDel', title: '有效',width:80,templet: '#logicDelTpl',sort:true}
,{fixed: 'right', width:178, align:'center', toolbar: '#barBtns',title: '操作'} //单元格内容水平居中
]]
,id: 'listTableId'
,page: true
,limit:#(pageSize)
});
5.点击查询按钮弹出窗口。
function dynamicConditionQuery(){
dynamicCondition.getInstance().open();
}
由于dc是局部变量，所以用dynamicCondition.getInstance()代替。
当有多个实例时，可以dynamicCondition.getInstance(instanceName)获取实例。
整个组件运行流程大概就是上面这样。下一章介绍如何使用这些新特性。
相关链接：
插件源码：去码云下载 或者 去layui官网下载
体验地址1：动态添加条件查询Demo
体验地址2：带后台的查询demo
基于layui的动态添加条件查询ui插件
高级查询组件dynamicCondition升级为v2.0.0版本（二）
高级查询组件下拉框联动（三）