首页 > 代码库 > 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> | <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> | <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 ingridTable(params) { 3 var recordsPerPageValue = http://www.mamicode.com/$("#recordsPerPage").val(); 4 var totalRecordsValue = http://www.mamicode.com/$("#totalRecords").val(); 5 var pageWidth = document.body.offsetWidth - 20; 6 $("#channelListTable").ingrid({ 7 url: ‘queryListChannel.action‘, 8 //先设置成全部不能排序再说 9 unsortableCols: [ 0, 1, 2, 3, 4, 5 ],10 colWidths: [ pageWidth * 0.05, pageWidth * 0.2, pageWidth * 0.15, pageWidth * 0.2, pageWidth * 0.2, pageWidth * 0.2 ],11 recordsPerPage: recordsPerPageValue,12 totalRecords: totalRecordsValue,13 extraParams: params14 });15 }
这个函数比较简单，直接调用ingrid方法即可。在页面加载成功时，只用无参调用此方法即可:ingridTable()。params这个参数在进行筛选时会用到，后面会进行讲解。
2 筛选函数。
1 //进行筛选 2 function mpsChange() { 3 var modelId = $("#modelSelect").val(); 4 var periodId = $("#periodSelect").val(); 5 var statusId = $("#statusSelect").val(); 6 var params = { 7 "model.id": modelId, 8 "period.id": periodId, 9 "status.id": statusId10 };11 $.ajax({12 url: "queryListChannel.action",13 data: params,14 type: "post",15 dataType: "text",16 success: function (result) {17 $("#channelListTbody").replaceWith(result);18 ingridTable(params);19 }20 });21 }
这个函数有2点需要注意：
1 获取页面之后，应该使用replaceWith函数而非html函数。
2 获取完页面后需要再调用一次ingridTable函数，并将筛选的参数传递给该函数，下次翻页中则会用到。
就这样，整个翻页加筛选流程就结束了！
是这样吗？
让我们再看一下此时的情况。
初始页面如下：
然后进行翻页：
然后此时我们进行筛选：
发现问题了吧？？？
好吧，放大看看。。
看出来了吧？从翻页结果中，我们可以看出型号为LL的只有5组数据，最多不过2页，但是我们在筛选完之后，会发现竟然还有9组数据，还有3页。
这时候我们去“审查元素”，
发现什么嘛，ingrid竟然再底部拼出来一个翻页条，我还一直以为它是属于底部的一部分呢。因此我们虽然在筛选后替换的tbody，但是最下面那条翻页条确实没有刷新的。
发现问题了就比较好解决了（呵呵），将ingrid源代码中的对应地方修改为：
1 //孙庚泽，修改于2014年12月10日 15:19:02，保证了table的id不被变动，下次还可以获取，但是也就取消掉该控件对多个表使用的功能。 2 //var g_id = cfg.ingridIDPrefix + ‘_‘ + jQuery(this).attr(‘id‘) + ‘_‘ + tblIter; 3 var g_id = jQuery(this).attr(‘id‘); 4 g.attr(‘id‘, g_id); 5 var ok = jQuery("<div />").append(g[0]); 6 var pageBarId = g_id + ‘_‘ + cfg.pageBarIdSuffix; 7 var isFirst = !$(‘#‘ + pageBarId); 8 if (cfg.paging && cfg.p_id == null) { 9 if (!isFirst) {10 $(‘#‘ + pageBarId).remove();11 }12 p.attr(‘id‘, pageBarId);13 ok.append(p);14 }
还有：
1 var isFirst = !hClass || hClass.indexOf(cfg.headerClass) == -1;//孙庚泽，修改于2014年12月10日 15:19:02，防止出现多次表头。2 if (isFirst) {3 h.height(cfg.headerHeight).addClass(cfg.headerClass).height(cfg.headerHeight).extend({cols: cols});4 //.....5 }
ok，这样就可以了！
注：ingrid控件貌似有一个小Bug，当进行翻页时，访问翻页连接的次数会随着翻页次数的增多呈指数级上涨，即在第一页点击下一页，会访问一次page=2的连接，然后此时再点击下一页，则会访问2次page=3的连接，此时如果再点击下一页，则会访问4次page=4的连接，以此类推。这样会给服务器带来很大的负荷。针对这种情况，将如下代码注释掉即可。
if (cfg.paging) { pv.updateViewInfo(totr, data.page); pb3.click(nextPage);}
SSH框架中使用jquery-ingrid实现翻页+筛选