layuiExtend

项目介绍

最近做一个档案系统，发现字段超多，查询页面布局不是很好弄，于是就想着干脆写一个动态添加条件的ui插件。

因为是用的layui框架写的系统，所以就直接基于layui编写了个插件。写篇文章总结介绍下这个插件。
使用简单，可以不用学习layui，只要把相关js引入了，也可以在项目中单独使用。
插件源码：去码云下载或者去layui官网下载
体验地址1：动态添加条件查询Demo
体验地址2：带后台的查询demo
高级查询组件dynamicCondition升级为v2.0.0版本（一）
高级查询组件dynamicCondition升级为v2.0.0版本（二）
高级查询组件下拉框联动（三）

日期：2018-12-06
版本：v2.0.0
1.支持扩展编辑器。可以实现下拉框级联，下拉树，单选组等ui控件。
2.ops，allowDel，最大化最小化等支持。

效果预览：
1.省份和城市可以实现联动效果。
2.可以自定义查询条件编辑器。如下拉树，单选按钮组。

日期：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包裹起来。

动态添加条件界面

点击查询生成请求json对象requestData

demo界面

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"><title>动态条件插件demo</title><link  href="../../static/layui/css/layui.css" media="all" rel="stylesheet"><script src="../../static/layui/layui.js"></script><style></style></head><body ><div id="simple-query" style="margin-left:50px;margin-top:20px;"><a class="layui-btn " onclick="simpleQuery()"  >简单查询</a><br/><br/><div id="msg">查询条件：</div>       <br/><div>请求参数json：</div>      <div id="result1" style="word-break:break-all;height:60px;width:500px;padding-left:50px;"></div></div><div id="complex-query" style="margin-left:50px;margin-top:20px;"><a class="layui-btn " onclick="complexQuery()"  >复杂查询</a><br/><br/><div id="msg2">查询条件：</div><br/><div>请求参数json：</div> <div id="result2" style="word-break:break-all;height:60px;width:500px;padding-left:50px;"></div>      </div><ul id="dcDemo" style="display:none;"><li field="id" title="id" edit="text" layVerify="number"></li><li field="name" title="姓名" edit="text"></li><li field="sex" title="性别" edit="select" templet="#selectSex"></li><li field="birthday" title="出生日期" edit="date"></li><li field="phone" title="手机号码" edit="text" layVerify="phone"></li><li field="email" title="邮箱" edit="text" layVerify="email"></li></ul><script type="text/html" id="selectSex"><select><option value=""></option><option value="1">男</option><option value="0">女</option></select></script><script type="text/javascript">
//声明一个全局变量dynamicCondition
var dynamicCondition;
layui.config({base: '../../static/layui-extend/' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
}).extend({dynamicCondition: 'dynamicCondition/dynamicCondition'
}).use(['table','form','dynamicCondition'], function(){var $=layui.$, table = layui.table, form = layui.table;dynamicCondition = layui.dynamicCondition;var dataFields = [{field:"id",title:"id",edit:"text",layVerify:"number"},{field:"name",title:"姓名",edit:"text"},{field:"sex",title:"性别",edit:"select", templet:"#selectSex"},{field:"birthday",title:"出生日期",edit:"date"},{field:"phone",title:"手机号码",edit:"text",layVerify:"phone"},{field:"email",title:"邮箱",layVerify:"email"}];//初始化动态条件查询实例var dcInstance = dynamicCondition.create({fields : dataFields //通过json对象传入//,tableId:"listTable"  //静态页面不好演示table数据表格更新,type:"simple"  //type:"simple"/"complex",conditionTextId:"#msg",queryCallBack:function(requestData){$("#result1").html(JSON.stringify(requestData));}});dynamicCondition.create({elem:"#dcDemo" //通过容器选择器传入，也可以$("#dcDemo"),或者document.getElementById("dcDemo")//,tableId:"listTable" //静态页面不好演示table数据表格更新,type:"complex"  //type:"simple"/"complex",conditionTextId:"#msg2"//当有多个动态条件查询实例时，定义instanceName属性可以通过dynamicCondition.getInstance(instanceName)获取对应的实例,instanceName:  "complexInstance"  ,queryCallBack:function(requestData){$("#result2").html(JSON.stringify(requestData));}});});
/**简单查询*/
function simpleQuery(){dynamicCondition.getInstance().open();
}
/**复杂查询*/
function complexQuery(){dynamicCondition.getInstance("complexInstance").open();
}
</script></body>
</html>

数据字典

dynamicCondition对象api

|成员|类型|说明|示例
|–|–|–|–|–|
|version |String |插件版本号 | 1.0.1 |
|cacheInstance |Object |缓存create方法创建的实例。见备注 | {} |
|getInstance |function |从cacheInstance中获取实例 | getInstance() |
|create |function |创建实例成功后会返回并缓存到cacheInstance。| create(config) |

备注：
getInstance()等价于getInstance(‘instanceName’)
缓存实例：cacheInstance[config.instanceName] = create(config)

dynamicCondition.create(config)中的config配置项说明

参数	类型	必须项	默认	说明
elem	String/Jq/DOM	否		例: “#dcDemo”，或者 $(“#dcDemo”),或者document.getElementById(“dcDemo”)
fields	Object	否		参考下面备注fields例子。
fieldsJsonStr	String	否		就是fields转换为字符串格式输入。
type	String	否	complex	取值：‘simple’/‘complex’.默认为复杂模式。
instanceName	String	否	instanceName	当一个页面只创建一个实例时，可以不用配置该参数。
queryCallBack	function	否		点击查询的回调函数，会传入一个requestData参数进去。参数格式见备注
tableId	String	否		对应table.render(config)的config.id参数。点击查询后会根据查询条件自动重载表格。
conditionTextId	String/Jq/DOM	否		例: “#msg”，或者 $(“#msg”),或者document.getElementById(“msg”)
sortObj	Object	否		结合tableId使用排序。例子：{field:‘name’,type:‘desc’}
requestDataType	String	否	array	2.0.1版本新增。取值：'array '/‘json’
displayModel	String	否	popup	2.0.2版本新增。取值：'popup '/'unpopup ’

备注：
elem/fields/fieldsJsonStr 三个中必须选一个配置。
elem例子：

<ul id="dcDemo" style="display:none;"><li field="id" title="id" edit="text" layVerify="number"></li><li field="name" title="姓名" edit="text"></li><li field="sex" title="性别" edit="select" templet="#selectSex"></li><li field="birthday" title="出生日期" edit="date"></li><li field="phone" title="手机号码" edit="text" layVerify="phone"></li><li field="email" title="邮箱" edit="text" layVerify="email"></li></ul>

fields例子：

var dataFields = [{field:"id",title:"id",edit:"text",layVerify:"number"},{field:"name",title:"姓名",edit:"text"},{field:"sex",title:"性别",edit:"select", templet:"#selectSex"},{field:"birthday",title:"出生日期",edit:"date"},{field:"phone",title:"手机号码",edit:"text",layVerify:"phone"},{field:"email",title:"邮箱",layVerify:"email"}];

layVerify属性类似lay-verify。点击查询时会自动校验。校验不通过则点击不了查询。

edit的取值：text/select/date 。暂时只支持这3种类型。

text表示文本输入编辑器。
select表示下拉框编辑器。必须配置templet。可以使用对应的模板生成下拉框。
date表示日期编辑器。

type的取值：‘simple’/'complex’区别：

显示界面不一样。simple模式少了中间的操作列。
构造的requestData格式不一样。

simple模式构造的requestData例子：

{"name":"张三","sex":"1","birthday":"2018-11-02"}

complex模式构造的requestData例子：

{"rowLength": 5,"QueryCondition[0].conditionField": "name","QueryCondition[0].conditionOption": "like","QueryCondition[0].conditionValue": "","QueryCondition[1].conditionField": "sex","QueryCondition[1].conditionOption": "equal","QueryCondition[1].conditionValue": "1","QueryCondition[2].conditionField": "birthday","QueryCondition[2].conditionOption": "between","QueryCondition[2].conditionValueLeft": "2010-11-01","QueryCondition[2].conditionValueRight": "2018-11-01","QueryCondition[3].conditionField": "phone","QueryCondition[3].conditionOption": "start","QueryCondition[3].conditionValue": "18800008888","QueryCondition[4].conditionField": "email","QueryCondition[4].conditionOption": "end","QueryCondition[4].conditionValue": "1@qq.com"
}

queryCallBack和tableId一般二选一配置一个。
如果是使用layui的table表格查询，那只要配置一下tableId，就能实现查询后自动重载表格数据了。
conditionTextId 如果配置了该选项，则点击查询后生成查询条件的文本描述，会自动填充到对应的容器里展示给用户查看。

dynamicCondition创建的实例对象。

成员	类型	说明	示例
open	function	弹出动态添加查询条件界面	open()
setDisplayModel	function	2.0.2版本新增。设置显示模式：弹窗/无弹窗。取值：popup/unpopup. 默认popup	setDisplayModel(‘unpopup’)
setCondition	function	设置初始条件	setCondition([[‘name’,null,‘’],[‘sex’,null,‘1’]])
getRowDivs	function	根据字段名称获取行div，返回一个dom类型的数组	getRowDivs(conditionFieldVal)
getVal	function	根据字段名称获对应的值，如果该字段条件有多个，则只取第一行对应的值。	getVal(conditionFieldVal)
备注：其他内部成员以后有时间在详细介绍。只是使用插件的话，只要调用open方法就好了。

getRowDivs与getVal使用说明参考：扩展编辑器

基于layui的动态添加条件查询ui插件相关推荐

基于Solr的HBase多条件查询测试
背景: 某电信项目中采用HBase来存储用户终端明细数据,供前台页面即时查询.HBase无可置疑拥有其优势,但其本身只对rowkey支持毫秒级的快速检索,对于多字段的组合查询却无能为力.针对HBase ...
php动态添加查询,php动态添加url查询参数的方法，php动态url参数_PHP教程
php动态添加url查询参数的方法,php动态url参数本文实例讲述了php动态添加url查询参数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以动态为url添加key-value查询参数 ...
layui option 动态添加_layui select动态添加option的实例
html 产品类别轻松融容易融快乐融增加产品类别 js //重新渲染表单 function renderForm(){ layui.use('form', function(){ var fo ...
layui option 动态添加_layuiselect如何动态添加option
这次给大家带来layui select如何动态添加option,layui select动态添加option的注意事项有哪些,下面就是实战案例,一起来看一下. html 产品类别轻松融容易融快乐 ...
JPA - @Where注解 - 添加条件查询
目录前言具体实现前言这里介绍@Where注解给Entity统一添加条件查询. 具体实现 Product.java @Entity @Getter @Setter @Where(clause = ...
Layui 数据表格多条件查询与后端交互
这里记录下layui数据表格多个查询条件数据提交查询,数据库返回对应数据,数据库使用第三方模块flask_sqlalchemy, 需要对flask及flask_sqlalchemy有一定的了解一.h ...
Entity Framework4.1实现动态多条件查询、分页和排序
EF通用的分页实现: /// <summary> /// 根据条件分页获得记录 /// </summary> /// <param name="where&qu ...
layui option 动态添加_layui中select的change事件、动态追加option
说明:layui中用jquery 中的选择器例如$('#id').change(function(){})发现不起作用 layui操作:lay-felter标识操作哪个select html部分: 请 ...
layui可以动态添加div吗_乳化剂是什么？可以添加到护肤品里吗？
网传含有乳化剂的护肤品会破坏皮肤组织结构.造成免疫力下降.使得皮肤敏感.具有一定的致癌性.乳化剂听了都想打人,所以今天我就要来给乳化剂正名! 乳化剂是能促使两种互不相溶的液体形成稳定乳浊液的物质,是乳 ...

基于layui的动态添加条件查询ui插件