最新版本下載

日期：2019-09-20
版本：v3.1.0
新增2個(gè)功能：1.可以自定義操作選項(xiàng)，2：查詢時(shí)，可額外附加參數(shù)，如參數(shù)數(shù)據(jù)類型。

日期：2019-04-09
版本：v3.0.0
1.新增用戶全局配置。見dynamicCondition.js同目錄下的dcConfig.js文件。
通過(guò)該文件可以修改dynamicCondition組件全局默認(rèn)配置。沒有該文件也能正常使用，這樣會(huì)使用組件默認(rèn)設(shè)定的配置。
2.將相關(guān)的css從dynamicCondition.js中分離出來(lái)，使用css文件專門管理。
3.新增操作按鈕面板?？梢苑奖愕臄U(kuò)充按鈕選項(xiàng)。

詳細(xì)文檔參考： dynamicCondition v3版本更新內(nèi)容

日期：2019-01-04
版本：v2.0.2
1.新增查詢條件無(wú)彈窗模式。
    不用彈窗窗口填寫查詢條件，與傳統(tǒng)UI類似，直接在界面上填寫查詢條件。
2.新增requestDataType配置。
    對(duì)PHP更友好，之前復(fù)雜查詢請(qǐng)求數(shù)據(jù)格式是方便java后臺(tái)獲取數(shù)據(jù)，用的數(shù)組模式。
    可以通過(guò)配置requestDataType，使用json字符串提交請(qǐng)求數(shù)據(jù)，方便PHP后臺(tái)接收。

版本向前兼容。高版本可以直接替換低版本對(duì)之前的代碼沒有任何影響。
版本說(shuō)明： dynamicCondition組件升級(jí)為2.0.2版本
按查詢條件是否彈窗分為：彈窗/無(wú)彈窗 模式
按查詢條件是否復(fù)雜分為：簡(jiǎn)單/復(fù)雜 模式
各模式優(yōu)點(diǎn)：
1.簡(jiǎn)單模式：傳統(tǒng)查詢可以在不改后臺(tái)代碼情況下替換成簡(jiǎn)單模式。
2.復(fù)雜模式：條件可以選擇等于，包含，范圍，不等于，開頭字符，結(jié)尾字符，為空等。有些查詢必須要求這些功能。
3.彈窗模式：同時(shí)需要的查詢條件比較多時(shí)，一行顯示不全會(huì)導(dǎo)致界面不好看。這時(shí)可以考慮使用彈窗模式。
4.無(wú)彈窗模式：提供的查詢條件較多，但每次查詢只需選擇1-3個(gè)條件時(shí)，考慮使用無(wú)彈窗模式。

具體使用組合就有四種模式?？梢赃x擇合適的使用。他們互相切換起來(lái)也比較簡(jiǎn)單。
1.簡(jiǎn)單/無(wú)彈窗模式：該模式與傳統(tǒng)的查詢條件UI最接近?？梢栽诓桓暮笈_(tái)代碼情況下替換成改模式。
2.復(fù)雜/無(wú)彈窗模式：個(gè)人比較推薦使用該模式。需要后臺(tái)編寫相應(yīng)邏輯配合使用。
3.復(fù)雜/彈窗模式：查詢條件超過(guò)3個(gè)時(shí)，推薦使用。條件太多導(dǎo)致界面很難看，通過(guò)彈窗模式可以讓界面更精簡(jiǎn)。
4.簡(jiǎn)單/彈窗模式：查詢條件超過(guò)5個(gè)時(shí)，推薦使用。條件太多導(dǎo)致界面很難看，通過(guò)彈窗模式可以讓界面更精簡(jiǎn)。

日期：2018-12-06
版本：v2.0.0
1.支持?jǐn)U展編輯器。可以實(shí)現(xiàn)下拉框級(jí)聯(lián)，下拉樹，單選組等ui控件。 
2.ops，allowDel，最大化最小化等支持。

高級(jí)查詢組件dynamicCondition升級(jí)為v2.0.0版本（一）
高級(jí)查詢組件dynamicCondition升級(jí)為v2.0.0版本（二）
高級(jí)查詢組件下拉框聯(lián)動(dòng)（三）
效果預(yù)覽：
1.省份和城市可以實(shí)現(xiàn)聯(lián)動(dòng)效果。
2.可以自定義查詢條件編輯器。如下拉樹，單選按鈕組。

日期：2018-11-21
版本：v1.0.5
優(yōu)化查詢條件界面ui

日期：2018-11-20
版本：v1.0.5
新增功能：查詢條件加一個(gè)“x”,點(diǎn)擊后刪除一個(gè)條件刷新一下頁(yè)面

