如何定制列表页面（list.gsp）的显示样式?
李小翔
2014-02-21 18:15

内容列表
标题栏 	 # 
顶部操作栏 	 # 
查询栏 	 # 
数据表格 	 # 
翻页栏 	 # 
翻页栏添加按钮 	 # 
总结 	 # 

目录标题栏
顶部操作栏
查询栏
数据表格
翻页栏
翻页栏添加按钮
总结
供稿人：许庆洋
安装 BroFramework 后，默认生成的 list.gsp 渲染完成后，默认的显示样式如下图所示，包含标题栏、操作及查询栏、数据表格、翻页及操作栏等几个部分。

标题栏
<body>
　　<s:form action=”${ actionName} ”><s:setup/><div class=”body”>
    <h1>${ entityName} </h1>
     ....
</body>
以上代码中的 <h1>${ entityName} </h1> 就是列表的标题，可以使用 css 来需增加背景图片、字体颜色等，如：
/** 列表标题 */
body.bodyList .body { 
   padding-top:0px;
} 
body.bodyList div.body h1 { 
   background: #B5DCE6 url(../images/list/list_h1.jpg) left center no-repeat;
   color: white;
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;
   margin: 0;
   padding: 8px 30px;
   vertical-align: middle;
   text-shadow: 0.1em 0.1em 0.1em #333;    /* 阴影：暂不支持IE */
} 

顶部操作栏
数据表格上面一般防止操作与查询栏，左侧一般放置起草、统计等操作按钮（也可以放到翻页栏右侧），右侧一般为查询条件。
<s:filter>
   <div class=”left”>
       <span class=”menuButton”><g:link class=”create” action=”create” target=”_blank”>
         <g:message code=”default.new.label” args=”[entityName]” /></g:link></span>
   </div>
    ....
</s:filter>
以上代码 <span class=”menuButton”> 中创建了一个“新建XX”按钮，其中的“XX”根据 args=”[entityName]” 中的 entityName（Domain类的i18n名称） 来显示不同的标题，如果不需要直接把 entityName 设置为空即可，如：args=”[’’]”。
也可以新加其他的按钮，例如增加 Excel 导出，可以在代码的 <div class=”left”> 中再添加如下代码：
<span class=”menuButton”><g:link class=”excel” action=”export” target=”_blank”>导出</g:link></span>
此外，也可以使用 css 来修改它们的样式，例如增加背景图片、设置高度等（需要注意各浏览器的兼容性问题，尤其是各个版本的IE）：
/**
 * list起草等按钮
 */
/** 图片高度为24时位置问题 */
body.bodyList .searchfilter .left { 
   padding-top: 0px\ 9;        /** for IE8&9 */
   *padding-top: 4px;         /** for IE6&7 */
} 
/** 操作按钮的通用样式 */
body.bodyList .menuButton a { 
   padding: 7px 4px 5px 30px;
   color: #333;
   vertical-align: middle;
   /** for IE */
   line-height: 1.5;
   /** for IE6&7 */
   *vertical-align: baseline;
   *line-height: 2;
   *padding-top: 10px;
   /** for IE8&9 */
   position:relative\ 9;
   top: 0px\ 9;
   display: inline-block\ 9;    /** IE8下不这么设置的话，背景图片的顶部总是有一块显示不出来！！ */
   /** for IE6&7 */
   *position:static;
   *display: inline;
} 
/** create 按钮 */
body.bodyList .menuButton a.create { 
   background: url(../images/list/create.jpg) center left no-repeat;
} 
/** excel 按钮 */
body.bodyList .menuButton a.excel { 
   background: url(../images/list/excel.gif) center left no-repeat;
} 

查询栏
<s:filter>
    ...
   <div class=”right”>
       <g:message code=”bropen.bpm.instance.ProcessInstance.initiator”/>: <s:textField name=”w.initiatorName” style=”width:60px”/>
       <g:message code=”bropen.bpm.instance.ProcessInstance.title”/>: <s:textField name=”w.title” style=”width:100px”/>
       <g:message code=”bropen.bpm.instance.ProcessInstance.createTime”/>: <s:dateField name=”w.createTime” />
       <s:submitButton/>
   </div>
</s:filter>
以上代码 <div class=”right”> 中包括的即是查询条件，可以增加或删除查询条件（不在本文范围内），也可以通过标签中的 style 或者 class 属性来设置输入框的样式等。
最常用的是设置搜索按钮的显示样式。
设置“搜索”按钮的文字，只需要修改标签属性即可，如 <s:submitButton name=’查询’ /> 将“搜索”二字改成了“查询”。
设置搜索按钮的样式，隐藏文字、改成图片：
/** 查询按钮：设置背景图片、隐藏文字 */
body.bodyList .searchfilter { 
   background: none;
} 
body.bodyList .searchfilter input.submitButton{ 
   background: url(../images/list/search_submit_small.jpg) center left no-repeat;
   border: 0 none;
   height: 24px;
   width: 24px;
   vertical-align: middle;        /** 位置：各个浏览器还是有细微的差别，如果一定要一致，得设置position和top了！ */
   color: transparent;
   /** IE下不支持文字透明，只好设置文字最小、颜色和背景图片颜色一样 */
   font-size:0pt;                /** for IE8+ */
   *color: #ED8001;              /** for IE6&7 */
   *vertical-align: baseline;    /** for IE6&7 */
} 

