`

自我规范模版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： 展示所选对象详情 ...
评论
发表评论

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

相关推荐

    poi_模板导出excel，支持百万级数据模板导出

    poi导入、导出,支持百万级数据模板导出、合并excel。项目为spring-boot-2上开发。resource里面有模板，在junit测试类中修改为本地存在路径即可导出文件，在junit测试类中修改for循环的i可以模拟百万级数据导出。注意...

    xlsx百万级模板数据导出

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

    java基于模板导出Excel表格

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

    PowerDesigner导出数据表结构

    powerDesigner导出数据表结构说明文档和写好的rtp模板，直接可以用，格式完美。

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

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

    javaWeb中使用Excel模板导出业务数据

    在javaWeb开发中，会经常遇到导出业务数据的业务需求，导出Excel最常用的技术就是poi，对于简单的业务，我们可以动态的生成一个Excel文件，但对于复杂的业务，我们可以通过使用读取Excel模板的，然后往里面填充数据...

    Vue 大屏数据展示模版

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

    C#把数据列表、集合导出到Excel表格

    把数据列表、集合导出到Excel表格 应用例子：Excel.down(list.ToList(), "查询数据", "当日数据", "Id|Code,编码|name,名称,20|num,数量|CreatedTime,时间,18|cause,备注,60");

    java excel大数据量导出demo,可支持模板导出

    支持模板导出 ，支持分页查询 ， 支持大数据量，采用SXSSFWorkbook

    kettle 使用excel模板导出数据

    kettle 使用excel模板导出数据。

    vue根据数据动态展示页面

    vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。vue根据数据动态展示页面，动态组件...

    各类大屏数据展示模板.zip

    各类大屏数据展示模板 各类大屏数据展示模板 各类大屏数据展示模板 各类大屏数据展示模板 各类大屏数据展示模板 各类大屏数据展示模板 各类大屏数据展示模板 各类大屏数据展示模板 各类大屏...

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

    支持从数据库中查询到数据，以多级表头形式导入到Excel文件中。比如：一级表头：学号、姓名、各科成绩。二级表头：语文、数学、英语（二级表头在各科成绩下面）。

    Excel导出数据(根据Excel模板定义)

    根据已经配置好的Excel模板导出数据。资源是个完整项目导入就可使用（本人用的是jdk7）。

    关于Java使用EasyExcel导出动态数据为Excel文件SpringBoot代码项目示例

    2、若各位项目需求与本资源的样式相符度低，例如业务有渲染单元格颜色的，或者要求字体加粗，或者写入到多个Sheet页，或者设置列宽、行高，或者合并单元格，或者自动列宽，或者插入批注，或者读取Excel数据，又或者...

    java解析Excel文件并把数据存入数据库和导出数据为excel文件SpringBoot代码示例

    2、java读取数据库数据，并导出为excel文件。 3、README.md中有详细的操作步骤示例。 使用说明： 1. 先使用postman导入：other/excel相关.postman_collection.json 2. 导入sql到数据库：other/excel.sql 3. idea导入...

    使用EasyPOI导出Excel模板数据（含图片）博文源码

    博文《使用EasyPOI导出Excel模板数据（含图片）》所含源码，应众多网友要求放出来。包含测试类、导出工具类、图像工具类、Excel模板

    Delphi快速导出数据到Excel

    背景：今天要把DataSet导入Excel，查询以前的贴子，一部分用Ole，速度太慢， 一部分用ADO连接到Excel文件，也很慢，一气之下把DBGrigEh的导出部分改了出来， 欢迎大家指教、改进。 功能：将数据集的数据...

    多表头导出Excel

    导出Excel表格 /// 导出Excel /// 创建Excel并写入数据 /// List转化为DataTable /// 转换数据类型

    java导出word使用freemarker模板map数据导出word带图片

    java导出word使用freemarker模板map数据导出word带图片 可以循环map 中list。 调用的2种方法在博客 https://blog.csdn.net/yjflinchong/article/details/122614203

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