前端按条件分组查询 展示列动态变化

最新推荐文章于 2024-05-17 02:59:49 发布
最新推荐文章于 2024-05-17 02:59:49 发布
阅读量349 收藏
点赞数
分类专栏： html 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FYW_1121/article/details/128673569
版权
  • 查询条件
<#form:form id="searchForm" model="${timesheetentrydetail}" action="${ctx}/produce/timesheetreport/wageFormListDateNewAll" method="post" class="form-inline hide"
					data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
			<div class="form-group">
				<label class="control-label">${text('汇总来源')}：</label>
				<div class="control-inline width-120">
					<#form:select path="fcountsource" dictType="fcountsource" class="form-control"/>
				</div>
			</div>
			<div class="form-group">
                <label class="control-label">${text('日期')}：</label>
                <div class="control-inline">
                    <#form:input path="startTime" readOnly="true" maxlength="20" class="form-control Wdate-date"
                    dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,onpicked:function(){endTime.click()}});"/>
                    &nbsp;--&nbsp;
                    <#form:input path="endTime" readOnly="true" maxlength="20" class="form-control Wdate-date"
                    dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
                </div>
            </div>
				<div class="form-group">
					<label class="control-label">${text('部门')}：</label>
					<div class="control-inline">
							<#form:treeselect id="fdeptid"  maxlength="50"  class="form-control width-120" title="${text('机构选择')}" path="fdeptid.officeCode" labelPath="fdeptid.officeName" 
							checkbox="true" url="${ctx}/sys/office/treeData" allowClear="true" allowInput="true"/>
						</div>
				</div>
				<div class="form-group">
					<label class="control-label">${text('人员')}：</label>
					<div class="control-inline">
                         <div class="input-group">
							<#form:input path="fname" maxlength="50" class="form-control width-120" style="background-color: #fff" readonly="true" onclick="empSelect()"/>
                        	<span class="input-group-btn"><a href="javascript:empSelect()" class ="btn btn-default btn-sm" ><i class="fa fa-search"></i></a></span>
                        </div>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label">${text('汇总条件')}：</label>
						<#form:checkbox  path="summaryConditions" dictType="timesheetentrydetail_summary_conditions"  class="form-control" />
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
					<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
				</div>
			</#form:form>
  • 展示列
$('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	//lazyLoad: true, //懒加载
	columnModel: [
		{header:'${text("开始时间")}', name:'startTime', index:'a.StartTime', width:120, align:"center" ,   formatter: function(val, obj, row, act){
			if(val){
				return js.formatDate(js.parseDate(val),'yyyy-MM-dd');
			}else{
				return '合计';
			}
		}},
		{header:'${text("结束时间")}', name:'endTime', index:'a.EndTime', width:120, align:"center",   formatter: function(val, obj, row, act){
				if(val){
					return js.formatDate(js.parseDate(val),'yyyy-MM-dd');
				}else{
					return '-';
				}
		}},
		{header:'${text("部门")}', name:'fdeptid.officeName', index:'a.fdeptid', width:120, align:"center"},
		{header:'${text("人员编码")}', name:'fcode', index:'a.fcode', width:130 ,hidden:true, align:"center"},
		{header:'${text("人员")}', name:'fname', index:'a.fname', width:130 ,hidden:true, align:"center"},
		{header:'${text("工资")}', name:'wage', index:'a.wage', width:120, align:"center",  formatter: function(val, obj, row, act){
			return js.formatNumber(val, 2, false, ''); // 数值类型格式化 (原始数值, 小数位数, 是否千分位, 默认值，金额情况下设置0.00);
		}}
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){
	/* 	$('#dataGrid').dataGrid('mergeCell', 'fbillno');
		$('#dataGrid').dataGrid('mergeCell', 'fschedulingid.fbillno'); */
		  query();
	}
});
  • 控制展示哪些列
function query(){
	$("input[name='summaryConditions']:checkbox").each(function(){
            if((this).value==1) {
            	if((this).checked) {
            		$('#dataGrid').setGridParam().showCol("fname").trigger("reloadGrid");
					$('#dataGrid').setGridParam().showCol("fcode").trigger("reloadGrid");
					$('#dataGrid').setGridParam().showCol("fdeptid.officeName").trigger("reloadGrid");
            	}else {
            		$('#dataGrid').setGridParam().hideCol("fname").trigger("reloadGrid");
					$('#dataGrid').setGridParam().hideCol("fcode").trigger("reloadGrid");
					$('#dataGrid').setGridParam().hideCol("fdeptid.officeName").trigger("reloadGrid");
            	}
            }else if((this).value==2){
				if((this).checked) {
					$('#dataGrid').setGridParam().showCol("fdeptid.officeName").trigger("reloadGrid");
				}else {
					$('#dataGrid').setGridParam().hideCol("fdeptid.officeName").trigger("reloadGrid");
				}
			}
	})
}
  • 脚本写法
