JQuery jqGrid是開發(fā)Web應(yīng)用程序中數(shù)據(jù)表格的一種非常強(qiáng)大、靈活和可自定義的工具。它提供了多種功能，例如分頁、排序、搜索、編輯、滾動和導(dǎo)出等，可以與多種數(shù)據(jù)源進(jìn)行交互。它的使用簡單、靈活，能夠處理大量數(shù)據(jù)，具有高度的自定義性。了解了JQuery jqGrid的各種方法，我們可以更好地管理和展示大量的數(shù)據(jù)表格，使得數(shù)據(jù)更加易于管理、搜索和分析。

JQuery jqGrid是一種強(qiáng)大、靈活和可自定義的Javascript表格插件，它采用了JQuery框架進(jìn)行開發(fā)，可以幫助用戶快速、輕松地創(chuàng)建和管理復(fù)雜的數(shù)據(jù)表格。它提供了豐富的特性和功能，例如分頁、排序、搜索、編輯、滾動和導(dǎo)出等。

JQuery jqGrid主要被用于Web應(yīng)用程序中的數(shù)據(jù)表格顯示和編輯。它可以與多種數(shù)據(jù)源進(jìn)行交互，例如XML、JSON和本地數(shù)組等。用戶可以通過使用JQuery jqGrid插件，將復(fù)雜的數(shù)據(jù)表格轉(zhuǎn)化為用戶友好的界面，使得數(shù)據(jù)更加易于管理。

JQuery jqGrid是什么？

JQuery jqGrid是基于JQuery框架的一種Javascript表格插件，也是一種開源項目。它支持多種數(shù)據(jù)源進(jìn)行交互，可以處理大量數(shù)據(jù)，還提供較為靈活和自定義的配置選項。

JQuery jqGrid特點：

1. 可高度自定義和靈活

JQuery jqGrid使用簡單和靈活。用戶可以根據(jù)自己的需求和喜好調(diào)整表格的外觀和功能。

2. 處理大量數(shù)據(jù)

JQuery jqGrid可以處理大量的數(shù)據(jù)，支持分頁和滾動操作。這極大地增強(qiáng)了表格的可用性和效率。

3. 支持多種數(shù)據(jù)格式

JQuery jqGrid可以與多種數(shù)據(jù)格式進(jìn)行交互，包括XML，JSON，本地數(shù)組等。

4. 支持排序和搜索

JQuery jqGrid提供排序和搜索功能，可以根據(jù)表格的列數(shù)據(jù)進(jìn)行排序操作，并進(jìn)行復(fù)雜的搜索。這使得用戶可以更加方便地找到需要的數(shù)據(jù)。

5. 支持編輯和行操作

JQuery jqGrid可以編輯和行操作。用戶可以在表格內(nèi)進(jìn)行編輯、刪除、復(fù)制、粘貼等操作，并且支持行拖拽和調(diào)整大小。

Jqgrid入門-顯示基本的表格(一)

 首先對Jqgrid網(wǎng)格插件做個簡要的說明。在眾多的表格插件中，Jqgrid的特點是非常鮮明的。

        特點如下:

• 完整的表格呈現(xiàn)與運算功能，包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。

• 自定義的工具列。

• 預(yù)設(shè)的Navigator工具列，可以很容易的使用新增、刪除、編輯、檢視及搜尋等功能。

• 完整的分頁功能。

• 按下任一欄位的標(biāo)頭，皆可以該欄位為排序項目。無論是升序或降序皆可。

• 預(yù)設(shè)的action formatter，可以快速而直覺地對每筆資料做運算。

• 支持多種數(shù)據(jù)格式。比如json、xml、array等。

（1）HTML部分 

 想要順利的使用Jqgrid，需要引用下面6個文件。分別是：

• jquery-ui-1.8.1.custom.css（jQuery UI界面的CSS文件）

• ui.jqgrid.custom.css（專用于jqGrid界面的CSS文件）

• jquery-1.7.2.js（jQuery的核心）

• jquery-ui-1.8.1.custom.min.js（用于支持jQuery UI界面）

• grid.locale-zh-CN.js（針對jqGrid的locale設(shè)置，根據(jù)locale不同，選擇不同的尾綴）

