【JavaScript】WEB jquery jqgrid方法純JS展現(xiàn)和編輯大量數(shù)據(jù)

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年8月22日 18:35 本文熱度 539

JQuery jqGrid是開發(fā)Web應(yīng)用程序中數(shù)據(jù)表格的一種非常強(qiáng)大、靈活和可自定義的工具。它提供了多種功能，例如分頁、排序、搜索、編輯、滾動(dò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òng)和導(dǎo)出等。

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

JQuery jqGrid是什么？

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

JQuery jqGrid特點(diǎn)：

可高度自定義和靈活

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

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

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

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

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

支持排序和搜索

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

支持編輯和行操作

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

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

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

特點(diǎn)如下:

完整的表格呈現(xiàn)與運(yùn)算功能，包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。
自定義的工具列。
預(yù)設(shè)的Navigator工具列，可以很容易的使用新增、刪除、編輯、檢視及搜尋等功能。
完整的分頁功能。
按下任一欄位的標(biāo)頭，皆可以該欄位為排序項(xiàng)目。無論是升序或降序皆可。
預(yù)設(shè)的action formatter，可以快速而直覺地對每筆資料做運(yùn)算。
支持多種數(shù)據(jù)格式。比如json、xml、array等。

（1）HTML部分

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

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)建一個(gè)table和div并賦予id屬性就行了。如下，非常簡潔。

  <link href="<%=basePath%>main/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
  <link href="<%=basePath%>main/css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="<%=basePath%>main/js/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="<%=basePath%>main/js/grid.locale-zh_CN.js"></script>
  <script type="text/javascript" src="<%=basePath%>main/js/jquery.jqGrid.min.js"></script>
  <script type="text/javascript" src="<%=basePath%>main/js/grid.custom.js"></script>
  <table id="list"></table>
  <div id="page"></div>

table是jqgrid的表格獲取的id

div#page是分頁使用

（2）JS部分

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

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

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

1. jqGrid的重要選項(xiàng)

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

url：提交處理數(shù)據(jù)的地址。
datatype：這個(gè)參數(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è)置了寬度，則每列的寬度將會(huì)根據(jù)shrinkToFit選項(xiàng)的設(shè)置，進(jìn)行設(shè)置。
shrinkToFit：此選項(xiàng)用于根據(jù)width計(jì)算每列寬度的算法。默認(rèn)值為true。如果shrinkToFit為true且設(shè)置了width值，則每列寬度會(huì)根據(jù)width成比例縮放；如果shrinkToFit為false且設(shè)置了width值，則每列的寬度不會(huì)成比例縮放，而是保持原有設(shè)置，而Grid將會(huì)有水平滾動(dòng)條。
autowidth：默認(rèn)值為false。如果設(shè)為true，則Grid的寬度會(huì)根據(jù)父容器的寬度自動(dòng)重算。重算僅發(fā)生在Grid初始化的階段；如果當(dāng)父容器尺寸變化了，同時(shí)也需要變化Grid的尺寸的話，則需要在自己的代碼中調(diào)用setGridWidth方法來完成。
pager：定義頁碼控制條PageBar
sortname：指定默認(rèn)的排序列，可以是列名也可以是數(shù)字。此參數(shù)會(huì)在被傳遞到服務(wù)端。
viewrecords：設(shè)置是否在PagerBar顯示所有記錄的總數(shù)。
caption：Grid的標(biāo)題。如果設(shè)置了，則將顯示在Grid的Header層；如果未設(shè)置，則標(biāo)題區(qū)域不顯示。
rowNum：用于設(shè)置Grid中一次顯示的行數(shù)，默認(rèn)值為20。
rowList：一個(gè)數(shù)組，用于設(shè)置Grid可以接受的rowNum值。例如[10,20,30]。
prmNames：這是一個(gè)數(shù)組，用于設(shè)置jqGrid將要向服務(wù)端傳遞的參數(shù)名稱。我們一般不用去改變什么。
colModel：最重要的數(shù)組之一，用于設(shè)定各列的參數(shù)。（稍后詳述）
jsonReader：這又是一個(gè)數(shù)組，用來設(shè)定如何解析從Server端發(fā)回來的json數(shù)據(jù)。（稍后詳述）

