jqGrid 翻頁行保持選中

阿新 • • 發佈：2019-01-20

jgGrid表格外掛按照正常情況下，設定multiselect:true,，就可以實現多選。但是當資料分頁顯示時，翻頁後，之前已經選擇的就會失效。

這裡通過設定一個全域性變數，快取已經選中的資料項，來實現翻頁後保持選中。

jqGrid 頁面程式碼

先是一個使用 jgGrid 的頁面程式碼，裡面的js、css檔案可到相應的官網下載，jgGrid 載入的是本地資料。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title> 

    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid-bootstrap.css">
    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script> 

    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script 
>
</head>
<body>
    <div>
        <table id="grid"></table>
        <div id="pager"></div>
    </div>
<script type="text/javascript">
    $.jgrid.defaults.width = 780;
    $.jgrid.defaults.styleUI = 'Bootstrap';
    var data = [
        {"id":1,"name":"test1","desc":"desc1"},
        {"id":2,"name":"test2","desc":"desc2"},
        {"id":3,"name":"test3","desc":"desc3"},
        {"id":4,"name":"test4","desc":"desc4"},
        {"id":5,"name":"test5","desc":"desc5"},
        {"id":6,"name":"test6","desc":"desc6"},
        {"id":7,"name":"test7","desc":"desc7"},
        {"id":8,"name":"test8","desc":"desc8"},
        {"id":9,"name":"test9","desc":"desc9"},
        {"id":10,"name":"test10","desc":"desc10"},

        {"id":11,"name":"test11","desc":"desc11"},
        {"id":12,"name":"test12","desc":"desc12"},
        {"id":13,"name":"test13","desc":"desc13"},
        {"id":14,"name":"test14","desc":"desc14"},
        {"id":15,"name":"test15","desc":"desc15"},
        {"id":16,"name":"test16","desc":"desc16"},
        {"id":17,"name":"test17","desc":"desc17"},
        {"id":18,"name":"test18","desc":"desc18"},
        {"id":19,"name":"test19","desc":"desc19"},
        {"id":20,"name":"test20","desc":"desc20"},

        {"id":21,"name":"test21","desc":"desc21"},
        {"id":22,"name":"test22","desc":"desc22"},
        {"id":23,"name":"test23","desc":"desc23"},
        {"id":24,"name":"test24","desc":"desc24"},
        {"id":25,"name":"test25","desc":"desc25"},
        {"id":26,"name":"test26","desc":"desc26"},
    ]

    $("#grid").jqGrid({
        data:data,
        multiselect:true,
        shrinkToFit:true,
        datatype: "local",
        autowidth:true,
        colModel:[
            {name:'id',key:true,},
            {name:'name'},
            {name:'desc'},  
        ],
        height: 450,
        viewrecords: true,
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager',
    })
    jQuery("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
</script>
</body>
</html>

jqGrid 顯示採用 bootstrap 樣式。此時已經載入了一張jgGrid 的表格。

設定行保持選中

表格中影響行選中狀態的時刻有這麼幾處：

    1、表格載入時需要選中原來已經選的項
    2、點選某一行時會（取消）選中該行
    3、點選全選時會（取消）選中本頁所有行

所以就需要對這幾個情況進行處理。

　表格載入時選中

此時可以用 jqGrid 外掛中的gridComplete 函式。表格資料載入完成、排序和翻頁都會觸發此事件。

在這之前，會先用一個全域性變數儲存已經選中的行

var item_selected = ["1","3","6"];

然後gridComplete 函式中就可以這樣寫

gridComplete:function() {
    var _this = this;
    if(item_selected.length>0){
        for (var i = 0; i < item_selected.length; i++) {
            $(_this).jqGrid('setSelection',item_selected[i]);
        }               
    }
},

此時當我們重新整理、翻頁、排序時，表格都會把重新整理前已選中的行繼續選中。

點選一行或點選全選

由於會涉及到 Array 的操作，這裡使用 lodash.js 來處理。
1、點選單行
這裡用beforeSelectRow 這個函式來處理，主要實現：

    當點選選中行時，將選中行id新增到全域性變數中
    當點選取消選中行時，將行id從全域性變數中移除

beforeSelectRow:function(rowid, e) {
    var _this = this;
    var index = _.indexOf(item_selected, rowid);
    if(index==-1){
        item_selected.push(rowid);
    }
    else{
        item_selected = _.pull(item_selected, rowid);
    }
},

2、點選全選
點選全選和點選一行類似，只不過現在選的行id變成了行id陣列。

onSelectAll:function(aRowids,status) {
    var _this = this;
    if(status){
        item_selected = _.union(item_selected, aRowids);
    }else{
        item_selected = _.difference(item_selected, aRowids);
    }           
},

此時，表格已經能實現保持行選中了。
對於點選單行時，不用onSelectRow ，主要是因為在

$(_this).jqGrid('setSelection',item_selected[i]);

其中設定選中行也會呼叫onSelectRow，容易混淆。

最後是整個程式碼。。。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid-bootstrap.css">
    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script>
</head>
<body>
    <div>
        <table id="grid"></table>
        <div id="pager"></div>
    </div>
    <script type="text/javascript" src="lodash.min.js"></script>
<script type="text/javascript">
    $.jgrid.defaults.width = 780;
    $.jgrid.defaults.styleUI = 'Bootstrap';
    var data = [
        {"id":1,"name":"test1","desc":"desc1"},
        {"id":2,"name":"test2","desc":"desc2"},
        {"id":3,"name":"test3","desc":"desc3"},
        {"id":4,"name":"test4","desc":"desc4"},
        {"id":5,"name":"test5","desc":"desc5"},
        {"id":6,"name":"test6","desc":"desc6"},
        {"id":7,"name":"test7","desc":"desc7"},
        {"id":8,"name":"test8","desc":"desc8"},
        {"id":9,"name":"test9","desc":"desc9"},
        {"id":10,"name":"test10","desc":"desc10"},

        {"id":11,"name":"test11","desc":"desc11"},
        {"id":12,"name":"test12","desc":"desc12"},
        {"id":13,"name":"test13","desc":"desc13"},
        {"id":14,"name":"test14","desc":"desc14"},
        {"id":15,"name":"test15","desc":"desc15"},
        {"id":16,"name":"test16","desc":"desc16"},
        {"id":17,"name":"test17","desc":"desc17"},
        {"id":18,"name":"test18","desc":"desc18"},
        {"id":19,"name":"test19","desc":"desc19"},
        {"id":20,"name":"test20","desc":"desc20"},

        {"id":21,"name":"test21","desc":"desc21"},
        {"id":22,"name":"test22","desc":"desc22"},
        {"id":23,"name":"test23","desc":"desc23"},
        {"id":24,"name":"test24","desc":"desc24"},
        {"id":25,"name":"test25","desc":"desc25"},
        {"id":26,"name":"test26","desc":"desc26"},
    ]

    var item_selected = ["1","3","6"];
    $("#grid").jqGrid({
        data:data,
        multiselect:true,
        shrinkToFit:true,
        datatype: "local",
        autowidth:true,
        colModel:[
            {name:'id',key:true,},
            {name:'name'},
            {name:'desc'},  
        ],
        height: 450,
        viewrecords: true,
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager',
        gridComplete:function() {
            var _this = this;
            if(item_selected.length>0){
                for (var i = 0; i < item_selected.length; i++) {
                    $(_this).jqGrid('setSelection',item_selected[i]);
                }               
            }
        },
        onSelectAll:function(aRowids,status) {
            var _this = this;
            if(status){
                item_selected = _.union(item_selected, aRowids);
            }else{
                item_selected = _.difference(item_selected, aRowids);
            }           
        },
        beforeSelectRow:function(rowid, e) {
            var _this = this;
            var index = _.indexOf(item_selected, rowid);
            if(index==-1){
                item_selected.push(rowid);
            }
            else{
                item_selected = _.pull(item_selected, rowid);
            }
        },
    })
    jQuery("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
</script>
</body>
</html>

jqGrid 翻頁行保持選中

jgGrid表格外掛按照正常情況下，設定multiselect:true,，就可以實現多選。但是當資料分頁顯示時，翻頁後，之前已經選擇的就會失效。這裡通過設定一個全域性變數，快取已經選中的資料項，來實現翻頁後保持選中。 jqGrid 頁面程式碼先是

ExtJS Grid 分頁時保持選中的簡單實現方法

ExtJS中經常要用到分頁和選擇，但是當選擇遇到分頁的時候，杯具就發生了，每一次翻頁，其它頁面的選中行就消失了。Ext 沒有為我們提供內建的保持選中的支援，只有我們自己動手來實現了。先說一下具體的思路吧：首先在頁面中建立一個數組，用來儲存Grid的所有選中行，然後分別處理selModel的select和uns

extjs4當中的gridpanel，翻頁後保持複選框內容。

這還真意外的花了一些時間，趕緊寫下來有助於記憶…… 說真的對extjs控制元件命令瞭解的太少了，還得多下點功夫才行…… Ext.extend(DsTruck.FinanceOut, Ext.Panel, { PageSize: 6,//用於控制每頁的行數

jquery jqGrid翻頁記錄原來資料並勾選已選擇的資料

//新建一個數組，存放已勾選的id var arrayNewList = new Array(); $("#proList").jqGrid({ url:"<%= basePath %>/mPromo/selectProList.do", queryFormId:"queryForm

jqgrid使用陣列，實現選中再翻頁還是選中

//這三個函式一起組成jQgrid選中，並且翻頁的時候也能選中 //全域性陣列，接收每一次選中的行資料 //KPI_ID 這個是一行資料的唯一id，每一行都有一個 var selectArr = []; gridComplete:function

多選，jqgrid選中，點選翻頁還是選中，

gridComplete:function() { var _this = this; &nb

EasyUI datagrid實現翻頁保持選中狀態

轉載自：http://blog.csdn.net/junlong750/article/details/51470834 1、首先設定datagrid屬性的idField主鍵，這裡假如為id，若idField為其他的，記住下面的程式碼裡的 id也要做相應的修改 2、建

vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件

each ray 如果部分 list 插件下拉 ast 頁面數據 vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件/庫一提到移動端的下拉刷新上拉翻頁，你可能就會想到iScroll插件，沒錯iScroll是一個高性能，資源占用

miniUI-SelectGrid 彈出選擇表格-翻頁選中

grid ret onload change urn row lse targe UNC miniUI-SelectGrid 彈出選擇表格-翻頁選中，沒有辦法翻頁後一並連之前翻頁選中的一起提交解決辦法： //存儲已經選中的元素 var selectMaps =

###①datatable客戶端分頁,全選只能選中一頁(能力有限，(雖然不是服務端分頁)，同事-老大都不知道)+ ②【動態新增刪除CheckBox的ID】 JQuery datatables 表頭複選框切換頁面時保持選中的問題

①datatable客戶端分頁,全選只能選中一頁(能力有限，(雖然不是服務端分頁)，同事-老大都不知道)。對於要解決的問題：【 JQuery datatables 表頭複選框切換頁面時保持選中的問題】 ==== 這個：https://blog.csdn.net/nihaoqiuli

bootstrap table 保留翻頁選中資料

$(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){ var datas = $.isArr

java實現小說閱讀器（功能：檢視全文、統計總行數/總頁碼數、查詢指定行、指定頁碼、實現翻頁）

1.任務要求：在DOS視窗下，實現檢視全文、統計總行數/總頁碼數、查詢指定行、指定頁碼、翻頁 2.閱讀器實現方式輸入1(檢視全文、統計總行數/總頁碼數、) 輸入2（讀取指定行，查詢其上下行）輸入+顯示下一行，輸入-顯示上一行，輸入bye返回上一級

簡單實現修改jqgrid的翻頁欄顯示效果

沙漠漁溏--時間小記:2018年8月2日 11:29:12 從今年五一開始接觸軟體開發行業，看到公司做的web程式應用很多jqgrid外掛，說句實話好多地方感覺好醜話不多說先上程式碼再看演示(寫的很糙,看網上沒有,僅做參考吧) js檔案 /*** *

vi 翻頁，行首，行末命令

整頁翻頁 ctrl-f ctrl-b f就是forword b就是backward 翻半頁 ctrl-d ctlr-u d=down u=up 滾一行 ctrl-e ctrl-y zz 讓游標所雜的行居螢幕中央 zt 讓游標所雜的行居螢幕最上一行 t=top zb

Android自己定義控件實戰——仿多看閱讀平移翻頁

mar pos sim androi 調用 andro return getview pan 轉載請聲明出處http://blog.csdn.net/zhongkejingwang/article/details/38728119 之前自己做的一個APP須要用到

django分頁及搜索後如何翻頁

如何我們 page 翻頁 gin 需要 log not url路徑 django自帶了Pagnator 導入 from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage 分頁 de

Flask添加翻頁功能（非sqlalchemy）

lis 習慣 send end roc cnblogs col eat () 最近做flask的項目，需要增加翻頁的功能，網上找的教程都是結合sqlalchemy的，可是我用的不是sqlalchemy，腫木辦呢？以下是我的做法一、前端　　1、傳遞頁碼　　前端我使用a

類似選項卡切換翻頁

fun apps index har 選項 image brush css 按鈕 <!DOCTYPE html> <html> <head> <title></title> <meta charset=

iOS 相似淘寶商品詳情查看翻頁效果的實現

nim anim bool with animate resource tlab 更改 tro 基本思路： 1、設置一個 UIScrollView 作為視圖底層，而且設置分頁為兩頁 2、然後在第一個分頁上加入一個 UITableView 而且設置表格

瀏覽器翻頁

page itl .exe cti sid __name__ cee pan __main__ from selenium import webdriver import time def capture(url, save_fn="capture.png"):

jqGrid 翻頁行保持選中

jqGrid 頁面程式碼

設定行保持選中

表格載入時選中

點選一行或點選全選

相關推薦

　表格載入時選中