版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaozaq/article/details/83662679
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": "[email protected]"
}
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使用说明参考：扩展编辑器