效果預覽：
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版本（二）
高階查詢元件下拉框聯動（三）