标签：
1、先给出问题解决后的代码
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 9 <html> 10 <head> 11 <base href="<%=basePath%>"> 12 <title>添加优惠券步骤2</title> 13 <meta http-equiv="pragma" content="no-cache"> 14 <meta http-equiv="cache-control" content="no-cache"> 15 <meta http-equiv="expires" content="0"> 16 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 17 <jsp:include page="../layout/script.jsp"></jsp:include> 18 <c:set var="getDataUrl" value="${pageContext.request.contextPath}/goods/getGoodsOnSale" scope="request" /> 19 <script type="text/javascript"> 20 var $dg; 21 var $grid; 22 var ids = ‘‘; 23 var idsArray = new Array(); 24 $(function() { 25 $dg = $("#dg"); 26 $grid=$dg.datagrid({ 27 url : "${getDataUrl}", 28 width : ‘auto‘, 29 height : $(this).height()-85, 30 pagination:true, 31 rownumbers:true, 32 border:true, 33 striped:true, 34 singleSelect:false, 35 checkOnSelect:true, 36 selectOnCheck:true, 37 onBeforeLoad:function(data){ 38 addSelectedGoodsIdToArray(); 39 }, 40 onLoadSuccess:function(data){ 41 var rowsData = data.rows; 42 if(idsArray.length!=0){ 43 $.each(idsArray,function(i,e){ 44 for(var index=0;index<rowsData.length;index++){ 45 if(rowsData[index].goodsId==e){ 46 $dg.datagrid(‘selectRow‘,index); 47 } 48 } 49 }); 50 } 51 }, 52 columns : [ [ {field:‘ck‘,checkbox:true}, 53 {field : ‘goodsId‘,hidden:true}, 54 {field : ‘goodsName‘,title : ‘商品标题‘,width : parseInt($(this).width()*0.3)}, 55 {field : ‘img1‘,title : ‘图片‘,width : parseInt($(this).width()*0.1),align : ‘left‘, 56 formatter:function(value,row){ 57 if(row.img1 != ‘‘) 58 return "<img src = ‘"+row.img1+"‘/>"; 59 else 60 return "<img src = ‘"+row.img1+"‘/>"; 61 } 62 }, 63 {field : ‘categoryId‘,title : ‘分类‘,width : parseInt($(this).width()*0.1),align : ‘left‘, 64 formatter:function(value,row){ 65 var cates = row.categorys; 66 for(var i=0;i<cates.length;i++){ 67 if(cates[i].categoryId === row.categoryId){ 68 return cates[i].categoryName; 69 } 70 } 71 } 72 }, 73 {field : ‘goodsNumber‘,title : ‘库存‘,width : parseInt($(this).width()*0.1)}, 74 {field : ‘isOnSale‘,title : ‘上架‘,width :parseInt($(this).width()*0.1),align : ‘left‘, 75 formatter:function(value,row){ 76 if(row.isOnSale){ 77 return "<font color=green>是<font>"; 78 } else{ 79 return "<font color=red>否<font>"; 80 } 81 } 82 }, 83 {field : ‘lastUpdate‘,title : ‘上架时间‘,width : parseInt($(this).width()*0.1),align : ‘left‘, 84 formatter:function(value,row){ 85 var thisDate = new Date(row.lastUpdate); 86 return formatterDate(thisDate); 87 } 88 } 89 ] ],toolbar:‘#tb‘ 90 }); 91 92 //搜索框 93 /* $("#searchbox").searchbox({ 94 menu:"#mm", 95 prompt :‘模糊查询‘, 96 searcher:function(value,name){ 97 var str="{\"searchName\":\""+name+"\",\"searchValue\":\""+value+"\"}"; 98 var obj = eval(‘(‘+str+‘)‘); 99 $dg.datagrid(‘reload‘,obj); 100 } 101 102 }); */ 103 }); 104 105 function addSelectedGoodsIdToArray(){ 106 var rows = $dg.datagrid(‘getSelections‘); 107 if(rows.length>0){ 108 $.each(rows,function(i,row){ 109 if(idsArray.length == 0){ 110 idsArray.push(row.goodsId); 111 }else{ 112 for(var index=0;index<idsArray.length;index++){ 113 if(idsArray[index] == row.goodsId){ 114 break; 115 } 116 if(index == idsArray.length-1){ 117 idsArray.push(row.goodsId); 118 } 119 } 120 } 121 }); 122 } 123 } 124 125 function nextStep() { 126 addSelectedGoodsIdToArray(); 127 if(idsArray.length>0){ 128 ids = ‘‘; 129 for(var index=0;index<idsArray.length;index++){ 130 ids += idsArray[index]; 131 if(index != idsArray.length-1){ 132 ids += ‘,‘; 133 } 134 } 135 }else{ 136 parent.$.messager.show({ 137 title :"提示", 138 msg :"请选择商品!", 139 timeout : 1000 * 2 140 }); 141 } 142 parent.$.modalDialog({ 143 title : ‘商品排序‘, 144 width : 1632, 145 height : 830, 146 href : "${pageContext.request.contextPath}/coupons/showAddStep3?goodsId="+ids, 147 onLoad:function(){ 148 149 }, 150 buttons : [ { 151 text : ‘下一步‘, 152 iconCls : ‘icon-ok‘, 153 handler : function() { 154 parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好 155 var f = parent.$.modalDialog.handler.find("#form"); 156 f.submit(); 157 } 158 }, { 159 text : ‘取消‘, 160 iconCls : ‘icon-cancel‘, 161 handler : function() { 162 parent.$.modalDialog.handler.dialog(‘destroy‘); 163 parent.$.modalDialog.handler = undefined; 164 } 165 } 166 ] 167 }); 168 } 169 //编辑 170 function editOneGood() { 171 //console.log("run edit"); 172 var row = $dg.datagrid(‘getSelected‘); 173 if (row) { 174 window.location.href="${pageContext.request.contextPath}/goods/showEditGoods?goodsId="+row.goodsId; 175 }else{ 176 parent.$.messager.show({ 177 title :"提示", 178 msg :"请选择一行记录!", 179 timeout : 1000 * 2 180 }); 181 } 182 } 183 function addOneGood() { 184 //console.log("run edit"); 185 window.location.href="${pageContext.request.contextPath}/goods/showAddGood"; 186 } 187 188 //高级搜索 删除 row 189 function tbCompanySearchRemove(curr) { 190 $(curr).closest(‘tr‘).remove(); 191 } 192 //高级查询 193 function tbsCompanySearch() { 194 jqueryUtil.gradeSearch($dg,"#tbCompanySearchFm","jsp/company/companySearchDlg.jsp"); 195 } 196 197 /** 198 * 格式化日期（含时间） 199 */ 200 function formatterDate(date) { 201 var datetime = date.getFullYear() 202 + "-"// "年" 203 + ((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : "0" 204 + (date.getMonth() + 1)) 205 + "-"// "月" 206 + (date.getDate() < 10 ? "0" + date.getDate() : date 207 .getDate()) 208 + " " 209 + (date.getHours() < 10 ? "0" + date.getHours() : date 210 .getHours()) 211 + ":" 212 + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date 213 .getMinutes()) 214 + ":" 215 + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date 216 .getSeconds()); 217 return datetime; 218 } 219 </script> 220 </head> 221 <body> 222 <div data-options="region:‘center‘,border : false"> 223 <div class="well well-small" style="margin-left: 5px;margin-top: 5px"> 224 <span class="badge">添加优惠券步骤</span> 225 <p> 226 1：填写优惠券基本信息 —————————— <span class="label-info"><strong>2：选择优惠券中的商品</strong></span> —————————— 3：保存并生成优惠券 227 </p> 228 </div> 229 <div id="tb" style="padding:2px 0"> 230 <table cellpadding="0" cellspacing="0"> 231 <tr> 232 <td style="padding-left:2px"> 233 <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="nextStep()">下一步</a> 234 <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="">取消</a> 235 </td> 236 <!-- <td style="padding-left:2px"> 237 <input id="searchbox" type="text"/> 238 </td> --> 239 <!-- <td style="padding-left:2px"> 240 <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="tbsCompanySearch();">高级查询</a> 241 </td>--> 242 </tr> 243 </table> 244 </div> 245 <table id="dg" title="添加优惠券步骤2"></table> 246 </div> 247 </body> 248 </html>
2、页面大概的样子
3、问题及解答，问题层层递进，每一个问题的前提是前一个问题已经解决。
已知：一个普通的datagrid表格。
问题1：如何实现翻页。
前台：第30行，pagination:true，表示显示分页toolbar。
后台：
1 @RequestMapping("/getGoodsOnSale") 2 @ResponseBody 3 public GridModel getGoodsOnSale(HttpServletRequest request, @RequestParam("page") Integer page, 4 @RequestParam("rows") Integer rows) { 5 Integer userRight = (Integer)(LoginController.getFromSession(request, ConstantsUtil.SESSION_USER_RIGHT)); 6 List<Goods> goods = new ArrayList<Goods>(); 7 Long total = new Long(0); 8 if(userRight.equals(ConstantsUtil.USER_RIGHTS_ADMIN)){ 9 goods = goodsService.getGoodsOnSale(page, rows); 10 total = goodsService.getGoodsOnSaleCount(); 11 }else{ 12 List<Brand> brands = (List<Brand>)(LoginController.getFromSession(request, ConstantsUtil.SESSION_USER_BRANDS)); 13 goods = goodsService.getGoodsOnSale(brands,page, rows); 14 total = goodsService.getGoodsOnSaleCount(brands); 15 } 16 GridModel gridModel = getGoods(goods, request); 17 gridModel.setTotal(total); 18 return gridModel; 19 }
说明：后台从request.getParameter里取两个参数，page和rows，分别代表当前的页数及每页显示几行数据。total是总数据数。
GridModel类：
public class GridModel { private List rows= new ArrayList(); private Long total=0L; public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } public Long getTotal() { return total; } public void setTotal(Long total) { this.total = total; } }
问题2：如何在datagrid表格里第一列显示checkbox，并且让行选中和checkbox选中等同?
答：
1、第34行，singleSelect：false，设置表格为复选模式
2、第52行，{field:‘ck‘,checkbox:true}，这里面的checkbox:true表示该列显示复选按钮。
2、查看easyUI的文档：http://www.jeasyui.net/plugins/183.html可以得知两个属性——checkOnSelect和selectOnCheck。
checkOnSelect:如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框。
selectOnCheck:如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。
所以，将这两个属性置为true。即第35行和第36行。
问题3：如何在执行翻页以前将被选中的行的主键保存起来
答：因为翻页是重新到后台取下一页数据，也就是数据重新加载的过程，所以可以考虑在onBeforeLoad时做相关处理。
先定义好一个数组idsArray用来保存选中行的主键，再用$dg.datagrid(‘getSelections‘)取得选中的行。也就是105行的方法addSelectedGoodsIdToArray做的事情。
下面看上边发的大概样子图片，点击“下一步”是将当前datagrid中被选中的内容提交到后台处理，即页面中的function nextStep()要做的事，所以在netStep()中需要首先执行
一下addSelectedGoodsIdToArray，将选中的内容保存起来，否则当数据提交后台时，当前这一页选中的行并没有存起来，因为当前这一页的addSelectedGoodsIdToArray并未触发执行。
问题4：如何在datagrid数据加载完之后自动将被选中的行选中？
答：因为翻页是重新到后台取下一页数据，也就是数据重新加载的过程。所以只要在onLoadSuccess中解决这个勾选的问题，那么当向前翻页的时候，之前选中的行也会实现自动勾选。
1、onLoadSuccess方法中传进来的data参数，它的data.rows()表示当前datagrid中的数据。
2、$dg.datagrid(‘selectRow‘,index);将第index行的数据选中。这里的index从零开始，index不等于当前行的数据的主键，而是表格的自然行号。
3、data.rows().goodsId:取得当前行数据的goodsId属性的值
知道了以上三点，大概就清楚了，遍历idsArray，将当前行的主键与之匹配，匹配上了就勾选。
注意第三点，我们选择一列值的前提是该列被显示在表格中，所以必须要写第53行这一行，如果想隐藏它，只需hidden:true。
参考文章：http://www.jeasyui.net/plugins/183.html
http://my.oschina.net/u/1410278/blog/185614
jQuery easyUI的datagrid，如何在翻页以后仍能记录被选中的行
标签：
原文地址：http://www.cnblogs.com/mabaishui/p/5757637.html
