jqGrid 常用 總結 -1

来源:https://www.cnblogs.com/daniao11417/archive/2018/12/18/10135127.html
-Advertisement-
Play Games

這篇文章是因為，我們在做的後臺項目，裡面有大量的表格統計，這個不可能自己手寫，所以其中的表格使用的是jqgrid。 這個插件其實使用起來還是不錯的，裡面有很多的功能很贊。這篇博客就是自己的的一個記錄，也是對以後項目的一個參考。因為有一些代碼總是記不住。 首先就是引入這個插件所需要的js和css了，這 ...


　　這篇文章是因為，我們在做的後臺項目，裡面有大量的表格統計，這個不可能自己手寫，所以其中的表格使用的是jqgrid。

　　這個插件其實使用起來還是不錯的，裡面有很多的功能很贊。這篇博客就是自己的的一個記錄，也是對以後項目的一個參考。因為有一些代碼總是記不住。

首先就是引入這個插件所需要的js和css了，這個相信大家都不陌生，這個插件是基於jq的所以之前要引入jq，這個不詳細的贅述了。然後就是他的基本結構，很簡單，就是一個兩個標簽，一個是表格的內容，一個是翻頁功能。

1 <div class="jqGrid_wrapper">
2       <table id="table_list_1"></table>
3       <div id="pager_list_1"></div>
4  </div>
table_list_1為這個表格的主要顯示內容，而pager_list_1是顯示翻頁的地方，當然了， 如果你沒有翻頁的話，這個是可以不要的。
然後是比較重要的一部分了，我這裡直接粘貼代碼過來，然後在做解釋。
 1 $("#table_list_1").jqGrid({
 2                     url:'__URL__/data_search',
 3                     postData:{},
 4                     datatype: "json",
 5                     mtype: 'POST',
 6                     height: 450,
 7                     autowidth: true,
 8                     shrinkToFit: true,
 9                     rowNum: 14,
10                     rowList: [10, 20, 30],
11                     colNames: ['日期', '比賽id', '比賽名稱', '比賽報名人數', '比賽參與人數','比賽名次列表'],
12                     colModel: [
13                         {
14                             name: 'datetime',
15                             index: 'datetime',
16                             width: 60,
17                             sorttype: "int",
18                             sortable: false,
19                             align:'center'
20                         },
21                         {
22                             name: 'match_id',
23                             index: 'match_id',
24                             width: 60,
25                             sorttype: "int",
26                             sortable: false,
27                             align:'center'
28                         },
29                         {
30                             name: 'match_name',
31                             index: 'match_name',
32                             width: 60,
33                             sorttype: "int",
34                             sortable: false,
35                             align:'center'
36                         },
37                         {
38                             name: 'signup_user_num',
39                             index: 'signup_user_num',
40                             width: 60,
41                             sorttype: "int",
42                             sortable: false,
43                             align:'center'
44                         },
45                         {
46                             name: 'vaild_user_num',
47                             index: 'vaild_user_num',
48                             width: 60,
49                             sorttype: "int",
50                             sortable: false,
51                             align:'center',
52                             formatter:function(data){
53                                 if(data){
54                                     return data;
55                                 }else{
56                                     return "/";
57                                 }
58                             }
59                         },
60                         {
61                             name: 'isfinish',
62                             index: 'isfinish',
63                             width: 60,
64                             formatter: function() {
65                                 return '<input class="btn btn-w-m btn-info" type="button" value="詳情" onclick="getdata(this)"/>';
66                             },
67                             align:'center'
68                         }
69                     ],
70                     pager: "#pager_list_1",
71                     loadonce: true,
72                     viewrecords: true,
73                     caption: "比賽情況",
74                     hidegrid: false
75                 });

這裡的url是我們這個表格裡面的數據的介面，當然了也可以用ajax請求回來數據之後，在添加進去。下麵會說到這種辦法。

1.loadonce 

　　首先說下一，我被坑的最多的一個地方，就是上面的71行代碼中的一個，叫做loadonce 的屬性，我先把官方說明放在下麵： “如果為ture則數據只從伺服器端抓取一次，之後所有操作都是在客戶端執行，翻頁功能會被禁用”。其實這句話表述的前半句是正確的，只從伺服器載入一次數據，然後所有的操作都是在客戶端執行，但是，翻頁功能不是被禁用了。如果一次請求回來了，1000條數據，但是每頁只顯示100條的話，還是會有分頁的，只是這個時候，分頁功能是前端完成的，不會再次請求伺服器了。這也是我們通常說的假分頁。

