如何定制列表页面（list.gsp）的显示样式?

供稿人：许庆洋

安装 BroFramework 后，默认生成的 list.gsp 渲染完成后，默认的显示样式如下图所示，包含标题栏、操作及查询栏、数据表格、翻页及操作栏等几个部分。

标题栏

以上代码中的 <h1>${entityName}</h1> 就是列表的标题，可以使用 css 来需增加背景图片、字体颜色等，如：

顶部操作栏

数据表格上面一般防止操作与查询栏，左侧一般放置起草、统计等操作按钮（也可以放到翻页栏右侧），右侧一般为查询条件。

以上代码 <span class="menuButton"> 中创建了一个“新建XX”按钮，其中的“XX”根据 args="[entityName]" 中的 entityName（Domain类的i18n名称） 来显示不同的标题，如果不需要直接把 entityName 设置为空即可，如：args="['']"。

也可以新加其他的按钮，例如增加 Excel 导出，可以在代码的 <div class="left"> 中再添加如下代码：

此外，也可以使用 css 来修改它们的样式，例如增加背景图片、设置高度等（需要注意各浏览器的兼容性问题，尤其是各个版本的IE）：

查询栏

以上代码 <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"> 中为列表显示的内容，其中标签 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">，同时设置每列（可以留下自适应列不设）的宽度即可。

翻页栏

如果定义了数据表格的表头背景和阴影，一般也需要定制一下翻页栏的显示效果，如：

翻页栏添加按钮

有时候查询栏的空间不够，可以把一部分操作按钮放到翻页栏，即页面右下角。下面的代码演示了三种添加按钮的方式，推荐方式1或3：

总结

通过上述 css 样式、以及内容定制后的结果如下图所示：

BTW：上面的 css 代码写到工程的  list.css 中。