jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實現(xiàn)代碼
更新時間：2016年08月15日 10:19:29 作者：izumi
這篇文章主要介紹了jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實現(xiàn)代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
1、先給出問題解決后的代碼
<%@ 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+"'/>";
else
return "<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 : '庫存',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 : '上架時間',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;//因為添加成功之后，需要刷新這個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 :"請選擇一行記錄!",
timeout : 1000 * 2
});
}
}
function addOneGood() {
//console.log("run edit");
window.location.href="${pageContext.request.contextPath}/goods/showAddGood";
}
//高級搜索 刪除 row
function tbCompanySearchRemove(curr) {
$(curr).closest('tr').remove();
}
//高級查詢
function tbsCompanySearch() {
jqueryUtil.gradeSearch($dg,"#tbCompanySearchFm","jsp/company/companySearchDlg.jsp");
}
/**
* 格式化日期（含時間）
*/
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：填寫優(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();">高級查詢</a>
</td>-->
</tr>
</table>
</div>
<table id="dg" title="添加優(yōu)惠券步驟2"></table>
</div>
</body>
</html>
2、頁面大概的樣子
3、問題及解答，問題層層遞進，每一個問題的前提是前一個問題已經(jīng)解決。
已知：一個普通的datagrid表格。
問題1：如何實現(xiàn)翻頁。
前臺：pagination:true，表示顯示分頁toolbar。
后臺：
@RequestMapping("/getGoodsOnSale")
@ResponseBody
public 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;
}
說明：后臺從request.getParameter里取兩個參數(shù)，page和rows，分別代表當(dāng)前的頁數(shù)及每頁顯示幾行數(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;
}
}
問題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可以得知兩個屬性——checkOnSelect和selectOnCheck。
checkOnSelect:如果設(shè)置為 true，當(dāng)用戶點擊某一行時，則會選中/取消選中復(fù)選框。如果設(shè)置為 false 時，只有當(dāng)用戶點擊了復(fù)選框時，才會選中/取消選中復(fù)選框。
selectOnCheck:如果設(shè)置為 true，點擊復(fù)選框?qū)x中該行。如果設(shè)置為 false，選中該行將不會選中復(fù)選框。
所以，將這兩個屬性置為true。
問題3：如何在執(zhí)行翻頁以前將被選中的行的主鍵保存起來
答：此問題可分解為以下兩個問題：
1、如何將勾選中的行保存起來
因為翻頁是重新到后臺取下一頁數(shù)據(jù)，也就是數(shù)據(jù)重新加載的過程，所以可以考慮在onBeforeLoad時做相關(guān)處理。
先定義好一個數(shù)組idsArray用來保存選中行的主鍵，再用$dg.datagrid('getSelections')取得選中的行。也就是105行的方法addSelectedGoodsIdToArray做的事情。
下面看上邊發(fā)的大概樣子圖片，點擊“下一步”是將當(dāng)前datagrid中被選中的內(nèi)容提交到后臺處理，即頁面中的function nextStep()要做的事，所以在netStep()中需要首先執(zhí)行
一下addSelectedGoodsIdToArray，將選中的內(nèi)容保存起來，否則當(dāng)數(shù)據(jù)提交后臺時，當(dāng)前這一頁選中的行并沒有存起來，因為當(dāng)前這一頁的addSelectedGoodsIdToArray并未觸發(fā)執(zhí)行。
2、如何將選中以后又取消選中的行從保存的記錄中刪除
經(jīng)過測試，在我將checkOnSelect和selectOnCheck都設(shè)為true以后， onClickRow在被調(diào)用時會自動調(diào)用onCheck或onUncheck(請注意此處的拼寫，后一個check的首字母是小寫，如果誤
寫成大寫就會失效)，而onCheck和onUncheck在執(zhí)行時并不會自動調(diào)用onClickRow。所以，如果我們想要在用戶取消勾選一行以后做點事，只要在onUncheck里做就行了。這就是52行做的事。
問題4：如何在datagrid數(shù)據(jù)加載完之后自動將被選中的行選中？
答：因為翻頁是重新到后臺取下一頁數(shù)據(jù)，也就是數(shù)據(jù)重新加載的過程。所以只要在onLoadSuccess中解決這個勾選的問題，那么當(dāng)向前翻頁的時候，之前選中的行也會實現(xiàn)自動勾選。
1、onLoadSuccess方法中傳進來的data參數(shù)，它的data.rows()表示當(dāng)前datagrid中的數(shù)據(jù)。
2、$dg.datagrid('selectRow',index);將第index行的數(shù)據(jù)選中。這里的index從零開始，index不等于當(dāng)前行的數(shù)據(jù)的主鍵，而是表格的自然行號。
3、data.rows().goodsId:取得當(dāng)前行數(shù)據(jù)的goodsId屬性的值
知道了以上三點，大概就清楚了，遍歷idsArray，將當(dāng)前行的主鍵與之匹配，匹配上了就勾選。
注意第三點，我們選擇一列值的前提是該列被顯示在表格中，如果想隱藏它，只需hidden:true。
以上所述是小編給大家介紹的jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實現(xiàn)代碼，希望對大家有所幫助,如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Easyui Datagrid自定義按鈕列(最后面的操作列)
- datagrid行內(nèi)按鈕(更新/刪除等)操作實現(xiàn)代碼
- easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法
- jquery Easyui Datagrid實現(xiàn)批量操作（編輯，刪除，添加）
- jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
- jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動
- jQuery Easyui DataGrid點擊某個單元格即進入編輯狀態(tài)焦點移開后保存數(shù)據(jù)
- EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼
相關(guān)文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單的文件上傳進度條效果，上傳文件時顯示上傳進度條，以百分比的形式顯示上傳進度，感興趣的小伙伴們可以參考一下2015-11-11
完美解決jQuery符號$與其他javascript 庫、框架沖突的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery符號$與其他javascript 庫、框架沖突的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了基于jquery實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料，具有一定的參考價值，感興趣的朋友可以參考一下2016-05-05
jQuery如何獲取同一個類標(biāo)簽的所有值(默認無法獲取)
jQuery總是只返回第一個類標(biāo)簽的值，所以無法達到我們的要求，那么jQuery如何獲取同一個類標(biāo)簽的所有的值，下面與大家分享方法2014-09-09
這篇文章主要介紹了JQ技術(shù)實現(xiàn)注冊頁面帶有校驗密碼強度,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了Jquery插件easyUi實現(xiàn)表單驗證示例，需要的朋友可以參考下2015-12-12
jQuery 是最流行也是使用最廣泛的 JavaScript 框架，它簡化了 HTML 文檔操作，事件處理，動畫效果和 Ajax 交互。下面向大家分享8個優(yōu)秀的 jQuery 倒計時插件和教程2011-12-12
jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表（可搜索、可分頁）
select2是一款jQuery插件，是普通form表單select組件的升級版。 接下來通過本文給大家介紹jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表（可搜索、可分頁），需要的的朋友參考下吧2017-05-05
看完jquery基礎(chǔ)教程做的筆記，筆記并不適合所有人，覺得好，可以看，覺得不好，可以不看。2008-07-07
這篇文章主要為大家詳細介紹了jquery對象訪問是什么及使用方法介紹，感興趣的小伙伴們可以參考一下2016-05-05