WITH AA AS (
		/*零活工资*/
		SELECT
			#{startTime} AS startTime,
			#{endTime} AS endTime,
			O.OFFICE_CODE AS FDEPTID,
			O.OFFICE_NAME AS OFFICENAME,
			E.fcode,
			E.fname,
			NVL(detail.fwage,0) AS wage

		FROM
			yg_pr_timesheetreport a
		LEFT JOIN YG_PR_TIMESHEETENTRYDETAIL detail ON detail.fparentid = a.id
		LEFT JOIN YG_BS_EMPLOYEE E ON detail.fempid = E.id
		left join JS_SYS_OFFICE O on O.OFFICE_CODE =e.fdepartmentid
		WHERE a.status = 3
			and a.fsrcinterid = 0
			<if test="startTime !=null">
				and trunc(a.fdate) &gt;= #{startTime}
			</if>
			<if test="endTime !=null">
				and trunc(a.fdate) &lt;= #{endTime}
			</if>
		<if test='fcountsource != null and fcountsource !="" and fcountsource =="2"'>
		/*结卡工资*/
		UNION ALL
		SELECT
			#{startTime} AS startTime,
			#{endTime} AS endTime,
			TM.FDEPTID,
			O.OFFICE_NAME AS OFFICENAME,
			PE.fcode,
			PE.FNAME,
			NVL( TE.FJKWAGE, 0 ) AS WAGE
		FROM
			YG_PR_TIMESHEET TM
		LEFT JOIN YG_PR_TIMESHEETREPORT T ON TM.ID = T.FSRCINTERID
		INNER JOIN YG_PR_TIMESHEETENTRYDETAIL TE ON T.ID = TE.FPARENTID
		LEFT JOIN JS_SYS_OFFICE O ON O.OFFICE_CODE = TM.FDEPTID
		LEFT JOIN YG_BS_EMPLOYEE PE ON PE.ID = TE.FEMPID
		/*left join JS_SYS_OFFICE O on O.OFFICE_CODE =Pe.fdepartmentid*/
		WHERE
			TM.ftimesheettype IN ( '1026', '1028' )
			AND TM.STATUS = 5
			<if test="startTime !=null">
				and TRUNC(TM.update_date) &gt;= #{startTime}
			</if>
			<if test="endTime !=null">
				and TRUNC(TM.update_date) &lt;= #{endTime}
			</if>
		</if>
		<if test='fcountsource != null and fcountsource !="" and fcountsource =="1"'>
		/*汇报工资*/
		    UNION ALL
		SELECT
			#{startTime} AS startTime,
			#{endTime} AS endTime,
			TM.FDEPTID,
			O.OFFICE_NAME AS OFFICENAME,
			PE.fcode,
			PE.FNAME,
			/*round(NVL( TE.FWORKLOAD, 0 ) * NVL( TE.FQUOTA, 0 ),2) AS WAGE*/
			round(NVL( TE.FRPWAGE, 0 ),2) AS WAGE
		FROM
			YG_PR_TIMESHEETENTRYDETAIL TE
		INNER JOIN YG_PR_TIMESHEETREPORT T ON T.ID = TE.FPARENTID
		LEFT JOIN YG_PR_TIMESHEET TM ON TM.ID = T.FSRCINTERID
		LEFT JOIN JS_SYS_OFFICE O ON O.OFFICE_CODE = TM.FDEPTID
		LEFT JOIN YG_BS_EMPLOYEE PE ON PE.ID = TE.FEMPID
		/*left join JS_SYS_OFFICE O on O.OFFICE_CODE =Pe.fdepartmentid*/
		WHERE
			1 = 1
			and t.fsrcinterid != 0
			<if test="startTime !=null">
				and TRUNC(T.fdate) &gt;= #{startTime}
			</if>
			<if test="endTime !=null">
				and TRUNC(T.fdate) &lt;= #{endTime}
			</if>
		</if>
		)

		SELECT * from (
		SELECT
		A.startTime,
		A.endTime,
		<if test='(summaryConditions != null and summaryConditions == "2") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			A.FDEPTID,
			A.OFFICENAME AS "fdeptid.officeName",
		</if>
		<if test='(summaryConditions != null and summaryConditions == "1") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			A.FNAME "fname",
			A.fcode "fcode",
			/*A.OFFICENAME AS "fdeptid.officeName",*/
		</if>
		SUM(A.WAGE) as "wage"
		FROM
		AA A
		where 1=1
		<if test="fname != null and fname != ''">
			AND A.FNAME like '%' || #{fname} || '%'
		</if>
		<if test="fdeptid != null and fdeptid.officeName != '' and fdeptid.officeName != null">
			AND A.OFFICENAME like '%' || #{fdeptid.officeName} || '%'
		</if>
		GROUP BY
		A.startTime,
		A.endTime
		<if test='(summaryConditions != null and summaryConditions == "2") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			,A.FDEPTID
			,A.OFFICENAME
		</if>
		<if test='(summaryConditions != null and summaryConditions == "1") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			,A.FNAME
			,A.fcode
			/*,A.OFFICENAME*/
		</if>
		ORDER BY A.startTime
		<if test='(summaryConditions != null and summaryConditions == "2") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			,A.OFFICENAME
		</if>
		<if test='(summaryConditions != null and summaryConditions == "1") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			,A.fcode
		</if>
		)
		UNION ALL
		SELECT
		NULL AS startTime,
		NULL as endTime,
		<if test='(summaryConditions != null and summaryConditions == "2") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			'-' as FDEPTID,
			N'-' AS "fdeptid.officeName",
		</if>
		<if test='(summaryConditions != null and summaryConditions == "1") or (summaryConditions != null and summaryConditions == "1,2" ) '>
			'-' AS "fname",
			'-' AS "fcode",
			/*N'-' AS "fdeptid.officeName",*/
		</if>
		SUM(A.WAGE) as "wage"
		FROM
		AA A
		where 1=1
		<if test="fname != null and fname != ''">
			AND A.FNAME like '%' || #{fname} || '%'
		</if>
		<if test="fdeptid != null and fdeptid.officeName != '' and fdeptid.officeName != null">
			AND A.OFFICENAME like '%' || #{fdeptid.officeName} || '%'
		</if>
