高级查询组件dynamicCondition升级为v2.0.0版本(一)——使用步骤

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaozaq/article/details/84872222

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

新版本特性:
1.新增ops和allowDel属性
2.支持扩展编辑器。可以实现下拉框级联,下拉树,单选组等ui控件。
3.新增辅助接口:instance.getRowDivs(fieldName),instance.getVal(fieldName),afterOpen
具体使用后面介绍。
首先介绍下查询组件一般使用步骤吧。

第一步,首先引入相关的js和css文件。

<link  href="/static/layui/css/layui.css" />
<script src="/static/layui/layui.js"></script>

js中模块按需加载组件:

layui.config({
  base: '/static/layui-extend/' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
}).extend({
	dynamicCondition: 'dynamicCondition/dynamicCondition',
}).use(['table','form','dynamicCondition'], function(){
	//这里写你的业务代码
})

文件存放路径:
在这里插入图片描述

第二步,编辑html页面。

<div id="msg" style="margin-top:10px;margin-left:10px;">查询条件:</div>	
   <ul id="dynamicCondition" style="display:none;">
	<li field="DynamicCondition.name" title="姓名" ops="equal,like,end" edit="text" layVerify=""></li>
	<li field="DynamicCondition.sex" title="性别" edit="select" layVerify="number" templet="#dict-sex"></li>
	<li field="DynamicCondition.birthday" title="生日" edit="date" layVerify=""></li>
	<li field="DynamicCondition.phone" title="手机号码" edit="text" layVerify=""></li>
</ul>
<script type="text/html" id="toolbarBts">
	 <div>
	 	<a class="layui-btn layui-btn-xs" onclick="dynamicConditionSave()" #(printStyle(session,"/demo/dynamicCondition/save"))>新增</a>
	 	<a class="layui-btn layui-btn-xs" onclick="dynamicConditionQuery()" #(printStyle(session,"/demo/dynamicCondition/list"))>查询</a>
	 </div>
</script>
<table class="layui-hide" id="listTable" lay-filter="listMainTable"></table>

第三步,编辑js页面。
1.组件自带查询条件编辑器有text(文本输入框),select(下拉框),date(日期输入框)。
如果要扩展编辑器,则先定义扩展编辑器。具体定义方法后面会讲。点击查看编辑器扩展。
2.创建一个查询组件实例。

var dc = dynamicCondition.create({
  		//通过容器选择器传入,也可以$("#dynamicCondition"),或者document.getElementById("dynamicCondition")
  		elem:"#dynamicCondition"  //对应第二步中ul标签的id
	  	,tableId:"listTableId"  //tableId对应table.render(config)的config.id参数.
		,conditionTextId:"#msg" //对应第二步中查询条件容器div的id
		//,instanceName:"twoInstance" //单实例不配置,一个页面多个实例时配置。
	});

3.设置初始查询条件。如果没有,可以跳过这一步。

dc.setCondition([["DynamicCondition.province",null,""],["DynamicCondition.city",null,""]
		  ,["DynamicCondition.goodsClassifyId",null,""],["DynamicCondition.name","like","张三"]
		 ,["DynamicCondition.sex",null,{value:1,text:"男"}]
		 ,["DynamicCondition.birthday","between","2018-01-01","2018-12-31"]
		,["DynamicCondition.logicDel",null,{value:'N',text:"是"}]  
  ]);

设置初始条件的参数是一个二维数组。[“DynamicCondition.province”,null,""]
第一个参数:对应查询条件的li里的field属性值。
第二个参数:取值范围:equal,like,between,start,end,unequal,empty 或者为null(如果为null则等价equal)
第三个参数:可以是字符串或者带value和text属性的对象,如{value:1,text:“男”}。表示对应条件的值。
第四个参数:这个只有当第二个参数是between,才有效。
4.渲染表格。和以前的渲染基本一样,不同点在where的设置。
当有初始条件时,通过dc.buildRequestData()可以设置查询条件。

table.render({
    elem: '#listTable'
    ,url:'/#(appName)/demo/dynamicCondition/list'
    ,method:"post"
    ,where: dc.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} 
    	   ,{field:'province',  title: '省份',sort:true} 
    	   ,{field:'city',  title: '城市',sort:true} 
    	   ,{field:'goodsClassifyName',  title: '商品分类',sort:true} 
    	   ,{field:'logicDel', title: '有效',width:80,templet: '#logicDelTpl',sort:true} 
      ,{fixed: 'right', width:178, align:'center', toolbar: '#barBtns',title: '操作'} //单元格内容水平居中
    ]]
  	,id: 'listTableId'
  	,page: true
  	,limit:#(pageSize)
  });

5.点击查询按钮弹出窗口。

function dynamicConditionQuery(){
	dynamicCondition.getInstance().open();
}

由于dc是局部变量,所以用dynamicCondition.getInstance()代替。
当有多个实例时,可以dynamicCondition.getInstance(instanceName)获取实例。
整个组件运行流程大概就是上面这样。下一章介绍如何使用这些新特性。

相关链接:
插件源码:去码云下载 或者 去layui官网下载
体验地址1:动态添加条件查询Demo
体验地址2:带后台的查询demo
基于layui的动态添加条件查询ui插件
高级查询组件dynamicCondition升级为v2.0.0版本(二)
高级查询组件下拉框联动(三)

展开阅读全文

没有更多推荐了,返回首页