数据表格
<div class=”list”>
   <table>
       <thead>
           <tr>
               <g:sortableColumn property=”bianhao” title=”${ message(code: ‘boe.bpm.hq.it.Foobar.bianhao’, default: ‘Bianhao’)} ”/>
                ....
           </tr>
       </thead>
       <tbody>
       <g:each in=”${ foobarInstanceList} ” status=”i” var=”entity”>
            ....
           <tr class=”${ (i % 2) == 0 ? ‘odd’ : ‘even’} ”>
               <td><a href=”${ href} ” target=”_blank”>${ entity.bianhao} </a></td>
                ....
           </tr>
       </g:each>
       </tbody>
   </table>
</div>
以上代码 <div class=”list”> 中为列表显示的内容，其中标签 g:sortableColumn 作用是点击列表的标题可以按照该属性排序。
二次开发过程中可能需要重新调整各列之间的宽度、奇/偶行的背景颜色、显示固定行数以及列中显示内容过多时需要省略显示等，实现方式如下：
定义表头 thead 背景及阴影：
/** 列表表头的背景阴影，和翻页栏对应 */
body.bodyList div.body th { 
   height: 35px;
   text-align: center;
   background: #fff url(../images/list/shadow_thead.jpg) bottom repeat-x;
   padding-top: 0px;
   padding-bottom: 0px;
} 
列的宽度直接给 thead 里的各个单元格增加属性 width=“XX” 即可，不过建议留下宽度可能最长的那一列（如标题）不设置宽度，让他自适应
不允许数据单元格里的内容自动换行：可以给 tbody 里对应的单元格（td）设置一个nobr的css类 <td class=”nobr”>
设置奇/偶行的背景颜色等，添加如下css：
/** 奇数行 */
body.bodyList div.body .odd { 
   background-color: #F6F6F6;
} 
/** 偶数行 */
body.bodyList div.body .even { 
   ....
} 
即便没有数据，也显示固定数量的行数，比如根据系统配置 bropen.framework.pagination.default 显示固定行数，可以在 g:each 循环后面加上下面的代码：
<% int defaultSize = setting(”bropen.framework.pagination.default”) %>
<g:each in=”${ (defaultSize-foobarList.size()) ? (foobarList.size()..defaultSize-1) : null} ” var=”i”>
   <tr class=”${ (i % 2) == 0 ? ‘odd’ : ‘even’} ”>${ ”<td>&nbsp;</td>”.multiply(7)} </tr>
</g:each>
需要注意的是 multiply(7) 里面的 7 表示表格的列数，并且必须保持一致，以免显示异常。
有必要的话，这段代码可以写成到自定义个 taglib 中，以便于使用。
如果列中的文字太多，需要自动截断并且将多余的字显示成审略号，如“通知通知通知通知通知通知...”，只需要给 table 设置css类名 <table class=”fixedEllipsis”>，同时设置每列（可以留下自适应列不设）的宽度即可。

翻页栏
如果定义了数据表格的表头背景和阴影，一般也需要定制一下翻页栏的显示效果，如：
/** 列表翻页栏的背景阴影，和表头对应 */
body.bodyList div.body div.paginateButtons { 
   height: 15px; /** 上下各有10的padding，合计35 */
   background: #fff url(../images/list/shadow_paginateButtons.jpg) bottom repeat-x;
} 

翻页栏添加按钮
有时候查询栏的空间不够，可以把一部分操作按钮放到翻页栏，即页面右下角。下面的代码演示了三种添加按钮的方式，推荐方式1或3：
<div class=”paginateButtons”>
   <g:paginate total=”${ total} ” />
   <!-- 1、在右下角添加操作按钮：带图片样式 -->
   <span class=”menuButton”><g:link class=”edit” action=”dumpAll” params=”[’search.where’:params.’search.where’]”
       onclick=”return confirm(’确定吗?’) && showProcessingDlg()”>操作</g:link></span>
   <span class=”menuButton”><a class=”group_key” href=”javascript:reinitPassword();void(0)”>操作</a></span>
   <!-- 2、在右下角添加操作按钮：不带图片的按钮 -->
   <span class=”menuButton”><button class=”group_key” onclick=”return reinitPassword()”>按钮</button></span>
</div>
<div class=”paginateButtons”>
   <span class=”left”>
       <g:paginate total=”${ total} ” />
   </span>
   <!-- 3、在右下角添加操作按钮：不带图片的链接 -->
   <span class=”right”>
       <a class=”step” href=”javascript:exec(’5’);void(0)” title=”tip”>操作</a>
   </span>
</div>

总结
通过上述 css 样式、以及内容定制后的结果如下图所示：
BTW：上面的 css 代码写到工程的  list.css 中。