日期：2018-11-14
版本：v1.0.4
dynamicCondition插件升級(jí)版本1.0.4
1.新增初始條件設(shè)置功能。
2.優(yōu)化查詢條件顯示。
3.支持下拉框范圍查詢
4.可以設(shè)置show屬性為false，隱藏動(dòng)態(tài)條件字段
5.優(yōu)化下拉框編輯器。templet可以是select元素Id。
	例#sex對(duì)應(yīng)的可以是<select id="sex">
	不一定非得用script包裹起來(lái)。

動(dòng)態(tài)添加條件界面


使用方法：
和table結(jié)合起來(lái)使用非常簡(jiǎn)單。只要配置tableId參數(shù)就能實(shí)現(xiàn)點(diǎn)擊查詢后刷新table數(shù)據(jù)。
html：

<div id="msg" style="margin-top:10px;margin-left:10px;">查詢條件：</div>	
   <ul id="dynamicCondition" style="display:none;">
	<li field="Layuiex.id" title="id" edit="text" layVerify="number"></li>
	<li field="Layuiex.name" title="姓名" edit="text" layVerify=""></li>
	<li field="Layuiex.sex" title="性別" edit="select" layVerify="number" templet="#dict-sex"></li>
	<li field="Layuiex.birthday" title="生日" edit="date" layVerify=""></li>
	<li field="Layuiex.phone" title="手機(jī)號(hào)碼" edit="text" layVerify=""></li>
	<li field="Layuiex.email" title="郵箱" edit="text" layVerify=""></li>
</ul>
<script type="text/html" id="toolbarBts">
	 <div>
	 	<a class="layui-btn layui-btn-xs" onclick="layuiexSave()" #(printStyle(session,"/admin/layuiex/save"))>新增</a>
	 	<a class="layui-btn layui-btn-xs" onclick="layuiexQuery()" #(printStyle(session,"/admin/layuiex/list"))>查詢</a>
	 </div>
</script>
<table class="layui-hide" id="listTable" lay-filter="listMainTable"></table>

js：

layui.config({
  base: '../../../layui_exts/' //設(shè)定擴(kuò)展的Layui模塊的所在目錄，一般用于外部模塊擴(kuò)展
}).extend({
	dynamicCondition: 'dynamicCondition/dynamicCondition'
}).use(['table','form','dynamicCondition'], function(){
	var $=layui.$, table = layui.table, form = layui.table;
	var dynamicCondition = layui.dynamicCondition;
	var dc = dynamicCondition.create({
  		//通過(guò)容器選擇器傳入，也可以$("#dynamicCondition"),或者document.getElementById("dynamicCondition")
  		elem:"#dynamicCondition" 
	  	,tableId:"listTableId" 
		,conditionTextId:"#msg"
	});
  	dc.setCondition([["Layuiex.name","like","張三"],["Layuiex.sex",null,"1"],["Layuiex.birthday","between","2018-01-01","2018-12-31"]]);
	var tableDivHeight = 'full-'+ ($("#noTableDiv").height()+ 10);
  table.render({
    elem: '#listTable'
    ,url:'/xpl/admin/layuiex/list'
    ,method:"post"
    ,where: dynamicCondition.getInstance().buildRequestData ()
    ,sortType:'server'
    ,height: tableDivHeight
    ,cellMinWidth: 80 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增
    ,toolbar: '#toolbarBts'
    ,cols: [[
       {field:'layui_seq', title: '序號(hào)',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: '手機(jī)號(hào)碼',sort:true} 
    	   ,{field:'email', title: '郵箱',sort:true} 
      ,{fixed: 'right', width:178, align:'center', toolbar: '#barBtns',title: '操作'} //單元格內(nèi)容水平居中
    ]]
  	,id: 'listTableId'
  	,page: true
  });

關(guān)鍵2個(gè)地方需要配置：
1. dynamicCondition.create傳入配置參數(shù)tableId需要與table.render里的id屬性對(duì)應(yīng)。
2.調(diào)用dc.setCondition方法設(shè)置初始條件。dc.setCondition參數(shù)說(shuō)明：[item1,item2,item3 ...]
dc.setCondition是一個(gè)數(shù)組，里面的元素item1也是數(shù)組。item1元素的值與復(fù)雜查詢模式列對(duì)應(yīng)的值一致。參考例子很容易理解。
3.table.render里配置where: dynamicCondition.getInstance().buildRequestData ()，可以設(shè)置初始條件。



使用文檔參考： 基于layui的動(dòng)態(tài)添加條件查詢ui插件
體驗(yàn)地址1：動(dòng)態(tài)添加條件查詢Demo
體驗(yàn)地址2：帶后臺(tái)的查詢demo