2. colModel的重要選項(xiàng)

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

name：為Grid中的每個(gè)列設(shè)置唯一的名稱，這是一個(gè)必需選項(xiàng)，其中保留字包括subgrid、cb、rn。
index：設(shè)置排序時(shí)所使用的索引名稱，這個(gè)index名稱會(huì)作為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è)置此列初始化時(shí)是否為隱藏狀態(tài)，默認(rèn)為false。
formatter：預(yù)設(shè)類型或用來格式化該列的自定義函數(shù)名。常用預(yù)設(shè)格式有：integer、date、currency、number等（具體參見文檔）。

3. jsonReader選項(xiàng)

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

  jsonReader : {
  root : "rows", // 實(shí)際模型的人口
  page : "page", // 當(dāng)前頁碼
  total : total, // 當(dāng)前共多少頁
  records : "records", // 總共多少行數(shù)據(jù)
  repeatitems : true,
  cell : "cell",
  id : "id",
  userdata : "userdata", // 數(shù)據(jù)
subgrid : {
root : "rows",
repeatitems : true,
cell : "cell"
}
}

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

  jsonReader : {
  root : "dataList", // 服務(wù)端保存數(shù)據(jù)的集合
  records : "record", // 可以不要,因?yàn)槲业姆?wù)端是record,不是默認(rèn)的,才加上的
  repeatitems : false
  // 其它的全部默認(rèn)就行
  }

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

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的幾個(gè)最常用的方法函數(shù)，具體的方法API也可以參考文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods）。

1. getGridParam

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

  var id = $("#gridTable").jqGrid("getGridParam", "selrow");      //獲得選中行的ID
  var sort = $("#gridTable").jqGrid("getGridParam", "sortname");  //獲得排序的字段
  var page = $("#gridTable").jqGrid("getGridParam", "page");      //獲得當(dāng)前的頁數(shù)
  var row = $("#gridTable").jqGrid("getGridParam", "rowNum");     //獲得當(dāng)前頁的行數(shù)
  var count = $("#gridTable").jqGrid("getGridParam", "records");  //獲得總記錄數(shù)
  var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多選時(shí)，返回選中行的ID

