1、先給出問(wèn)題解決后的代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><base href="<%=basePath%>"><title>添加優(yōu)惠券步驟2</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><jsp:include page="../layout/script.jsp"></jsp:include><c:set var="getDataUrl" value="${pageContext.request.contextPath}/goods/getGoodsOnSale" scope="request" /><script type="text/javascript">var $dg;var $grid;var ids = '';var idsArray = new Array();$(function() {$dg = $("#dg");$grid=$dg.datagrid({url : "${getDataUrl}",width : 'auto',height : $(this).height()-85,pagination:true,rownumbers:true,border:true,striped:true,singleSelect:false,checkOnSelect:true,selectOnCheck:true,onBeforeLoad:function(data){addSelectedGoodsIdToArray();},onLoadSuccess:function(data){var rowsData = data.rows;if(idsArray.length!=0){$.each(idsArray,function(i,e){for(var index=0;index<rowsData.length;index++){if(rowsData[index].goodsId==e){$dg.datagrid('selectRow',index);}}});}},onUncheck:function(rowIndex,rowData){if(idsArray.length == 0){}else{for(var index=0;index<idsArray.length;index++){if(idsArray[index] == rowData.goodsId){removeArrayValue(idsArray,rowData.goodsId);break;}}}},columns : [ [ {field:'ck',checkbox:true},{field : 'goodsId',hidden:true},{field : 'goodsName',title : '商品標(biāo)題',width : parseInt($(this).width()*0.3)},{field : 'img1',title : '圖片',width : parseInt($(this).width()*0.1),align : 'left',formatter:function(value,row){if(row.img1 != '')return "<img src = '"+row.img1+"'/>";elsereturn "<img src = '"+row.img1+"'/>"; }},{field : 'categoryId',title : '分類',width : parseInt($(this).width()*0.1),align : 'left',formatter:function(value,row){var cates = row.categorys;for(var i=0;i<cates.length;i++){if(cates[i].categoryId === row.categoryId){return cates[i].categoryName;}} }},{field : 'goodsNumber',title : '庫(kù)存',width : parseInt($(this).width()*0.1)},{field : 'isOnSale',title : '上架',width :parseInt($(this).width()*0.1),align : 'left',formatter:function(value,row){if(row.isOnSale){return "<font color=green>是<font>";} else{return "<font color=red>否<font>"; }}},{field : 'lastUpdate',title : '上架時(shí)間',width : parseInt($(this).width()*0.1),align : 'left',formatter:function(value,row){var thisDate = new Date(row.lastUpdate);return formatterDate(thisDate);}}] ],toolbar:'#tb'});//搜索框/* $("#searchbox").searchbox({ menu:"#mm", prompt :'模糊查詢',searcher:function(value,name){ var str="{/"searchName/":/""+name+"/",/"searchValue/":/""+value+"/"}";var obj = eval('('+str+')');$dg.datagrid('reload',obj); }}); */});function addCheckedGoodIdToArray(rowIndex,rowData){console.log("_________________________");var idsArrayLength = idsArray.length;if(idsArray.length == 0){console.log("push:"+rowData.goodsId);idsArray.push(rowData.goodsId);}else{for(var index=0;index<idsArrayLength;index++){if(idsArray[index] == rowData.goodsId){console.log("remove:"+rowData.goodsId);removeArrayValue(idsArray,rowData.goodsId);break;}if(index == idsArrayLength-1){console.log("push:"+rowData.goodsId);idsArray.push(rowData.goodsId);}}}console.log("---------------");for(var index=0;index<idsArray.length;index++){console.log(idsArray[index]);}console.log("---------------");}function addSelectedGoodsIdToArray(){var rows = $dg.datagrid('getSelections');if(rows.length>0){$.each(rows,function(i,row){if(idsArray.length == 0){idsArray.push(row.goodsId);}else{for(var index=0;index<idsArray.length;index++){if(idsArray[index] == row.goodsId){break;}if(index == idsArray.length-1){idsArray.push(row.goodsId);break;}}}});}}function removeSelectedGoodsIdToArray(rows){//var rows = $dg.datagrid('getSelections');if(rows.length>0){$.each(rows,function(i,row){if(idsArray.length > 0){for(var index=0;index<idsArray.length;index++){removeArrayValue(idsArray,row.goodsId);}}});}}function nextStep() {addSelectedGoodsIdToArray();console.log("ids length"+idsArray.length);if(idsArray.length>0){ids = '';for(var index=0;index<idsArray.length;index++){ids += idsArray[index];if(index != idsArray.length-1){ids += ',';}}}else{}parent.$.modalDialog({title : '商品排序',width : 1632,height : 830,href : "${pageContext.request.contextPath}/coupons/showAddStep3?goodsId="+ids,onLoad:function(){},buttons : [ {text : '下一步',iconCls : 'icon-ok',handler : function() {parent.$.modalDialog.openner= $grid;//因?yàn)樘砑映晒χ螅枰⑿逻@個(gè)dataGrid，所以先預(yù)定義好var f = parent.$.modalDialog.handler.find("#form");f.submit();}}, {text : '取消',iconCls : 'icon-cancel',handler : function() {parent.$.modalDialog.handler.dialog('destroy');parent.$.modalDialog.handler = undefined;}}]});}//編輯function editOneGood() {//console.log("run edit");var row = $dg.datagrid('getSelected');if (row) {window.location.href="${pageContext.request.contextPath}/goods/showEditGoods?goodsId="+row.goodsId;}else{parent.$.messager.show({title :"提示",msg :"請(qǐng)選擇一行記錄!",timeout : 1000 * 2});}}function addOneGood() {//console.log("run edit");window.location.href="${pageContext.request.contextPath}/goods/showAddGood";}//高級(jí)搜索 刪除 rowfunction tbCompanySearchRemove(curr) {$(curr).closest('tr').remove();}//高級(jí)查詢function tbsCompanySearch() {jqueryUtil.gradeSearch($dg,"#tbCompanySearchFm","jsp/company/companySearchDlg.jsp");}/*** 格式化日期（含時(shí)間）*/function formatterDate(date) {var datetime = date.getFullYear()+ "-"http:// "年"+ ((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : "0"+ (date.getMonth() + 1))+ "-"http:// "月"+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())+ " "+ (date.getHours() < 10 ? "0" + date.getHours() : date.getHours())+ ":"+ (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes())+ ":"+ (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());return datetime;}function removeArrayValue(arr, val) {for(var i=0; i<arr.length; i++) {if(arr[i] == val) {arr.splice(i, 1);break;}}}</script></head><body><div data-options="region:'center',border : false"><div class="well well-small" style="margin-left: 5px;margin-top: 5px"><span class="badge">添加優(yōu)惠券步驟</span><p>1：填寫(xiě)優(yōu)惠券基本信息 ―――――――――― <span class="label-info"><strong>2：選擇優(yōu)惠券中的商品</strong></span> ―――――――――― 3：保存并生成優(yōu)惠券</p></div><div id="tb" style="padding:2px 0"><table cellpadding="0" cellspacing="0"><tr><td style="padding-left:2px"><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="nextStep()">下一步</a><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="">取消</a></td><!-- <td style="padding-left:2px"><input id="searchbox" type="text"/></td> --><!-- <td style="padding-left:2px"><a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="tbsCompanySearch();">高級(jí)查詢</a></td>--></tr></table></div><table id="dg" title="添加優(yōu)惠券步驟2"></table></div> </body></html>2、頁(yè)面大概的樣子
3、問(wèn)題及解答，問(wèn)題層層遞進(jìn)，每一個(gè)問(wèn)題的前提是前一個(gè)問(wèn)題已經(jīng)解決。
已知：一個(gè)普通的datagrid表格。
問(wèn)題1：如何實(shí)現(xiàn)翻頁(yè)。
前臺(tái)：pagination:true，表示顯示分頁(yè)toolbar。
后臺(tái)：
@RequestMapping("/getGoodsOnSale")@ResponseBodypublic GridModel getGoodsOnSale(HttpServletRequest request, @RequestParam("page") Integer page,@RequestParam("rows") Integer rows) {Integer userRight = (Integer)(LoginController.getFromSession(request, ConstantsUtil.SESSION_USER_RIGHT));List<Goods> goods = new ArrayList<Goods>();Long total = new Long();if(userRight.equals(ConstantsUtil.USER_RIGHTS_ADMIN)){goods = goodsService.getGoodsOnSale(page, rows);total = goodsService.getGoodsOnSaleCount();}else{List<Brand> brands = (List<Brand>)(LoginController.getFromSession(request, ConstantsUtil.SESSION_USER_BRANDS));goods = goodsService.getGoodsOnSale(brands,page, rows);total = goodsService.getGoodsOnSaleCount(brands);}GridModel gridModel = getGoods(goods, request);gridModel.setTotal(total);return gridModel;}說(shuō)明：后臺(tái)從request.getParameter里取兩個(gè)參數(shù)，page和rows，分別代表當(dāng)前的頁(yè)數(shù)及每頁(yè)顯示幾行數(shù)據(jù)。total是總數(shù)據(jù)數(shù)。
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;}}問(wèn)題2：如何在datagrid表格里第一列顯示checkbox，并且讓行選中和checkbox選中等同?
答：
1、singleSelect：false，設(shè)置表格為復(fù)選模式
2、{field:'ck',checkbox:true}，這里面的checkbox:true表示該列顯示復(fù)選按鈕。
2、查看easyUI的文檔：http://www.jeasyui.net/plugins/183.html可以得知兩個(gè)屬性――checkOnSelect和selectOnCheck。
checkOnSelect:如果設(shè)置為 true，當(dāng)用戶點(diǎn)擊某一行時(shí)，則會(huì)選中/取消選中復(fù)選框。如果設(shè)置為 false 時(shí)，只有當(dāng)用戶點(diǎn)擊了復(fù)選框時(shí)，才會(huì)選中/取消選中復(fù)選框。
selectOnCheck:如果設(shè)置為 true，點(diǎn)擊復(fù)選框?qū)?huì)選中該行。如果設(shè)置為 false，選中該行將不會(huì)選中復(fù)選框。
所以，將這兩個(gè)屬性置為true。
問(wèn)題3：如何在執(zhí)行翻頁(yè)以前將被選中的行的主鍵保存起來(lái)
答：此問(wèn)題可分解為以下兩個(gè)問(wèn)題：
1、如何將勾選中的行保存起來(lái)
因?yàn)榉?yè)是重新到后臺(tái)取下一頁(yè)數(shù)據(jù)，也就是數(shù)據(jù)重新加載的過(guò)程，所以可以考慮在onBeforeLoad時(shí)做相關(guān)處理。
先定義好一個(gè)數(shù)組idsArray用來(lái)保存選中行的主鍵，再用$dg.datagrid('getSelections')取得選中的行。也就是105行的方法addSelectedGoodsIdToArray做的事情。
下面看上邊發(fā)的大概樣子圖片，點(diǎn)擊“下一步”是將當(dāng)前datagrid中被選中的內(nèi)容提交到后臺(tái)處理，即頁(yè)面中的function nextStep()要做的事，所以在netStep()中需要首先執(zhí)行
一下addSelectedGoodsIdToArray，將選中的內(nèi)容保存起來(lái)，否則當(dāng)數(shù)據(jù)提交后臺(tái)時(shí)，當(dāng)前這一頁(yè)選中的行并沒(méi)有存起來(lái)，因?yàn)楫?dāng)前這一頁(yè)的addSelectedGoodsIdToArray并未觸發(fā)執(zhí)行。
2、如何將選中以后又取消選中的行從保存的記錄中刪除
經(jīng)過(guò)測(cè)試，在我將checkOnSelect和selectOnCheck都設(shè)為true以后， onClickRow在被調(diào)用時(shí)會(huì)自動(dòng)調(diào)用onCheck或onUncheck(請(qǐng)注意此處的拼寫(xiě)，后一個(gè)check的首字母是小寫(xiě)，如果誤
寫(xiě)成大寫(xiě)就會(huì)失效)，而onCheck和onUncheck在執(zhí)行時(shí)并不會(huì)自動(dòng)調(diào)用onClickRow。所以，如果我們想要在用戶取消勾選一行以后做點(diǎn)事，只要在onUncheck里做就行了。這就是52行做的事。
問(wèn)題4：如何在datagrid數(shù)據(jù)加載完之后自動(dòng)將被選中的行選中？
答：因?yàn)榉?yè)是重新到后臺(tái)取下一頁(yè)數(shù)據(jù)，也就是數(shù)據(jù)重新加載的過(guò)程。所以只要在onLoadSuccess中解決這個(gè)勾選的問(wèn)題，那么當(dāng)向前翻頁(yè)的時(shí)候，之前選中的行也會(huì)實(shí)現(xiàn)自動(dòng)勾選。
1、onLoadSuccess方法中傳進(jìn)來(lái)的data參數(shù)，它的data.rows()表示當(dāng)前datagrid中的數(shù)據(jù)。
2、$dg.datagrid('selectRow',index);將第index行的數(shù)據(jù)選中。這里的index從零開(kāi)始，index不等于當(dāng)前行的數(shù)據(jù)的主鍵，而是表格的自然行號(hào)。
3、data.rows().goodsId:取得當(dāng)前行數(shù)據(jù)的goodsId屬性的值
知道了以上三點(diǎn)，大概就清楚了，遍歷idsArray，將當(dāng)前行的主鍵與之匹配，匹配上了就勾選。
注意第三點(diǎn)，我們選擇一列值的前提是該列被顯示在表格中，如果想隱藏它，只需hidden:true。
以上所述是小編給大家介紹的jQuery EasyUI datagrid在翻頁(yè)以后仍能記錄被選中行的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