　　如果你們的數據量真的很大的話，一下子全部把數據給前端這種方法肯定是不可以的，肯定是需要真正的分頁功能，讓後臺伺服器，每次只返回對應的頁數的數據，然後前端載入，這樣的話，loadonce可以設置為false。這裡還有一點需要註意的是，如果是真分頁的話，jqgrid回檢查一個參數，這個參數是全部的數據量，只有得到了這個參數，jqgrid才能正確的顯示總頁數，還有就是每次請求的page頁。這個就需要一個jsonReader 屬性來標識伺服器返回的欄位和jqgrid預設的欄位來一一對應。（最好讓你們的伺服器返回的就按照jqgrid這樣直接返回，這樣就不需要一一對應了。）

jsonReader : {   

     root: "rows",
       
     page: "page",
       
     total: "total",
       
     records: "records",
       
     repeatitems: true,
       
     cell: "cell", 
       
     id: "id",
        
     userdata: "userdata",
       
     subgrid: {
     
         root:"rows",
        
        repeatitems: true,
           
           cell:"cell"
         
     }

放一個我們現在後臺返回的數據格式，直接看圖片吧，相信大家一看就能明白，total是總頁數，records是總數據量。

這個截圖就是後臺返回的數據格式，我們不用整理。如果後臺不是這樣的格式，那麼按照上面的自己整理。

2.數據格式化和自定義--formatter

　　因為是列表，會遇到很種數據格式，但是後臺返回的不一定是能直接顯示在頁面上的，有的可能需要前端自己處理一下數據。比如後臺給返回了一個時間戳，但是我們需要把他顯示成正確的時間格式，或者，後臺返回的是0和1，但是0代表的是未通過，而1表示是通過，這個時候就需要前端格式化數據。我們用到的就是formatter

1 {
2　　name:"order_id",
3　　width:160,
4　　formatter: function(cellvalue,options,rowObject){
5　　　　return act_formatter(rowObject);
6　　　　console.log(rowObject);
7　　}
8},

這裡面我們是直接寫的一個函數，其中會有三個參數，我們一般常用的就是cellvalue，和rowObject這兩個。其中，只有你的name和返回的數據中的json的鍵名對應起來的話，這裡cellvalue就是返回的這個鍵值。這個時候我們就能直接寫if判斷，然後return返回就可以了。如果你想著得到其他的數據，可以寫一個name是在返回的數據中沒有對應的鍵名的，這樣，rowObject就能得到這一行的所有的數據了，這裡我們可以嘗試著列印一遍數據就可以了。

其中我比較常用的是return整個行，也就是數據全部在act_formatter這個函數中，下麵我把這個函數寫在下麵。

function act_formatter(rowObject){ //操作中需要的格式化按鈕
                var ags = '';
                for(a in rowObject){
                    ags += a+'="'+''+rowObject[a]+'" ';
                }
                var str = "";
                str += '<input onclick="change(this)" '+ags+' type="button" value="刪除"  data-toggle="modal" data-target="#delModal2" class="btn btn-danger" /> ';
                str += '<input onclick="change(this)" '+ags+' type="button" value="註銷"  data-toggle="modal" data-target="#delModal" class="btn btn-danger" /> ';
                str += '<input onclick="free(this)" '+ags+' type="button" value="續費"  data-toggle="modal" data-target="#" class="btn  btn-success" /> ';
                str += '<input onclick="free_img(this)" '+ags+' type="button" value="圖片服務"  data-toggle="modal" data-target="#" class="btn  btn-success" /> ';
                str+="</br>"
                //str += '<input onclick="watch_free(this)" '+ags+' type="button" value="支付鏈接"  data-toggle="modal" data-target="#newModal8" class="btn  btn-success" /> ';
                //console.log(is_break);
                
                    //if(is_break==1){ //是否斷開微信
                        str += '<input onclick="change_gid_type(this)" '+ags+' class="btn btn-info" type="button" data-toggle="modal" data-target="#newModal5" value="修改"  />';
                    //}else if(is_break==0){
                        str += '<input onclick="get_check(this)" '+ags+' class="btn btn-info" type="button" data-toggle="modal" data-target="#" value="綁定微信"  />';
                    //}else if(is_break==2){

                    //}
                str +=     '<input onclick="settime(this)" '+ags+' type="button" value="設置"  data-toggle="modal" data-target="#newModal9" class="btn btn-info" /> ';
                return str;    
            }

這段代碼是在一行表的最後，會有一列是操作按鈕，這個時候，會需要表格中比較多的數據，當然了，我們可以只添加上需要的這一條數據，也可以把這個表的所有的數據都添加上。這樣比較方便我們操作。然後裡面的函數，比如change（this），然後裡面寫入

$(t).attr("pid")這個就能得到相應的值。 　　上面的比較通用的方法，不管是怎麼格式數據，都可以用的，其實jqgrid是自帶格式化數據的，但是樣式有限，我用的比較多的一個是保留兩位小數。當然了這個功能用咱們上面的辦法，肯定是可以的。但是我們也要瞭解一下jqgrid 的用法。 
1 {
2                 name:'accounted_data',
3                 align : 'center',
4                 formatter:"number",
5                 formatoptions:{
6                     decimalPlaces:2
7                 },
8             }

“number”就是會把這一列當做數字處理，然後下麵的formatoptions是這個數字的選項。decimalPlaces是保留的小數位數，我寫的2就是保留兩位小數(這裡需要註意的是，直接寫上2就行了，不要加引號)，當然了，這裡面還有其他的用法，附上一個鏈接，大家自己去看去實踐。

3.重新載入數據

　　重新載入數據，其實用的比較多，通常就是因為表格中的數據量比較大，不能直觀的看需需要的數據，所以就需要篩選一下數據，增加篩選條件，然後重新載入一遍數據。如果是載入本地的數據的話， 其實就跟jqgrid沒有什麼太大的關係了，只需要清楚一遍數據，然後重新載入就好了。不過大部分的情況不是這樣的，是直接要把所需要的數據傳給jqgrid，然後載入數據的，這個也很簡單，跟jq的ajax基本上沒有什麼區別，直接給出相應的代碼。

1                     $("#table_list_1").jqGrid("clearGridData");
2                             
3                     $("#table_list_1").setGridParam({
4                         postData:{
5                             start_date:data1,
6                             end_date:data2
7                         }
8                     }).trigger("reloadGrid");

第一行的代碼是清楚原來的數據，這個不管是載入本地的數據，還是直接調用jqgrid的方法，都是需要的。然後第4行開水奇偶需要重新載入的數據了，比如例子中就是靠開始時間和結束時間篩選的。這樣的話，就可以正常的載入數據了。

　　但是需要註意的一點是，我上次遇到了一次情況，發現程式不會重新載入數據，就是因為我們那次的數據量比較小，都是使用的loadonce：true這個屬性，然後我改變篩選條件以後，jqgrid不會重新的請求數據了，，，，，這個讓我很詫異，結果百度以後得知，當我們設置jqgrid的loadonce:true的時候，其實他會把一個屬性，datatype重新設置成local，所以這個時候jqgrid就不會重新的載入一遍數據了，所以我們還需要再次載入全部數據的時候設置一下，datatype：json，這樣就能再次獲取到全部的數據。（以上的這種情況適用於數據量不是很大，數據都是一次載入，但是還有條件篩選的功能的程式。）

　　未完待續……


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL 事務處理
    事務用於將某些操作的多個SQL作為原子性操作，一旦有某一個出現錯誤，即可回滾到原來的狀態，從而保證資料庫數據完整性。 執行 ...
  • SqlServer如何給表添加新的欄位以及欄位註釋
    語法： USE 資料庫名ALTER TABLE 表名 ADD 欄位名 類型 預設值 是否為空;EXEC sp_addextendedproperty N'MS_Description', N'註釋內容', N'SCHEMA', N'dbo',N'TABLE', N'表名', N'COLUMN', N ...
  • oracle查詢用戶的許可權
    DBA_* 描述的是資料庫中的所有對象 ALL_* 描述的是當前用戶有訪問許可權的所有對象 USER_* 描述的是當前用戶所擁有的所有對象 查看所有用戶： select * from dba_users; >顯示所有用戶的詳細信息 select * from all_users; >顯示用戶及用戶id ...
  • 從零學習Fluter(九):正式使用flutter進入商業開發
    從零學習Fluter(九):正式使用flutter進入商業開發 ...
  • Android之選擇本地圖片
    pass ...
  • 淺談AndroidGPU過度繪製、GPU呈現模式分析及相關優化
    在真機設備下有一個開發者選項，這個大家都知道，我們最常用的就打開'USB調試'功能，方便真機調試。 在這開發者選項中還有個選項，'調試GPU過度繪製' 這裡選擇第二個選項'顯示過度繪製區域' 可以看到針對該界面 每一個控制項周邊都有一塊顏色區域 顏色對應： 原色：沒有過度繪製 藍色：1 次過度繪製 綠 ...
  • vue.js中compted與model的區別
    在p便簽內寫的{{reversemessage}}方法，若js里對應的函數為computed則不需要加上括弧 若js里對應的函數為model則應該將{{reversemessage}}改為{{reversemessage()}} 兩者在緩存方式上也有區別，利用computed計算屬性是將 rever ...
  • 【讀書筆記】Web-JavaScript-JavaScript 條件語句
    一，效果圖。 二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript 條件語句</title> </head> <body> <p>如果時間早於20:00,會獲得問候“Good day”.</p> <b ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類