2. getRowData

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

  var getRowdata = function() {
  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
  var rowData = $("#gridTable").jqGrid("getRowData", selectedId);

3. addRowData

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

rowid：新行的id號(hào)；
data：新行的數(shù)據(jù)對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；
position：插入的位置（first：表格頂端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；
srcrowid：新行將插入到srcrowid指定行的前面或后面。

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

  var addStudent= function() {
  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
  var dataRow = {
  id : 99,
  lastName : "Zhang",
  firstName : "San",
  email : "<a href="mailto:zhang_san@126.com">zhang_san@126.com</a>",
  telNo : "0086-12345678"
  };
if (selectedId) {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
}
};

4. setRowData

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

rowid：更新數(shù)據(jù)的行id；
data：更新的數(shù)據(jù)對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；這個(gè)數(shù)據(jù)對象，不必設(shè)置完全，需要更新哪列，就設(shè)置哪列的name:value對；
cssprop：如果cssprop為String類型，則會(huì)使用jQuery的addClass為行增加相應(yīng)名稱的CSS類；如果為object類型，則會(huì)使用html的css屬性，為行添加樣式。如果只想增加css樣式而不更新數(shù)據(jù)，可以將data參數(shù)設(shè)為false。

例如：

  var updateStudent = function() {
  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
  var dataRow = {
  lastName : "Li",
  firstName : "Si",
  email : "<a href="mailto:li_si@126.com">li_si@126.com</a>"
  };
  var cssprop = {
  color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};

5. delRowData

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

  var deleteStudent = function() {
  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
  $("#gridTable").jqGrid('delRowData', selectedId);
  };

6. trigger(“reloadGrid”)

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

  $("#gridTable").jqGrid("setGridParam", {
  datatype : "json",
  search : true,
  mtype : "post"
  }).trigger("reloadGrid");

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是一個(gè)強(qiáng)大的表格插件，它提供了多種方式來編輯數(shù)據(jù)。這三種方式分別是：

Cell Editing——只允許修改某一個(gè)單元格內(nèi)容
Inline Editing——允許在jqGrid中直接修改某一行的數(shù)據(jù)
Form Editing——彈出一個(gè)新的編輯窗口進(jìn)行編輯和新增

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

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

  // 配置模態(tài)對話框
  $("#consoleDlg").dialog({
  autoOpen : false, // 是否自動(dòng)彈出窗口
  modal : true, // 設(shè)置為模態(tài)對話框
  resizable : true,
  width : 500,
  height : 300,
  position : "center" // 窗口顯示的位置
  });

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

  gridComplete : function() {
  var ids = jQuery("#gridTable").jqGrid('getDataIDs');
  for ( var i = 0; i < ids.length; i++) {
  var cl = ids[i];
  update = "<input type='button' value='修改' onclick='updateStu("
  + cl + ")'/>&nbsp;";
  del = "<input type='button' value='刪除' onclick='deleteStu("
  + cl + ")'/>&nbsp;";
  view = "<input type='button' value='查看' onclick='viewStu("
+ cl + ")'/>";
jQuery("#gridTable").jqGrid('setRowData',
ids[i], {
process : update + del + view
});
}
},

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

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

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

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

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

  /**
  * 彈出新增學(xué)生對話框
  */
  function addStu() {
  var consoleDlg = $("#consoleDlg");
  consoleDlg.html("");
  var a1 = " <iframe src='studentProcess.jsp?op=add'"+ "style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>";
  consoleDlg.append(a1);
  consoleDlg.dialog("option", "title", "新增學(xué)生信息").dialog("open");
};

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

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

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

  function addStu() {  // 序列化表單
  var obj2 = $("#myform").serializeArray();
  $.ajax({   url : "QueryActionUrl_addStu.action",
  data : obj2,
  dataType : "json",
  cache : false,
  type : "post",
  error : function(textStatus, errorThrown) {
  window.parent.hiAlert("系統(tǒng)ajax交互錯(cuò)誤");   },
success : function(data, textStatus) {
if (data.messageBean.code == "200") {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");      // 刷新表格
window.parent.$("#gridTable").jqGrid("setGridParam", {
search : true,       mtype : "post"      }).trigger("reloadGrid", [ {
page : 1      }
]);
});
} else {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");     });
}
}
}); 
}

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

修改數(shù)據(jù)的時(shí)候，和剛才新增方法就有點(diǎn)區(qū)別了。因?yàn)樾薷牡臅r(shí)候要先把數(shù)據(jù)加載到對話框的表單中。如圖：

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

  /**
  * 彈出修改學(xué)生的對話框
  */
  function updateStu(selectedRowId) {
  var consoleDlg = $("#consoleDlg");
  consoleDlg.html("");
  var str = $("#gridTable").jqGrid("getRowData", selectedRowId); // 根據(jù)行ID，獲取選中行的數(shù)據(jù)
  id = {
  id : str.id
};
var a1 = " <iframe src='studentProcess.jsp?op=update&id="
+ JSON.stringify(id)
+ "' style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>";
consoleDlg.append(a1);
consoleDlg.dialog("option", "title", "修改學(xué)生信息").dialog("open");
};

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

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

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

  function updateStu() {
  var obj2 = $("#myform").serializeArray();
  $.ajax({
  url : "QueryActionUrl_updateStu.action",
  data : obj2,
  dataType : "json",
  cache : false,
  type : "post",
  error : function(textStatus, errorThrown) {
window.parent.hiAlert("系統(tǒng)ajax交互錯(cuò)誤");
},
success : function(data, textStatus) {
if (data.messageBean.code == "200") {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");
// 刷新表格
window.parent.$("#gridTable").jqGrid("setGridParam", {
search : true,
mtype : "post"
}).trigger("reloadGrid", [ {
page : 1
} ]);
});
} else {
hiAlert(data.messageBean.msg, "提示", function() {
window.parent.$("#consoleDlg").dialog("close");
});
}
}
});
}

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

該文章在 2023/8/22 18:35:04 編輯過


