layui 第三方组件平台

返回首页 发布组件

查询条件可以根据需要动态添加。 条件可以选择等于,包含,范围,不等于,开头字符,结尾字符,为空等。 根据需要添加对应的查询条件对table数据进行过滤。

文档

日期:2019-01-04
版本:v2.0.2
1.新增查询条件无弹窗模式。
不用弹窗窗口填写查询条件,与传统UI类似,直接在界面上填写查询条件。
2.新增requestDataType配置。
对PHP更友好,之前复杂查询请求数据格式是方便java后台获取数据,用的数组模式。
可以通过配置requestDataType,使用json字符串提交请求数据,方便PHP后台接收。
版本向前兼容。高版本可以直接替换低版本对之前的代码没有任何影响。
版本说明: dynamicCondition组件升级为2.0.2版本
按查询条件是否弹窗分为:弹窗/无弹窗 模式
按查询条件是否复杂分为:简单/复杂 模式
各模式优点:
1.简单模式:传统查询可以在不改后台代码情况下替换成简单模式。
2.复杂模式:条件可以选择等于,包含,范围,不等于,开头字符,结尾字符,为空等。有些查询必须要求这些功能。
3.弹窗模式:同时需要的查询条件比较多时,一行显示不全会导致界面不好看。这时可以考虑使用弹窗模式。
4.无弹窗模式:提供的查询条件较多,但每次查询只需选择1-3个条件时,考虑使用无弹窗模式。

具体使用组合就有四种模式。可以选择合适的使用。他们互相切换起来也比较简单。
1.简单/无弹窗模式:该模式与传统的查询条件UI最接近。可以在不改后台代码情况下替换成改模式。
2.复杂/无弹窗模式:个人比较推荐使用该模式。需要后台编写相应逻辑配合使用。
3.复杂/弹窗模式:查询条件超过3个时,推荐使用。条件太多导致界面很难看,通过弹窗模式可以让界面更精简。
4.简单/弹窗模式:查询条件超过5个时,推荐使用。条件太多导致界面很难看,通过弹窗模式可以让界面更精简。
日期:2018-12-06
版本:v2.0.0
1.支持扩展编辑器。可以实现下拉框级联,下拉树,单选组等ui控件。
2.ops,allowDel,最大化最小化等支持。
高级查询组件dynamicCondition升级为v2.0.0版本(一)
高级查询组件dynamicCondition升级为v2.0.0版本(二)
高级查询组件下拉框联动(三)
效果预览:
1.省份和城市可以实现联动效果。
2.可以自定义查询条件编辑器。如下拉树,单选按钮组。

日期:2018-11-21
版本:v1.0.5
优化查询条件界面ui
日期:2018-11-20
版本:v1.0.5
新增功能:查询条件加一个“x”,点击后删除一个条件刷新一下页面
日期:2018-11-14
版本:v1.0.4
dynamicCondition插件升级版本1.0.4
1.新增初始条件设置功能。
2.优化查询条件显示。
3.支持下拉框范围查询
4.可以设置show属性为false,隐藏动态条件字段
5.优化下拉框编辑器。templet可以是select元素Id。
例#sex对应的可以是<select id="sex">
不一定非得用script包裹起来。
动态添加条件界面


使用方法:
和table结合起来使用非常简单。只要配置tableId参数就能实现点击查询后刷新table数据。
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/' //设定扩展的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 //全局定义常规单元格的最小宽度,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: '操作'} //单元格内容水平居中
]]
,id: 'listTableId'
,page: true
});
关键2个地方需要配置:
1. dynamicCondition.create传入配置参数tableId需要与table.render里的id属性对应。
2.调用dc.setCondition方法设置初始条件。dc.setCondition参数说明:[item1,item2,item3 ...]
dc.setCondition是一个数组,里面的元素item1也是数组。item1元素的值与复杂查询模式列对应的值一致。参考例子很容易理解。
3.table.render里配置where: dynamicCondition.getInstance().buildRequestData (),可以设置初始条件。



使用文档参考: 基于layui的动态添加条件查询ui插件
体验地址1:动态添加条件查询Demo
体验地址2:带后台的查询demo