SSH框架中使用jquery-ingrid实现翻页+筛选

SSH框架中使用jquery-ingrid实现翻页+筛选

最近项目中有一个地方需要将数据进行列表展示，并提供筛选功能，虽说不是很复杂的功能，但是在使用jquery-ingird插件实现时，还是费了一番周折的，在此进行记录下实现过程，并作为自己在博客园的第一篇博客。

首先说一下ingrid插件，ingrid插件是一个很轻量级的插件，可以帮你快速美观的实现表格的翻页、拉伸等功能，关于ingrid，感觉网上并没有太多的资料，只找到一个比较权威的Demo：http://reconstrukt.com/ingrid/src/example1.html，幸好插件不是很复杂，源码比较好理解，因此在修改上比较方便。本项目使用的是jquery.ingrid-0.9.9-min.js插件。

在最开始先展示一下实现后的样子：

初始界面是这样子的：

在下面可以进行翻页：

上面可以进行筛选：

现在说明一下进行开发的过程。

首先分析后台逻辑。

在后台中，可以用action中的一个函数来实现展示、翻页和筛选这三个功能，核心代码为：

 1 //首先获取所有的数据 2 List<Channel> channelList = service.getAllChannelList(); 3 //...... 4 //如果需要筛选，则进行筛选 5 Iterator<Channel> iterator = channelList.iterator(); 6         while (iterator.hasNext()) { 7             Channel channel = iterator.next(); 8             Model parentModel = service.getParentModel(channel.getId()); 9             if (model.getId() != 0 && !model.equals(parentModel)) {10                 //针对型号进行筛选11                 iterator.remove();12                 continue;13             }14             //...15             modelList.add(parentModel);16             //...17         }18 //记录住最大长度，并进行翻页。19 maxCount = modelList.size();20 modelList = commonService.getBetween((page - 1) * countPerPage, countPerPage, modelList);21 //...

整体逻辑比较简单，采用的是软筛选和翻页的方式：首先从数据库中取出所有记录，然后看是否需要筛选（判断model的id是否为0），如果需要筛选的话，进行筛选，筛选完毕后，再进行分页。

然后分析前台页面。

前台页面在初始展示时，使用struts标签即可。

 1 <div> 2     <table id="channelListTable"> 3         <thead> 4         <tr> 5             <th>序号</th> 6             <th><select id="modelSelect" class="STYLE10" onchange="mpsChange()"> 7                 <option value="0">型号名称</option> 8                 <s:iterator value="totalModels" id="ite1"> 9                     <option value='<s:PRoperty value="id"/>'>10                         <s:property value="name"/>11                     </option>12                 </s:iterator>13             </select></th>14             <th><select id="periodSelect" class="STYLE10" onchange="mpsChange()">15                 <option value="0">阶段名称</option>16                 <s:iterator value="totalPeriods" id="ite2">17                     <option value='<s:property value="id"/>'>18                         <s:property value="name"/>19                     </option>20                 </s:iterator>21             </select></th>22             <th><select id="statusSelect" class="STYLE10" onchange="mpsChange()">23                 <option value="-1">状态名称</option>24                 <s:iterator value="totalStatuss" id="ite3">25                     <option value='<s:property value="id"/>'>26                         <s:property value="name"/>27                     </option>28                 </s:iterator>29             </select></th>30             <th>通道名称</th>31             <th>基本操作</th>32         </tr>33         </thead>34         <tbody id="channelListTbody">35         <s:set name="startNumber" value="(#request.page-1)*#request.countPerPage"></s:set>36         <s:iterator value="modelList" status="status">37             <tr>38                 <td height="20" bgcolor="#FFFFFF" class="STYLE6">39                     <div align="center">40                         <span class="STYLE19"><s:property value="#status.count + #startNumber"/> </span>41                     </div>42                 </td>43                 <td height="20" bgcolor="#FFFFFF" class="STYLE19">44                     <div align="center">45                         <s:property value="modelList[#status.count - 1].name"/>46                     </div>47                 </td>48                 <td height="20" bgcolor="#FFFFFF" class="STYLE19">49                     <div align="center">50                         <s:property value="periodList[#status.count - 1].name"/>51                     </div>52                 </td>53                 <td height="20" bgcolor="#FFFFFF" class="STYLE19">54                     <div align="center">55                         <s:property value="statusList[#status.count - 1].name"/>56                     </div>57                 </td>58                 <td height="20" bgcolor="#FFFFFF" class="STYLE19">59                     <div align="center">60                         <s:property value="environment0List[#status.count - 1].name"/>61                     </div>62                 </td>63                 <td height="20" bgcolor="#FFFFFF">64                     <div align="center"65                          class="STYLE21">66                         <a href="javascript:edit()">编辑</a>&nbsp;|&nbsp;<a67                             href="Javascript:deleteEnvironment0()">删除</a>68                     </div>69                 </td>70             </tr>71         </s:iterator>72         <s:hidden name="totalRecords" value="%{#request.maxCount}"></s:hidden>73         </tbody>74     </table>75     <s:hidden name="recordsPerPage" value="%{#request.countPerPage}"></s:hidden>76 </div>

这里需要注意的有2点：

1 对三个下拉列表change事件的绑定，并没有使用javasript动态绑定，而是直接采用onchange，这是因为当使用ingrid将表格修饰之后，每个单元格都变成unselectable="on"了，绑定的事件就无效了。

2 总记录条数（totalRecords）和每页记录数（recordsPerPage）这两个hidden，一个位于tbody里面，一个位于tbody外面，这是因为tbody中的内容经常（翻页或者筛选时）要变动，希望tbody中的内容越少越好（可以减小数据传输量），因此将在程序运行时基本不变的每页记录数放在了tbody外，而总记录数是有可能变化的（进行筛选的情况下），只能放在tbody中。

除了需要初始页面之外，还需要一个“小”页面，用于传递每次更新的数据。通过读取ingrid源码可知，ingrid在获取到更新后的页面后，是通过获取其中的tbody标签来进行页面刷新的，因此小页面只取初始页面中tbody的部分即可。

<tbody id="channelListTbody"><s:set name="startNumber" value="(#request.page-1)*#request.countPerPage"></s:set><s:iterator value="modelList" status="status">    <tr>        <td height="20" bgcolor="#FFFFFF" class="STYLE6">            <div align="center">                <span class="STYLE19"><s:property value="#status.count + #startNumber"/> </span>            </div>        </td>        <td height="20" bgcolor="#FFFFFF" class="STYLE19">            <div align="center">                <s:property value="modelList[#status.count - 1].name"/>            </div>        </td>        <td height="20" bgcolor="#FFFFFF" class="STYLE19">            <div align="center">                <s:property value="periodList[#status.count - 1].name"/>            </div>        </td>        <td height="20" bgcolor="#FFFFFF" class="STYLE19">            <div align="center">                <s:property value="statusList[#status.count - 1].name"/>            </div>        </td>        <td height="20" bgcolor="#FFFFFF" class="STYLE19">            <div align="center">                <s:property value="environment0List[#status.count - 1].name"/>            </div>        </td>        <td height="20" bgcolor="#FFFFFF">            <div align="center"                 class="STYLE21">                <a href="javascript:edit()">编辑</a>&nbsp;|&nbsp;<a                    href="javascript:deleteEnvironment0()">删除</a>            </div>        </td>    </tr></s:iterator><s:hidden name="totalRecords" value="%{#request.maxCount}"></s:hidden></tbody>

最后开始分析js代码。

js代码中需要分析的有这么几个函数。

1 使用ingrid修饰。

 1 //对表格进行初始话，使用ingrid控件 2 function i