最新版本下載

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

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

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

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

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

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

日期：2018-12-06
版本：v2.0.0
1.支持擴展編輯器?？梢詫崿F(xiàn)下拉框級聯(lián)，下拉樹，單選組等ui控件。 
2.ops，allowDel，最大化最小化等支持。

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

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

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

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

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


使用方法：
和table結(jié)合起來使用非常簡單。只要配置tableId參數(shù)就能實現(xià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="手機號碼" 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è)定擴展的Layui模塊的所在目錄，一般用于外部模塊擴展
}).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({
  		//通過容器選擇器傳入，也可以$("#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: '序號',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} 
      ,{fixed: 'right', width:178, align:'center', toolbar: '#barBtns',title: '操作'} //單元格內(nèi)容水平居中
    ]]
  	,id: 'listTableId'
  	,page: true
  });

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



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