• jquery.jqGrid.min.js（jqGrid的核心，可以到j(luò)qGrid網(wǎng)站，根據(jù)需求選擇模塊下載）

      然后在html的body里面創(chuàng)建一個table和div并賦予id屬性就行了。如下，非常簡潔。

table是jqgrid的表格獲取的id

div#page是分頁使用

（2）JS部分

官方文檔說實現(xiàn)一個要想生成一個 Jqgrid ，最直接的方法就是：

        $(“#grid_id”).jqGrid(options);也就是得到一個table的jquery對象，然后傳遞options就可以得到一個Jqgrid對象。

        簡單的介紹下options中最重要的部分。

1. jqGrid的重要選項

具體的options參考，可以訪問Jqgrid文檔關(guān)于option的章節(jié)（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較常用的，重點介紹一下：

• url：提交處理數(shù)據(jù)的地址。

• datatype：這個參數(shù)用于設(shè)定將要得到的數(shù)據(jù)類型。我最常用的是“json”，其余的類型還包括：xml、xmlstring、local、javascript、function、local。

• mtype: 定義使用哪種方法發(fā)起請求，GET或者POST。

• height：Grid的高度，可以接受數(shù)字、%值、auto，默認(rèn)值為150。

• width：Grid的寬度，如果未設(shè)置，則寬度應(yīng)為所有列寬的之和；如果設(shè)置了寬度，則每列的寬度將會根據(jù)shrinkToFit選項的設(shè)置，進(jìn)行設(shè)置。

• shrinkToFit：此選項用于根據(jù)width計算每列寬度的算法。默認(rèn)值為true。如果shrinkToFit為true且設(shè)置了width值，則每列寬度會根據(jù)width成比例縮放；如果shrinkToFit為false且設(shè)置了width值，則每列的寬度不會成比例縮放，而是保持原有設(shè)置，而Grid將會有水平滾動條。

• autowidth：默認(rèn)值為false。如果設(shè)為true，則Grid的寬度會根據(jù)父容器的寬度自動重算。重算僅發(fā)生在Grid初始化的階段；如果當(dāng)父容器尺寸變化了，同時也需要變化Grid的尺寸的話，則需要在自己的代碼中調(diào)用setGridWidth方法來完成。

• pager：定義頁碼控制條PageBar

• sortname：指定默認(rèn)的排序列，可以是列名也可以是數(shù)字。此參數(shù)會在被傳遞到服務(wù)端。

• viewrecords：設(shè)置是否在PagerBar顯示所有記錄的總數(shù)。

• caption：Grid的標(biāo)題。如果設(shè)置了，則將顯示在Grid的Header層 ；如果未設(shè)置，則標(biāo)題區(qū)域不顯示 。

• rowNum：用于設(shè)置Grid中一次顯示的行數(shù)，默認(rèn)值為20。

• rowList：一個數(shù)組，用于設(shè)置Grid可以接受的rowNum值。例如[10,20,30]。

• prmNames：這是一個數(shù)組，用于設(shè)置jqGrid將要向服務(wù)端傳遞的參數(shù)名稱。我們一般不用去改變什么。

• colModel：最重要的數(shù)組之一，用于設(shè)定各列的參數(shù)。（稍后詳述）

• jsonReader：這又是一個數(shù)組，用來設(shè)定如何解析從Server端發(fā)回來的json數(shù)據(jù)。（稍后詳述）

2. colModel的重要選項

        和Jqgrid一樣colModel也有許多非常重要的選項，在使用搜索、排序等方面都會用到。這里先只說說最基本的。

• name：為Grid中的每個列設(shè)置唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。

• index：設(shè)置排序時所使用的索引名稱，這個index名稱會作為sidx參數(shù)傳遞到服務(wù)端。

• label：表格顯示的列名。

• width：設(shè)置列的寬度，目前只能接受以px為單位的數(shù)值，默認(rèn)為150。

• sortable：設(shè)置該列是否可以排序，默認(rèn)為true。

• search：設(shè)置該列是否可以被列為搜索條件，默認(rèn)為true。

• resizable：設(shè)置列是否可以變更尺寸，默認(rèn)為true。

• hidden：設(shè)置此列初始化時是否為隱藏狀態(tài)，默認(rèn)為false。

• formatter：預(yù)設(shè)類型或用來格式化該列的自定義函數(shù)名。常用預(yù)設(shè)格式有：integer、date、currency、number等（具體參見文檔）。

3. jsonReader選項

        jsonReader是Jqgrid的一個重要選項，用于設(shè)置如何解析從服務(wù)端發(fā)回來的json數(shù)據(jù)。其默認(rèn)值為：

我們可以這樣理解，prmNames設(shè)置了如何將Grid所需要的參數(shù)傳給服務(wù)端，而jsonReader設(shè)置了如何去解析從服務(wù)端傳回來的json數(shù)據(jù)。如果沒有設(shè)置jsonReader的話，Jqgrid將會根據(jù)默認(rèn)的設(shè)置來解析json數(shù)據(jù)，并顯示在表格里。一般情況下，我們修改jsonReader的root為服務(wù)端傳遞過來的數(shù)組就可以滿足要求了。比如：

由此，Jqgrid完成一個request，并將得到的response，解析為所需的數(shù)據(jù)，顯示到Grid表格中。整個流程就走完了。

https://www.cnblogs.com/hongzai/p/3159546.html

Jqgrid入門-操作表格的數(shù)據(jù)(二)

上一篇中，Jqgrid已經(jīng)可以從服務(wù)端獲得數(shù)據(jù)，并顯示在Grid表格中了。下面說一下，如何操作表格及其數(shù)據(jù)。

        jqGrid有很多方法函數(shù)，用來操作數(shù)據(jù)或者操作Grid表格本身。jqGrid的方法有兩種調(diào)用方式：

          $(“#grid_id”).jqGridMethod( parameter1,…,parameterN );

或者

        $(“#grid_id”).jqGrid(‘method’, parameter1,…,parameterN );

        首先介紹一下Jqgrid的幾個最常用的方法函數(shù)，具體的方法API也可以參考文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods） 。

1. getGridParam

        這個方法用來獲得jqGrid的選項值。它具有一個可選參數(shù)name，name即代表著jqGrid的選項名，如果不傳入name參數(shù)，則會返回 Jqgrid整個選項options。例如：

2. getRowData

這個方法用來獲得某行的數(shù)據(jù)。它具有一個rowid參數(shù)，Jqgrid會根據(jù)這個rowid返回對應(yīng)行的數(shù)據(jù)，返回的是name:value類型的數(shù)組。如果rowid未能被找到，則返回一個空數(shù)組；如果未設(shè)置rowid參數(shù)，則以數(shù)組的形式返回Grid的所有行數(shù)據(jù)。例如：

3. addRowData

        這個方法用于向Grid中插入新的一行。執(zhí)行成功返回true，否則返回false。它具有4個參數(shù)：

• rowid：新行的id號；

• data：新行的數(shù)據(jù)對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；

• position：插入的位置（first：表格頂端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；

• srcrowid：新行將插入到srcrowid指定行的前面或后面。

        這個方法可以一次性插入多行，data參數(shù)必須是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]這樣的數(shù)組形式。例如：

 4. setRowData

        這個方法用于為某行數(shù)據(jù)設(shè)置數(shù)據(jù)值。執(zhí)行成功返回true，否則返回false。它具有3個參數(shù)：

• rowid：更新數(shù)據(jù)的行id；

• data：更新的數(shù)據(jù)對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；這個數(shù)據(jù)對象，不必設(shè)置完全，需要更新哪列，就設(shè)置哪列的name:value對；

• cssprop：如果cssprop為String類型，則會使用jQuery的addClass為行增加相應(yīng)名稱的CSS類；如果為object類型，則會使用html的css屬性，為行添加樣式。如果只想增加css樣式而不更新數(shù)據(jù)，可以將data參數(shù)設(shè)為false。

例如：

5. delRowData

        這個方法用于刪除某行數(shù)據(jù)。執(zhí)行成功返回true，否則返回false。具有一個參數(shù)rowid，代表要刪除的行id。例如：

6. trigger(“reloadGrid”)

        根據(jù)當(dāng)前設(shè)置，重新載入Grid表格，即意味著向服務(wù)端重新發(fā)送一個新的請求。此方法只能用于已經(jīng)構(gòu)建好的Grid。此外，此方法不會使對colModel所做出的改變生效。應(yīng)該使用gridUnload來重新載入對colModel的新設(shè)置。例如：

7. 其他方法

除了以上介紹的的方法外，jqGrid還有其他有用的方法，例如：addJSONData、clearGridData、hideCol、resetselection、setCaption、setGridHeight、setLabel、showCol等以及增強(qiáng)模塊提供的方法，例如：filterGrid、GridDestroy、GridUnload、setColProp等。這些方法的具體用法，或淺顯易懂，或不是非常常用。都可以參考官方文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods），得到具體指示。

https://www.cnblogs.com/hongzai/p/3159546.html

Jqgrid入門-使用模態(tài)對話框編輯表格數(shù)據(jù)(三)

Jqgrid是一個強(qiáng)大的表格插件，它提供了多種方式來編輯數(shù)據(jù)。這三種方式分別是：

• Cell Editing——只允許修改某一個單元格內(nèi)容

• Inline Editing——允許在jqGrid中直接修改某一行的數(shù)據(jù)

• Form Editing——彈出一個新的編輯窗口進(jìn)行編輯和新增

       在我做的DEMO中，主要運用的是第三種， 彈出一個新窗口來編輯數(shù)據(jù)。如果想用其它兩種方式可以參考官網(wǎng)。

        相比較之前的例子，這個例子最重要的變化是添加了一個id為consoleDlg的<div>塊。在jquery的ready方法里面我將初始化div生成為一個模態(tài)對話框，用作編輯數(shù)據(jù)的界面。這個用到了jquery ui的dialog。關(guān)于如何使用dialog，參考這篇文章就ok了。這是主要的js代碼，這個div放在哪里都可以。

       那么我們通過什么方式來打開這個窗口呢？ 細(xì)心的朋友們可以發(fā)現(xiàn)我在前面的文章一的截圖中，表格的最前面新增了一列操作欄。這個操作欄主要是通過Jqgrid的gridComplete方法來實現(xiàn)的。當(dāng)表格所有數(shù)據(jù)都加載完成而且其他的處理也都完成時觸發(fā)此事件。

   從這段代碼我們可以看出，我們使用這個方法先獲得表格所有列的id，然后在每一列中追加了三個按鈕。這三個按鈕點擊時就會觸發(fā)各自的方法。注意：代碼中的process對應(yīng)colModel中的列。

        按鈕已經(jīng)設(shè)置完成了，下面就該操作表格的數(shù)據(jù)了。

•         添加數(shù)據(jù)

        點擊頁面上的新增按鈕，就會彈出剛才初始化的模態(tài)對話框。如圖：

        這是一個form表單，里面包含學(xué)生的基本信息，還有兩個按鈕。有的朋友可能會問這個對話框是在彈出來的呢？別急，看這里。

   原來點擊按鈕調(diào)用的是這個方法呀。解釋一下，先獲得這個對象，然后清空對話框里面的元素。然后追加一個iframe。再調(diào)用dialog的open方法。

   填寫好表單，點擊新增按鈕。提示新增成功后，就可以在表格中看到剛才新增的同學(xué)了。不用刷新頁面，Jqgrid有現(xiàn)成的方法。

   這是新增學(xué)生的具體方法。

• 修改數(shù)據(jù)

       修改數(shù)據(jù)的時候，和剛才新增方法就有點區(qū)別了。因為修改的時候要先把數(shù)據(jù)加載到對話框的表單中。如圖：

      比如，我要修改李麗麗的信息。我們需要把原來的信息加載出來。所以在彈出對話框之前我們需要把這個學(xué)生的id也傳遞過來。如圖：

通過和上面新增方法對比，可以發(fā)現(xiàn)修改方法是先得到選中行的id，然后得到學(xué)生的id，最后通過json傳遞過去。

點擊修改按鈕，提示修改成功后，就可以在表格中看到修改后的學(xué)生數(shù)據(jù)了。

 這是修改學(xué)生的方法。

  刪除和查看數(shù)據(jù)就不做具體說明了，和修改差不多只是dao層中調(diào)用的方法不一樣。在這些代碼中只需關(guān)注op（操作標(biāo)識）和傳遞的學(xué)生id。也可以這樣做，在修改、刪除和查看的時候，把學(xué)生的信息通過json全部傳遞過來，就不需要通過學(xué)生id去查詢數(shù)據(jù)庫了，減少與數(shù)據(jù)庫的交互。