`

自我规范模版A要求2：展示数据列表 （无从表）和导出数据页面

 
阅读更多

名称：

        展示数据列表 （无从表）和导出页面

路径要求：

        /pages/${entityClassName}/XXX_list.zul

        /pages/${entityClassName}/XXX_list_excel.zul

页面要求：

  1.   每列要有筛选条件框。每列若是可调列框，列框要和筛选框同调大小；（页面效果）
  2.  点击列头可以进行全部数据按照当前列进行排序，而不局限于当前页面数据排序；被点击的列头要有样式表明是升序还是降序，是否刚刚被点中；（页面效果）
  3.  全选按钮，可以方便进行后续多选批量操作。如多选删除、批量提交；（页面效果）
  4.  点击行的时候，要有选中行的效果；（页面效果）
  5.  双击弹框显示详情，也可以单击操作列中的详情进行弹框显示；（页面效果）
  6.  分页行，支持设置每页显示行数和显示分页详情；（页面效果）
  7.  文本框支持立即搜索，也支持回车搜索；部分特殊的可以优化成其他方式，如单选框；（页面效果）
  8. 在每个列表内容显示方面支持代码上配置最多显示多少数目的文本信息；（代码要求）
  9. 支持鼠标移上去有文本详情显示；（页面效果）
  10. 删除的时候要有提示框确认删除；（页面效果）
  11. 展示主体表格，id必须为：entityModelGrid；（代码要求）
  12. 全选/取消全选勾选框， id必须为：mainCheckbox；（代码要求）
  13. 筛选框的父级必须是column列的子集；（代码要求）
  14. column列的sclass必须是entityModelGridHeader；（代码要求）
  15. 点击下载Excel的button ID必须是exportGridToExcel；（代码要求）
  16. 分页设置每页显示行数的时候支持回车和鼠标移动自动聚焦；每页显示设置不超过50；（页面效果）
  17. 方向按钮ID必须是addProject；（代码要求）
  18. 导出Excel按钮链接弹出一个Excel导出勾选框；左边为分页形式下的支持查询的列表；中间有选择方向按钮；右边为显示所有已被选中要导出的列表；左右两边都要有相同的默认排序；右边列表有删除当前选中项操作；不存在重复选择的情况；右边暂不需要支持筛选功能；同样也要支持双击查看详情和鼠标文本显示；还要支持导出全部功能；（页面效果）
  19. 导出页面的表单gridID必须为entityModelGrid和entityModelGrid2;页面rowid必须分别为row_开头和row2_开头；（代码要求）
  20. 导出已勾选按钮和导出全部按钮ID 必须是exportChooseData和exportAllData;（代码要求）

自我实现（部分信息）：

 

  •       XXX_list.zul

 

 

	<columns sizable="true" menupopup="auto" sclass="z-column-sort">
		<column width="35px;"  zclass="XX" style="padding-left:5px;border: 1px solid;border-top:none;border-color: #8FB9D0 #8FB9D0 #8FB9D0 white;">
			<hbox>
				<checkbox tooltiptext="全选/取消全选" id="mainCheckbox" forward="main.onChooseAllOrNot"/>
			</hbox>
		</column>
		
		<column value="labNum" label="${$composer.module}编号" align="left" tooltiptext="${self.label }" sclass="entityModelGridHeader" hflex="1" >
			<hbox  pack="start" >
			<image src="/img/common/funnel.png" />
			<textbox id="labNum" placeholder="${$composer.module}编号${FILTER_PART}" onMouseOver="self.select()" instant="true" hflex="1"></textbox>
			</hbox>
		</column>
		<column width="10%" label="操作列" align="center" zclass="XX" style="border: 1px solid;border-top:none;border-color: #8FB9D0 #8FB9D0 #8FB9D0 white;color:#00547A;font-size:12px;">
		</column>			
	</columns>

 

 

 

	<template name="model">
          <row value="${each }" style="cursor:pointer" id="row_${each.sid }" forward="onDoubleClick=main.onShowEntityDetailInfoByDoubleClick,onClick=main.onChooseOrNot">
              
              <div >
								<checkbox name="checkbox" onClick="if (self.isChecked()){
									self.setChecked(false);
									}else{
									self.setChecked(true);
									}
								" />
              </div>              
              <div >
               <label visible="true" value="${each.labNum}"  sclass="entityModelGridData" maxlength="${defaultMaxLength}" onCreate="((Div)self.getParent()).setTooltiptext(self.getValue())"/>
              </div>
			  <div>
					<a label="详情" forward="main.onShowEntityDetailWithLink" style="color:#00547A;font-weight:normal;" image="/img/common/search.gif"/>
					<a label="删除" forward="main.onDelEntityDetailWithLink" style="color:#00547A;font-weight:normal;" image="/img/common/delete.gif" if="${sec:isAnyGranted('XXX')}"/>
			  </div>              
          </row>
	</template>

 

 

  •    XXX_list_excel.zul

 

 

<?xml version="1.0" encoding="UTF-8"?>
<?page id="export" ?>
<?link rel="stylesheet" type="text/css" href="/css/t1.css"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?taglib uri="/WEB-INF/tld/my.tld" prefix="z"?>
<zk>
<zscript>
	String defaultMaxLength ="10";
	String FILTER_PART =com.gzmh.lab.SysProperties.HintProperties.INPUT_VALUE;
	String emptyMessage ="";
</zscript>
<window  id="main2"  apply="${z:ctrl('XXXXXComposer')}" border="normal"  width="80%" minwidth="400" mode="modal" position="center,top" sizable="true" minheight="300" closable="true" >
<vlayout vflex="true" hflex="1"  style="min-height:400px;">





<columnlayout height="600px;">
	<columnchildren width="47%" style="padding:10px;">
            <panel >
                <panelchildren>
<grid id="entityModelGrid" emptyMessage="${emptyMessage }" >
    
    <auxhead>
		<auxheader label="可选择导出的数据" ></auxheader>
	</auxhead>
    
	<!-- 筛选条件行 -->	
	
	<columns height="1px;" menupopup="auto" value="iCorporationService">
		<column label="XXXXX编号" align="left" tooltiptext="${self.label }" sclass="entityModelGridHeader" hflex="1" visible="true">
			<hbox  pack="center" style="">
			<checkbox id="mainCheckbox" forward="onChooseAllOrNot"/>
			<image src="/img/common/funnel.png" />
			<textbox id="labNum" placeholder="XXXXXX编号${FILTER_PART}" onMouseOver="self.select()" instant="true" hflex="1"></textbox>
			</hbox>
		</column>
	</columns>   
	
	<!--END 筛选条件行 -->

	<!-- 分页展示数据 -->

		<template name="model">
          <row   style="cursor:pointer" id="row_${each.sid }" forward="onDoubleClick=onShowEntityDetailInfoByDoubleClick,onClick=onChooseOrNot">
              <div >
				<checkbox name="checkbox" onClick="if (self.isChecked()){
					self.setChecked(false);
					}else{
					self.setChecked(true);
					}
				" value="${each }"/>
               <label visible="true" value="${each.XXXXXXNum}"  sclass="entityModelGridData" maxlength="${defaultMaxLength}" onCreate="((Div)self.getParent()).setTooltiptext(self.getValue())"/>
              </div>
          </row>
	</template>

	<!--END 分页展示数据 -->



</grid>
<!-- 查看详情弹出框 -->
<popup id="entity_detail_popup">
    <include id="entity_detail_include" />
</popup>

<!-- 分页行 --> 	

<grid sclass="pgInfoGrid" style="background-repeat: repeat-x;
		background-image: url(${desktop.webApp.servletContext.contextPath }/img/zkau/column-bg.png);border-top:none;">		
		<rows>
			<row  style="background-repeat: repeat-x;
		background-image: url(${desktop.webApp.servletContext.contextPath }/img/zkau/column-bg.png);padding-top:0px;padding-bottom:0px;">
				<cell width="50%" style="background-repeat: repeat-x;border: 1px solid #E8F6FD;border-right:none;
		background-image: url(${desktop.webApp.servletContext.contextPath }/img/zkau/column-bg.png);">
					<paging id="paging" style="padding-top:3px;padding-bottom:3px;background-repeat: repeat-x;
		background-image: url(${desktop.webApp.servletContext.contextPath }/img/zkau/column-bg.png);"/>
				</cell>
				<cell width="50%" align="right" style="border:1px solid #E8F6FD;">
					<div >
						<label style="color: #00547A;" id="pageDetailInfo"/>
						<label value="每页显示:" style="color:#00547A;"/>
						<intbox inplace="true" id="pagingIntbox" style="border:1px solid #6BA6BF" width="22px" forward="onOk=onSetPageSize,onBlur=onSetPageSize"  onMouseOver="self.select()" constraint="no empty,no negative, no zero"/>
					</div>
				</cell>
			</row>				 
		</rows>
</grid>

<!-- END 分页行 -->
			
			</panelchildren>
		</panel>
	</columnchildren>
<columnchildren width="6%">
            <panel>
                <panelchildren>
                	<vlayout>
                	<hlayout>
                	<grid oddRowSclass="non-odd" style="border:0px;"  hflex="1">
                		<rows>
	                    	<row align="center" height="200px" style="background:white;border:0px;" >
	                    	</row>
                			<row align="center"  style="background:white;border:0px;">
                    <image style="cursor:pointer;" tooltiptext="添加导出选项" id="addProject" forward="onAddProject"
                        src="/img/common/ButtonArrowRight32.png">
                    </image>
                    		</row>
	                    	<row align="center" style="background:white;border:0px;">
                    <separator height="10px"/>
	                    	</row>
                		</rows>
                	</grid>
                	</hlayout>
                		</vlayout>
                </panelchildren>
            </panel>
</columnchildren>
<columnchildren width="47%" style="padding:10px;">
            <panel>
                <panelchildren >
<grid id="entityModelGrid2"  emptyMessage="${emptyMessage }"  height="450px;" >
    
               
	<auxhead>
		<auxheader label="已选择导出的数据" colspan="3"></auxheader>
	</auxhead>
	<columns height="1px;" menupopup="auto" value="iCorporationService" >
		<column label="XXXXX编号" align="left" tooltiptext="${self.label }" sclass="entityModelGridHeader" hflex="1" visible="true">
		</column>
		<column label="实验室名称"  align="left"  tooltiptext="${self.label }" sclass="entityModelGridHeader" hflex="1" visible="true">
		</column>
	</columns>   
	
	<!-- 分页展示数据 -->

		<template name="model">
          <row  id="row2_${each.sid }" style="cursor:pointer"  forward="onDoubleClick=onShowEntityDetailInfoByDoubleClick">
              <div >
				<image src="/img/common/delete.gif" style="cursor:pointer;" id="${each.sid }" forward="onDel"></image>
               <label visible="true" value="${each.XXXXXNum}"  sclass="entityModelGridData" maxlength="${defaultMaxLength}" onCreate="((Div)self.getParent()).setTooltiptext(self.getValue())"/>
              </div>
          </row>
	</template>
	<!--END 分页展示数据 -->
</grid>
                </panelchildren>
            </panel>
</columnchildren>
</columnlayout>
<hbox pack="center" hflex="1" style="margin-bottom:5px;padding-bottom:5px;">
	<button label="导出已选择内容" id="exportChooseData" image="/img/report/excel.gif" tooltiptext="${self.label}" style="color: #00547A;"/>&#160;&#160;
	<button label="导出所有内容" id="exportAllData" image="/img/report/excel.gif" tooltiptext="${self.label}" style="color: #00547A;"/>
	<button label="关闭窗口" image="/img/report/excel.gif" tooltiptext="${self.label}" style="color: #00547A;" onClick="main2.onClose()"/>
</hbox>
</vlayout>
</window>
<!-- END 查看详情弹出框 -->


</zk>

 

代码实现结构：

 

/**
 * 
 * <p>
 * 该类是ZK框架中页面文件XXXXX_list.zul、lXXXXX_list_excel.zul对应的控制器
 * 
 * form开头的方法都是和操作表单相关的；
 * <p>
 * assist开头的方法都是表单中下拉框相关的；包括里面的查询；
* <p>
*   otherMethod开头的是页面其他部分响应的方法；
 * 
 * @author Calvin_Cheung
 * 
 */

 

 

 


 

 一些补充：

 

		<column width="125px;" value="isValid" label="是否有效"  align="left"  tooltiptext="${self.label }" sclass="entityModelGridHeader" >
			<div>
			<separator orient="horizontal"></separator>
				<radiogroup orient="horizontal" vflex="1" id="isValid" onCreate="((Radio)self.getFirstChild()).setSelected(true)">
					<radio label="全部" selected="true"></radio>
					<radio label="是" value="1"></radio>
					<radio label="否" value="0 "></radio>
				</radiogroup>
			</div>
		</column>

 

 

 

 

  • 大小: 14.1 KB
  • 大小: 8.2 KB
0
顶
0
踩
分享到：
| 自我规范模版A要求1： 展示所选对象详情 ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    kettle 使用excel模板导出数据

    Kettle提供了使用Excel模板导出数据的功能，这使得输出的数据格式更加规范和易于阅读。 首先，我们需要理解Kettle中的Transform（转换）。Transform是Kettle工作流程中的基本单元，用于处理数据流。在这个场景中，...

    PowerDesigner导出数据表结构

    "PowerDesigner导出数据表结构"这一主题主要涉及如何使用PowerDesigner来管理和导出数据库的结构信息。 首先，我们来看标题提到的"导出数据表结构"。在PowerDesigner中，你可以创建和编辑数据表结构，这通常通过...

    Java数据导出到Excel模板

    2. **Excel模板**：模板在数据导出中扮演重要角色，它定义了数据的展示格式，如字体、颜色、样式、行列布局等。在Java应用中，我们可以预先创建一个Excel模板，然后填充动态数据，这样既保证了输出格式的一致性，又...

    Java导出数据到Excel文件中（支持多表头）

    在Excel中，多级表头允许我们在工作表的列上设置多个层次的标题，以更清晰地组织和展示数据。例如，一级表头通常代表数据的主要类别，如"学号"、"姓名"，而二级表头则表示细分的类别，如"语文"、"数学"、"英语"，...

    xlsx百万级模板数据导出

    xlsx百万级模板数据导出，可以使用8M内存模板导出excel. easypoi和hutool对07版本的excel都没有提供模板导出，因此个人封装了下(原创)。 目前支持的模板表达式有 #if：表达式不成立则不输出#if #end中的行 #each ...

    数据窗口导出工具

    2. 设置导出参数，如选择导出格式、设置导出范围（全表或特定记录）、调整列宽和样式等。 3. 预览导出效果，确认无误后执行导出操作。 4. 保存导出文件到指定位置，完成数据的离线存储或分享。 对于开发人员来说，...

    java基于模板导出Excel表格

    除了平时简单的数据导出需求外，我们也经常会遇到一些有固定格式或者模板要求的数据导出，这个时候poi导出方式变得复杂且冗长，因此采用EasyExcel的方式进行导出，可以大大提高我们的开发效率和简洁我们的代码。...

    EasyExcel 动态表头 导出

    引入这个依赖后，你可以在项目中直接调用EasyExcel提供的API来实现各种Excel操作，如读取、写入和导出等。 以下是使用EasyExcel实现动态表头导出的基本步骤： 1. **创建数据模型**：根据业务需求，创建相应的Java...

    Excel模板导出（针对复杂模板情况）

    4. **图表与图形**：复杂模板通常会包含各种图表，用于直观展示数据。在导出时，需要更新图表数据源，使其与新数据对应，并保持图表的布局和设计风格一致。 5. **公式与函数**：Excel中的公式和函数是进行计算和...

    C# 将数据导出到excel模板 自定义字段

    本主题聚焦于如何利用C#将数据导出到Excel模板，并自定义字段，这是一个常见的需求，尤其是在数据分析、报告生成和数据共享的场景中。 在C#中，我们可以利用各种库来操作Excel，如EPPlus、NPOI或Microsoft.Office....

    Vue 大屏数据展示模版

    内容概要：组件库基于Vue ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用，主要包含三个大屏demo案例。 适合人群：具备一定编程基础，组件库的开发和调试都使用Chrome浏览器 能学到...

    html5全屏物联网平台数据统计图表展示页面模板

    HTML5全屏物联网平台数据统计图表展示页面...综上所述，这个HTML5全屏物联网平台数据统计图表展示页面模板结合了前端开发的多种技术，实现了高效的数据可视化和实时物联网数据展示，为数据分析和决策提供了直观的平台。

    java导出数据到指定的excel模板中。

    这个项目源自于http://blog.csdn.net/suhenhappy/article/details/7991236，这篇博客，在此谢谢博主suhenhappy。实现了java导出数据到指定的excel模板中。

    java 从pdf模板中导出数据

    在IT行业中，利用Java从PDF模板中导出数据并设置保护是一项常见的需求，尤其是在文档自动化处理、报表生成或数据安全领域。以下是对这一主题的深入探讨，包括所需的技术栈、步骤详解以及潜在的安全措施。 ### 技术...

    java iText 实现从数据库中导出数据到已有的PDF模板

    Java中的iText库是一个强大的...总的来说，Java结合iText实现从数据库导出数据到PDF模板涉及了数据库操作、Java I/O、PDF处理和数据映射等多个技术点。理解并掌握这些技能，对于开发高效、灵活的数据导出功能至关重要。

    POI实现的基于动态模板的EXCEL数据导出

    标题中的“POI实现的基于动态模板的EXCEL数据导出”是指利用Apache POI库来创建一个可以动态填充数据的Excel模板，从而实现大量数据的高效导出。Apache POI是一个开源项目，它允许Java开发者读写Microsoft Office...

    导出数据到Excel表

    在IT行业中，将数据导出到Excel表格是一种常见的操作，特别是在数据分析、报表生成以及数据库管理等领域。Aspose.Cells是一款强大的第三方库，它允许开发者在不依赖Microsoft Office的情况下，直接通过.NET环境处理...

    数据仓库建设规范模板.pdf

    数据仓库建设规范模板是为了提供统一的命名标准和编程规范，提高系统的规整性和代码的可读性，减轻维护工作量，提高工作效率。本文档主要介绍了数据仓库中的数据库对象命名规范、数据库编程规范和JAVA编程规范。 ...

    Data From Keil to Excel （keil数据导出至excel）

    一旦数据解析为整型，我们可以利用Excel的图表功能来直观地展示数据。例如，可以创建柱状图、折线图或散点图来表示内存数据的变化趋势。若想展示不同地址的数据差异，可以将地址作为X轴，转换后的数据作为Y轴。在...

    poi导出根据模板导出excel和简单列表导出excel源码

    在本案例中，我们关注的是如何使用 Apache POI 库来导出 Excel 文件，特别是根据模板导出和简单列表导出。下面将详细介绍这个过程。 1. **Apache POI 概述** Apache POI 提供了 Java API 来读写 Microsoft Office ...

Magicbox
Global site tag (gtag.js) - Google Analytics