本文介绍了一个基于ZK框架实现的数据列表及导出功能的具体设计和实现细节，包括列表展示、筛选、排序、批量操作等功能，并详细描述了导出Excel页面的设计与交互流程。
名称：
展示数据列表 （无从表）和导出页面
路径要求：
/pages/${entityClassName}/XXX_list.zul
/pages/${entityClassName}/XXX_list_excel.zul
页面要求：
- 每列要有筛选条件框。每列若是可调列框，列框要和筛选框同调大小；（页面效果）
- 点击列头可以进行全部数据按照当前列进行排序，而不局限于当前页面数据排序；被点击的列头要有样式表明是升序还是降序，是否刚刚被点中；（页面效果）
- 全选按钮，可以方便进行后续多选批量操作。如多选删除、批量提交；（页面效果）
- 点击行的时候，要有选中行的效果；（页面效果）
- 双击弹框显示详情，也可以单击操作列中的详情进行弹框显示；（页面效果）
- 分页行，支持设置每页显示行数和显示分页详情；（页面效果）
- 文本框支持立即搜索，也支持回车搜索；部分特殊的可以优化成其他方式，如单选框；（页面效果）
- 在每个列表内容显示方面支持代码上配置最多显示多少数目的文本信息；（代码要求）
- 支持鼠标移上去有文本详情显示；（页面效果）
- 删除的时候要有提示框确认删除；（页面效果）
- 展示主体表格，id必须为：entityModelGrid；（代码要求）
- 全选/取消全选勾选框， id必须为：mainCheckbox；（代码要求）
- 筛选框的父级必须是column列的子集；（代码要求）
- column列的sclass必须是entityModelGridHeader；（代码要求）
- 点击下载Excel的button ID必须是exportGridToExcel；（代码要求）
- 分页设置每页显示行数的时候支持回车和鼠标移动自动聚焦；每页显示设置不超过50；（页面效果）
- 方向按钮ID必须是addProject；（代码要求）
- 导出Excel按钮链接弹出一个Excel导出勾选框；左边为分页形式下的支持查询的列表；中间有选择方向按钮；右边为显示所有已被选中要导出的列表；左右两边都要有相同的默认排序；右边列表有删除当前选中项操作；不存在重复选择的情况；右边暂不需要支持筛选功能；同样也要支持双击查看详情和鼠标文本显示；还要支持导出全部功能；（页面效果）
- 导出页面的表单gridID必须为entityModelGrid和entityModelGrid2;页面rowid必须分别为row_开头和row2_开头；（代码要求）
- 导出已勾选按钮和导出全部按钮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;"/>  
<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>
扫一扫
65
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