全部評論2
	admin 2023年8月22日 18:36 jQuery("#grid_id").jqGrid({ //<table id="grid_id"></div> url: "UserServlet?method=getList", // 加載數(shù)據(jù)時(shí)訪問的url 具體的返回可以是xml,json datarype:"json" //返回的數(shù)據(jù)類型，后臺(tái)需要返回一個(gè)json字符串 json,xml,xmlstring,local,javascript,function mtype : 'GET' //請求的方式 GET，POST height: $(window).height(), //設(shè)置表格高度 auto,%值 autowidth:ture， //打開瀏覽器‘寬度自測’ colName:['用戶名','密碼'], // 表格表頭 colModel:[ {name : 'myac',index :'myac',width : 80,formatter:'actions',delOption:true}, {label : '用戶',name : 'user',index :'user',width : 80,}, ], pager : "#gridPager", //導(dǎo)航欄，分頁組件<div id="gridPager"></div> rowNum : 10, //設(shè)置顯示記錄條數(shù)，默認(rèn)20，若返回的記錄條數(shù)大于rowNum,grid只會(huì)顯示rowNum規(guī)定的條數(shù) rowList : [10,20,30], //用與設(shè)置grid能夠接受的rowNum值 viewrecords:true, //設(shè)置是否顯示總條數(shù) sortname : "time", sortorder : 'asc', //排序的列，倒序、順序 asc/desc multiselect: true, //開啟多選 rownumber : true, //左側(cè)的行號(hào) loadonce: //若設(shè)置成true，則只從服務(wù)器請求一次數(shù)據(jù)，datatype被修改為local，且以后所有的操作都是基于客戶端的操作 subGrid: ture //默認(rèn)為false,展開子格 subGridUrl subGridModel subGridRowExpanded：function(){} //當(dāng)點(diǎn)擊“+”展開子表格時(shí)，將觸發(fā)此選項(xiàng)定義的事件方法； subGridRowColapsed //當(dāng)點(diǎn)擊“-”收起子表格時(shí)，將觸發(fā)此選項(xiàng)定義的事件方法； width: //調(diào)整表格大小 height //調(diào)整表格大小 pamNames :[] //用于設(shè)置jqgrid要向server傳遞的參數(shù)名稱 jsonReader:[] //用于解析server放回的json數(shù)據(jù) }); //jQuery(window).height()代表了當(dāng)前可見區(qū)域的大小， //而jQuery(document).height()則代表了整個(gè)文檔的高度，可視具體情況使 pamNames:默認(rèn)值 prmNames : { page:"page", // 表示請求頁碼的參數(shù)名稱 rows:"rows", // 表示請求行數(shù)的參數(shù)名稱 sort: "sidx", // 表示用于排序的列名的參數(shù)名稱 order: "sord", // 表示采用的排序方式的參數(shù)名稱 search:"_search", // 表示是否是搜索請求的參數(shù)名稱 nd:"nd", // 表示已經(jīng)發(fā)送請求的次數(shù)的參數(shù)名稱 id:"id", // 表示當(dāng)在編輯數(shù)據(jù)模塊中發(fā)送數(shù)據(jù)時(shí)，使用的id的名稱 oper:"oper", // operation參數(shù)名稱 editoper:"edit", // 當(dāng)在edit模式中提交數(shù)據(jù)時(shí)，操作的名稱 addoper:"add", // 當(dāng)在add模式中提交數(shù)據(jù)時(shí)，操作的名稱 deloper:"del", // 當(dāng)在delete模式中提交數(shù)據(jù)時(shí)，操作的名稱 subgridid:"id", // 當(dāng)點(diǎn)擊以載入數(shù)據(jù)到子表時(shí)，傳遞的數(shù)據(jù)名稱 npage: null, totalrows:"totalrows" // 表示需從Server得到總共多少行數(shù)據(jù)的參數(shù)名稱，參見jqGrid選項(xiàng)中的rowTotal } 列名：colNames colNames : [ '操作', '用戶帳號(hào)', '用戶密碼', '所屬權(quán)限組', '員工id'], 列屬性：colMode label:標(biāo)簽，標(biāo)記當(dāng)colNames數(shù)組為空時(shí)，定義此列的標(biāo)題。 name:對象的屬性名其中保留字包括subgrid、cb、rn index:索引 //排序，和向server傳遞參數(shù)的名稱 align //日期格式，可用/，-和.。作為間隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期 key //設(shè)置主鍵列 hidedlg //該值不會(huì)出現(xiàn)在模式對話框中，默認(rèn)值為false width:寬度 // px單位 hidden:false //該列是否隱藏，默認(rèn)false align:center //居中 editable:可編輯的 editoptios: edittype 定義行編輯和表單模式的編輯類型，可以是text、textarea、select、checkbox、 password、button、image和file。 editrules datefmt //日期格式，可用/，-和.。作為間隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期 sortable:true //該列是否可以排序，默認(rèn)true sorttype 當(dāng)datatype為local時(shí)，用于定義排序列類型?？扇?/span>int/integer（整數(shù)）、float/number/currency（小數(shù)）、date（日期）、text（文本） resizable: true, //該列尺寸是否能更改，默認(rèn)true fromoptions // 定義表單編輯的各種選項(xiàng) formatter:'actions' //用來預(yù)設(shè)類型或格式化該列的自定義函數(shù)名，常用預(yù)設(shè)格式：integer,date,currency、number formatteroptions formatter: function (cellvalue, options, rowObject) { if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>"; if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>"; } delOption:true 刪除（使用給出的actions） editurl:"userServlet?method=delete", jqGrid API: jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]); //加載本地?cái)?shù)據(jù) datatype:local jQuery("#gird_id").jqGrid('navGrid','#gridGager',{edit:false,add:false,del:false，position:'right'}); //設(shè)置的就是不顯示編輯、添加、刪除按鈕(在分頁組件里) jQuery("#grid_id").jqGrid('getGridParam','selrow'); //返回選中行的id jQuery("#grid_id").jqGrid('getRowData',rowId); //獲得選中行數(shù)據(jù)，rowId 行號(hào) jQuery("#grid_id").jqGrid('delRowData',rowId); //刪除一行記錄，servser不會(huì)刪除 jQuery("#grid_id").jqGrid('setRowData',rowId,datarow); //更新一行數(shù)據(jù)，server不更新 jQuery("#grid_id").jqGrid('addRowData',rowId,datarow); //添加一行數(shù)據(jù)，server不添加 jQuery("#grid_id").jqGrid('setselection',"rowId"); //選中某一行 jQuery("#grid_id").jqGrid('editRow',rowId) //編行行 jQuery("#rowed1").jqGrid('saveRow',rowId); //保存 jQuery("#rowed1").jqGrid('restoreRow',rowId); //取消 jQuery("#grid_id").jqGrid('getGridParam','selarrrow'); //返回多行被選中的id, jQuery("#grid_id").jqGrid('getDataIDs'); //獲得所有巨鹿的id jQuery("#grid_id").jqGrid('getGridParam','records') //獲得總記錄條數(shù) 重新載入數(shù)據(jù)： jQuery(grid_selector).setGridParam({ data : data[0].dataList }).trigger("reloadGrid"); 清空數(shù)據(jù)： $(grid_selector).clearGridData(); 該評論在 2023/8/22 18:38:57 編輯過
	admin 2023年8月22日 18:39 JQuery jqGrid是一種強(qiáng)大、靈活和可自定義的Javascript表格插件，它采用了JQuery框架進(jìn)行開發(fā)，可以幫助用戶快速、輕松地創(chuàng)建和管理復(fù)雜的數(shù)據(jù)表格。它提供了豐富的特性和功能，例如分頁、排序、搜索、編輯、滾動(dòng)和導(dǎo)出等。 JQuery jqGrid主要被用于Web應(yīng)用程序中的數(shù)據(jù)表格顯示和編輯。它可以與多種數(shù)據(jù)源進(jìn)行交互，例如XML、JSON和本地?cái)?shù)組等。用戶可以通過使用JQuery jqGrid插件，將復(fù)雜的數(shù)據(jù)表格轉(zhuǎn)化為用戶友好的界面，使得數(shù)據(jù)更加易于管理。 JQuery jqGrid是什么？ JQuery jqGrid是基于JQuery框架的一種Javascript表格插件，也是一種開源項(xiàng)目。它支持多種數(shù)據(jù)源進(jìn)行交互，可以處理大量數(shù)據(jù)，還提供較為靈活和自定義的配置選項(xiàng)。 JQuery jqGrid特點(diǎn)：可高度自定義和靈活 JQuery jqGrid使用簡單和靈活。用戶可以根據(jù)自己的需求和喜好調(diào)整表格的外觀和功能。處理大量數(shù)據(jù) JQuery jqGrid可以處理大量的數(shù)據(jù)，支持分頁和滾動(dòng)操作。這極大地增強(qiáng)了表格的可用性和效率。支持多種數(shù)據(jù)格式 JQuery jqGrid可以與多種數(shù)據(jù)格式進(jìn)行交互，包括XML，JSON，本地?cái)?shù)組等。支持排序和搜索 JQuery jqGrid提供排序和搜索功能，可以根據(jù)表格的列數(shù)據(jù)進(jìn)行排序操作，并進(jìn)行復(fù)雜的搜索。這使得用戶可以更加方便地找到需要的數(shù)據(jù)。支持編輯和行操作 JQuery jqGrid可以編輯和行操作。用戶可以在表格內(nèi)進(jìn)行編輯、刪除、復(fù)制、粘貼等操作，并且支持行拖拽和調(diào)整大小。 JQuery jqGrid使用方法以下介紹JQuery jqGrid的使用方法：引入JQuery jqGrid的文件需要將JQuery jqGrid的CSS和JS文件引入到HTML文件中。例如： <link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css"/> <script type="text/javascript" src="jqgrid/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script> 定義表格標(biāo)簽在HTML文件中定義表格標(biāo)簽的容器元素，例如： <div id="gridContainer"></div> 定義表格屬性定義表格屬性，包括URL，列名，列寬度和數(shù)據(jù)格式等。例如： var grid = $("#gridContainer"); grid.jqGrid({ url: "getData.php", //請求后臺(tái)的URL地址 datatype: "json", //數(shù)據(jù)格式 colNames: ['ID', 'Name', 'Age'], //列名 colModel: [ //列的屬性 { name: 'id', index: 'id', width: 55, sorttype: "int" }, { name: 'name', index: 'name', width: 90 }, { name: 'age', index: 'age', width: 80, align: "right", sorttype: "float" } ], rowNum: 10, //每頁顯示的記錄數(shù)目 rowList: [10, 20, 30], //每頁顯示記錄數(shù)目的選項(xiàng) pager: "#gridPager", //表格分頁的容器 sortable: true, //是否允許列排序 multiselect: true, //是否允許多選 viewrecords: true, //是否顯示記錄數(shù) width: 780, //表格寬度 height: 250 //表格高度 }); 顯示表格將表格數(shù)據(jù)顯示到頁面上，例如： grid.jqGrid('navGrid','#gridPager',{edit:false,add:false,del:false}); JQuery jqGrid常用方法： jqGrid() 用于初始化表格，設(shè)置表格的屬性和配置。 navGrid() 用于創(chuàng)建表格的導(dǎo)航菜單，支持添加、編輯、刪除和搜索等操作。 getRowData() 獲取指定行的數(shù)據(jù)。 setRowData() 設(shè)置指定行的數(shù)據(jù)。 addRowData() 添加一行數(shù)據(jù)到表格中。 delRowData() 刪除指定行的數(shù)據(jù)。 editRow() 編輯指定行的數(shù)據(jù)。 saveRow() 保存指定行的數(shù)據(jù)。總結(jié)： JQuery jqGrid是開發(fā)Web應(yīng)用程序中數(shù)據(jù)表格的一種非常強(qiáng)大、靈活和可自定義的工具。它提供了多種功能，例如分頁、排序、搜索、編輯、滾動(dòng)和導(dǎo)出等，可以與多種數(shù)據(jù)源進(jìn)行交互。它的使用簡單、靈活，能夠處理大量數(shù)據(jù)，具有高度的自定義性。了解了JQuery jqGrid的各種方法，我們可以更好地管理和展示大量的數(shù)據(jù)表格，使得數(shù)據(jù)更加易于管理、搜索和分析。該評論在 2023/8/22 18:44:08 編輯過