筱F
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery easyUI 实现动态生成多条件查询功能
04-08
谁在jquery easyUI 下做过动态生成多条件查询功能，动态添加一行（一个条件）：参数名（多个字段名）、关系符（>、=、<=、=）、比较值（input）。大体就这样，点击“添加条件”，生成上面描述的一行，这个在jquery easyUI 框架下如何实现，再者，假如post表单提交，服务器脚本如何获取和组装前台提交过来的多个条件。
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(二):后端
duanjunkaisky的专栏
08-12 3440
接着给大家奉献后端的处理哈第一讲里面可以获取到查询的数据集 conditionList，另外还需要传 tableName 给后端。
Web前端最全前端页面自定义分组，2024年最新前端算法面试题
最新发布
2401_84617356的博客
05-17 400
=======前言==最近小编在做一个有关订餐的项目，项目中用到了自定义分组的知识，需要使用模态框弹出一个框实现左右两栏布局，把左边栏选择出来的东西放到右边栏，然后保存到数据库中。叙述==下面的图片是实现的功能，我们来看一下具体的是如何实现的吧。模态框的实现：请看小编的另外的一篇博客（JS实现）：HTML代码实现前台部分后台部分。
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(一):前端
热门推荐
duanjunkaisky的专栏
04-28 1万+
下面单独抠出来的demo，直接复制到项目中就可以使用的页面哈，有些小伙伴报错了不知道咋处理，上面都说过了，我还是帮你们改好吧。最近项目上有一个需求，VUE动态SQL查询组件
web前端开发与应用——分组元素
m0_59742894的博客
12-01 1704
div div元素是没有语义的通用分组元素，早期设计中常用div标签进行网页布局。 blockquote blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙，在左右两边缩进（增加外边距）。 pre pre元素用来定义预格式化文本，在<pre>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。 figure/figcaption figure元素代表一个和文档相关的图，figcaption是这个图的标题。 ul/li ul可创建无序列表，在这
筛选数组中的奇数组（上课笔记）
weixin_55875108的博客
05-12 321
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>...
layui动态表头的实现代码
10-16
总结来说，实现layui动态表头的关键在于后端生成动态SQL查询，获取适应当前需求的数据结构，然后在前端利用layui的table模块动态创建表格列。这样的设计允许表格灵活地适应不断变化的数据需求，提高了用户体验。
前端项目-multi-select.zip
09-03
在前端开发中，选择框（select）是常见的一种交互元素，用于用户在多个选项中进行选择。然而，标准的HTML `<select>` 元素在处理多选时的用户体验并不理想，尤其是在需要展示大量选项或者需要高级筛选功能时。标题中...
Ecshop商品属性分类展示模式仿显卡网
08-16
1. **属性分组**：将商品属性按类型或功能进行分组，如显卡的GPU品牌、显存大小、接口类型等，这样用户可以快速定位到他们关心的属性。 2. **响应式设计**：考虑到不同的设备屏幕尺寸，应采用响应式布局，使属性列...
layouter.js:创建神奇地适应视口的动态布局
07-12
3. **网格系统**：网格系统是布局设计中的常见工具，`layouter.js` 可能内置了一套可定制的网格系统，允许开发者定义列的数量和间距，以便在不同分辨率下灵活展示内容。 4. **Flexbox和Grid布局**：作为现代CSS布局...
访京东查询（自定义查询，组件形式，多页面使用，自定义查询条件）
weixin_46166771的博客
04-20 255
访京东查询（自定义查询，组件形式，多页面使用，自定义查询条件）
前端下单互斥逻辑（vue3.0语法，可根据自己需求改造）
weixin_44441196的博客
12-29 547
所有值都支持动态配置，会根据你所选择的配置置灰不能选择的规格（规格也是动态传入）；而且支持规格不全选，也就是只选颜色、尺寸 其他的可不选 ，根据配置的规格 效果图 互斥逻辑组件，vue3语法、props里有默认值，可直接渲染出上图的效果 <template> <div class="test-box"> <div class="list" v-for="(items, idx) in realFliterList" :key="idx"> .
2017年2月27 周一 工作总结(Tab切换/多组条件查询--组内互斥)
aa1bb1cc2的专栏
02-27 393
以下全是测试数据： 任务描述： 1.左侧Tab可以切换，切换的同时右侧的结果相应变动 2.左侧的搜索是对树中结点的搜索，支持模糊查询，查到结点设置高亮且展开父节点 3.右侧的查询条件只会更新右侧下半部分的列表 右侧的查询条件指 这个部分要求：点双次取消(同时本组的”全部“高亮)， 单数次高亮，另外点击“全部”不会取消高亮 4.根据条件统计，并将结果按产品给的模版导出
JS 条件筛选，多条件并行互斥，checkbox筛选
weixin_30291791的博客
11-01 378
<!DOCTYPE html><html> <head><meta charset="utf-8" /><title></title> </head><script src="js/jquery.js" type="text/javascript" charset="utf-8">&l...
前端发送请求，利用数据库查询并将查询结果显示在前端页面
qq_58705070的博客
08-22 4804
利用axios实现的局部刷新，连接数据库，查询数据
vue 项目接入 markdown(1)
2401_84437170的博客
04-29 465
空(void)元素有那些？⾏内元 素和块级元素有什么区别？cookies,sessionStorage,localStorage 的区别？Doctype作⽤?serviceWorker的使用原理是啥？问：0.1 + 0.2 === 0.3 嘛？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？serviceWorker的使用原理是啥？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？Canvas 和 SVG 图形的区别是什么？如何实现浏览器内多个标签页之间的通信？HTML5 的离线储存的使用和原理？
HTML前端js分组方法
zxm_9783691的博客
01-18 942
// 加粗样式 HTML前端js分组方法—单字段分组调用 function method2() { this.tableData = [ {"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"0","Min":"舟车懒得", "Right":"","Rightimg":""}, {"Group":1,"Groupheader":"", "Leftimg":"","Left":"5","Min":"质量巡检",
js将list数据按日期分组
zdzzn1314的博客
08-30 1398
js将list数据按日期分组
Vue 组件间的通信(1)
2401_84436058的博客
04-29 501
父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。
Ext js高级查询界面：动态条件与数据交互
Ext JS 万能查询是一种高效且功能丰富的前端开发工具，特别适用于构建基于浏览器/服务器（B/S）架构的高级查询界面。该方法充分利用了ExtJS框架的强大功能，使得开发者能够轻松地创建出具有动态性和灵活性的查询模块...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值