狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【JavaScript】WEB jquery jqgrid方法純JS展現和編輯大量數據

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

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

JQuery jqGrid是一種強大、靈活和可自定義的Javascript表格插件,它采用了JQuery框架進行開發,可以幫助用戶快速、輕松地創建和管理復雜的數據表格。它提供了豐富的特性和功能,例如分頁、排序、搜索、編輯、滾動和導出等。

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

JQuery jqGrid是什么?

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

JQuery jqGrid特點:

  1. 可高度自定義和靈活

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

  1. 處理大量數據

JQuery jqGrid可以處理大量的數據,支持分頁和滾動操作。這極大地增強了表格的可用性和效率。

  1. 支持多種數據格式

JQuery jqGrid可以與多種數據格式進行交互,包括XML,JSON,本地數組等。

  1. 支持排序和搜索

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

  1. 支持編輯和行操作

JQuery jqGrid可以編輯和行操作。用戶可以在表格內進行編輯、刪除、復制、粘貼等操作,并且支持行拖拽和調整大小。

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

 首先對Jqgrid網格插件做個簡要的說明。在眾多的表格插件中,Jqgrid的特點是非常鮮明的。

        特點如下:

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

  • 自定義的工具列。

  • 預設的Navigator工具列,可以很容易的使用新增、刪除、編輯、檢視及搜尋等功能。

  • 完整的分頁功能。

  • 按下任一欄位的標頭,皆可以該欄位為排序項目。無論是升序或降序皆可。

  • 預設的action formatter,可以快速而直覺地對每筆資料做運算。

  • 支持多種數據格式。比如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設置,根據locale不同,選擇不同的尾綴)

  • jquery.jqGrid.min.js(jqGrid的核心,可以到jqGrid網站,根據需求選擇模塊下載)

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

1.  <link href="<%=basePath%>main/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

2.  <link href="<%=basePath%>main/css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

3.  <script type="text/javascript" src="<%=basePath%>main/js/jquery-1.7.2.js"></script>

4.  <script type="text/javascript" src="<%=basePath%>main/js/grid.locale-zh_CN.js"></script>

5.  <script type="text/javascript" src="<%=basePath%>main/js/jquery.jqGrid.min.js"></script>

6.  <script type="text/javascript" src="<%=basePath%>main/js/grid.custom.js"></script>

7.  <table id="list"></table>

8.  <div id="page"></div>

table是jqgrid的表格獲取的id

div#page是分頁使用

(2)JS部分

官方文檔說實現一個要想生成一個 Jqgrid ,最直接的方法就是:

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

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

1. jqGrid的重要選項

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

  • url:提交處理數據的地址。

  • datatype:這個參數用于設定將要得到的數據類型。我最常用的是“json”,其余的類型還包括:xml、xmlstring、local、javascript、function、local。

  • mtype: 定義使用哪種方法發起請求,GET或者POST。

  • height:Grid的高度,可以接受數字、%值、auto,默認值為150。

  • width:Grid的寬度,如果未設置,則寬度應為所有列寬的之和;如果設置了寬度,則每列的寬度將會根據shrinkToFit選項的設置,進行設置。

  • shrinkToFit:此選項用于根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值,則每列寬度會根據width成比例縮放;如果shrinkToFit為false且設置了width值,則每列的寬度不會成比例縮放,而是保持原有設置,而Grid將會有水平滾動條。

  • autowidth:默認值為false。如果設為true,則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段;如果當父容器尺寸變化了,同時也需要變化Grid的尺寸的話,則需要在自己的代碼中調用setGridWidth方法來完成。

  • pager:定義頁碼控制條PageBar

  • sortname:指定默認的排序列,可以是列名也可以是數字。此參數會在被傳遞到服務端。

  • viewrecords:設置是否在PagerBar顯示所有記錄的總數。

  • caption:Grid的標題。如果設置了,則將顯示在Grid的Header層 ;如果未設置,則標題區域不顯示 。

  • rowNum:用于設置Grid中一次顯示的行數,默認值為20。

  • rowList:一個數組,用于設置Grid可以接受的rowNum值。例如[10,20,30]。

  • prmNames:這是一個數組,用于設置jqGrid將要向服務端傳遞的參數名稱。我們一般不用去改變什么。

  • colModel:最重要的數組之一,用于設定各列的參數。(稍后詳述)

  • jsonReader:這又是一個數組,用來設定如何解析從Server端發回來的json數據。(稍后詳述)

2. colModel的重要選項

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

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

  • index:設置排序時所使用的索引名稱,這個index名稱會作為sidx參數傳遞到服務端。

  • label:表格顯示的列名。

  • width:設置列的寬度,目前只能接受以px為單位的數值,默認為150。

  • sortable:設置該列是否可以排序,默認為true。

  • search:設置該列是否可以被列為搜索條件,默認為true。

  • resizable:設置列是否可以變更尺寸,默認為true。

  • hidden:設置此列初始化時是否為隱藏狀態,默認為false。

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

3. jsonReader選項

        jsonReader是Jqgrid的一個重要選項,用于設置如何解析從服務端發回來的json數據。其默認值為:

1.  jsonReader : {

2.  root : "rows", // 實際模型的人口

3.  page : "page", // 當前頁碼

4.  total : total, // 當前共多少頁

5.  records : "records", // 總共多少行數據

6.  repeatitems : true,

7.  cell : "cell",

8.  id : "id",

9.  userdata : "userdata", // 數據

10.subgrid : {

11.root : "rows",

12.repeatitems : true,

13.cell : "cell"

14.}

15.}

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

1.  jsonReader : {

2.  root : "dataList", // 服務端保存數據的集合

3.  records : "record", // 可以不要,因為我的服務端是record,不是默認的,才加上的

4.  repeatitems : false

5.  // 其它的全部默認就行

6.  }

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

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


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

上一篇中,Jqgrid已經可以從服務端獲得數據,并顯示在Grid表格中了。下面說一下,如何操作表格及其數據。

        jqGrid有很多方法函數,用來操作數據或者操作Grid表格本身。jqGrid的方法有兩種調用方式:

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

或者

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

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

1. getGridParam

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

1.  var id = $("#gridTable").jqGrid("getGridParam", "selrow");      //獲得選中行的ID

2.  var sort = $("#gridTable").jqGrid("getGridParam", "sortname");  //獲得排序的字段

3.  var page = $("#gridTable").jqGrid("getGridParam", "page");      //獲得當前的頁數

4.  var row = $("#gridTable").jqGrid("getGridParam", "rowNum");     //獲得當前頁的行數

5.  var count = $("#gridTable").jqGrid("getGridParam", "records");  //獲得總記錄數

6.  var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多選時,返回選中行的ID

2. getRowData

這個方法用來獲得某行的數據。它具有一個rowid參數,Jqgrid會根據這個rowid返回對應行的數據,返回的是name:value類型的數組。如果rowid未能被找到,則返回一個空數組;如果未設置rowid參數,則以數組的形式返回Grid的所有行數據。例如:

1.  var getRowdata = function() {

2.  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");

3.  var rowData = $("#gridTable").jqGrid("getRowData", selectedId);


3. addRowData

        這個方法用于向Grid中插入新的一行。執行成功返回true,否則返回false。它具有4個參數:

  • rowid:新行的id號;

  • data:新行的數據對象,形式為{name1:value1,name2: value2…},其中name為colModel中定義的列名稱name;

  • position:插入的位置(first:表格頂端;last:表格底端;before:srcrowid之前;after:srcrowid之后);

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

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

1.  var addStudent= function() {

2.  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");

3.  var dataRow = {

4.  id : 99,

5.  lastName : "Zhang",

6.  firstName : "San",

7.  email : "<a href="mailto:zhang_san@126.com">zhang_san@126.com</a>",

8.  telNo : "0086-12345678"

9.  };

10.if (selectedId) {

11.$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);

12.} else {

13.$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");

14.}

15.};

 4. setRowData

        這個方法用于為某行數據設置數據值。執行成功返回true,否則返回false。它具有3個參數:

  • rowid:更新數據的行id;

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

  • cssprop:如果cssprop為String類型,則會使用jQuery的addClass為行增加相應名稱的CSS類;如果為object類型,則會使用html的css屬性,為行添加樣式。如果只想增加css樣式而不更新數據,可以將data參數設為false。

例如:

1.  var updateStudent = function() {

2.  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");

3.  var dataRow = {

4.  lastName : "Li",

5.  firstName : "Si",

6.  email : "<a href="mailto:li_si@126.com">li_si@126.com</a>"

7.  };

8.  var cssprop = {

9.  color : "#FF0000"

10.};

11.$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);

12.};


5. delRowData

        這個方法用于刪除某行數據。執行成功返回true,否則返回false。具有一個參數rowid,代表要刪除的行id。例如:

1.  var deleteStudent = function() {

2.  var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");

3.  $("#gridTable").jqGrid('delRowData', selectedId);

4.  };


6. trigger(“reloadGrid”)

        根據當前設置,重新載入Grid表格,即意味著向服務端重新發送一個新的請求。此方法只能用于已經構建好的Grid。此外,此方法不會使對colModel所做出的改變生效。應該使用gridUnload來重新載入對colModel的新設置。例如:

1.  $("#gridTable").jqGrid("setGridParam", {

2.  datatype : "json",

3.  search : true,

4.  mtype : "post"

5.  }).trigger("reloadGrid");


7. 其他方法

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

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

 

Jqgrid入門-使用模態對話框編輯表格數據(三)

 

Jqgrid是一個強大的表格插件,它提供了多種方式來編輯數據。這三種方式分別是:

  • Cell Editing——只允許修改某一個單元格內容

  • Inline Editing——允許在jqGrid中直接修改某一行的數據

  • Form Editing——彈出一個新的編輯窗口進行編輯和新增

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

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

1.  // 配置模態對話框

2.  $("#consoleDlg").dialog({

3.  autoOpen : false, // 是否自動彈出窗口

4.  modal : true, // 設置為模態對話框

5.  resizable : true,

6.  width : 500,

7.  height : 300,

8.  position : "center" // 窗口顯示的位置

9.  });


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

1.  gridComplete : function() {

2.  var ids = jQuery("#gridTable").jqGrid('getDataIDs');

3.  for ( var i = 0; i < ids.length; i++) {

4.  var cl = ids[i];

5.  update = "<input type='button' value='修改' onclick='updateStu("

6.  + cl + ")'/>&nbsp;";

7.  del = "<input type='button' value='刪除' onclick='deleteStu("

8.  + cl + ")'/>&nbsp;";

9.  view = "<input type='button' value='查看' onclick='viewStu("

10.+ cl + ")'/>";

11.jQuery("#gridTable").jqGrid('setRowData',

12.ids[i], {

13.process : update + del + view

14.});

15.}

16.},


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

        按鈕已經設置完成了,下面就該操作表格的數據了。

  •         添加數據

        點擊頁面上的新增按鈕,就會彈出剛才初始化的模態對話框。如圖:

       

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

1.  /**

2.  * 彈出新增學生對話框

3.  */

4.  function addStu() {

5.  var consoleDlg = $("#consoleDlg");

6.  consoleDlg.html("");

7.  var a1 = " <iframe src='studentProcess.jsp?op=add'"+ "style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>";

8.  consoleDlg.append(a1);

9.  consoleDlg.dialog("option", "title", "新增學生信息").dialog("open");

10.};


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

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

   這是新增學生的具體方法。

1.  function addStu() {  // 序列化表單

2.  var obj2 = $("#myform").serializeArray();

3.  $.ajax({   url : "QueryActionUrl_addStu.action",

4.  data : obj2,

5.  dataType : "json",

6.  cache : false,

7.  type : "post",

8.  error : function(textStatus, errorThrown) {

9.  window.parent.hiAlert("系統ajax交互錯誤");   },

10.success : function(data, textStatus) {

11.if (data.messageBean.code == "200") {

12.hiAlert(data.messageBean.msg, "提示", function() {

13.window.parent.$("#consoleDlg").dialog("close");      // 刷新表格

14.window.parent.$("#gridTable").jqGrid("setGridParam", {

15.search : true,       mtype : "post"      }).trigger("reloadGrid", [ {

16.page : 1      }

17.]);

18.});

19.} else {

20.hiAlert(data.messageBean.msg, "提示", function() {

21.window.parent.$("#consoleDlg").dialog("close");     });

22.}

23.}

24.});

25.}


  • 修改數據

       修改數據的時候,和剛才新增方法就有點區別了。因為修改的時候要先把數據加載到對話框的表單中。如圖:

 

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

1.  /**

2.  * 彈出修改學生的對話框

3.  */

4.  function updateStu(selectedRowId) {

5.  var consoleDlg = $("#consoleDlg");

6.  consoleDlg.html("");

7.  var str = $("#gridTable").jqGrid("getRowData", selectedRowId); // 根據行ID,獲取選中行的數據

8.  id = {

9.  id : str.id

10.};

11.var a1 = " <iframe src='studentProcess.jsp?op=update&id="

12.+ JSON.stringify(id)

13.+ "' style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>";

14.consoleDlg.append(a1);

15.consoleDlg.dialog("option", "title", "修改學生信息").dialog("open");

16.};

通過和上面新增方法對比,可以發現修改方法是先得到選中行的id,然后得到學生的id,最后通過json傳遞過去。

點擊修改按鈕,提示修改成功后,就可以在表格中看到修改后的學生數據了。

 這是修改學生的方法。

1.  function updateStu() {

2.  var obj2 = $("#myform").serializeArray();

3.  $.ajax({

4.  url : "QueryActionUrl_updateStu.action",

5.  data : obj2,

6.  dataType : "json",

7.  cache : false,

8.  type : "post",

9.  error : function(textStatus, errorThrown) {

10.window.parent.hiAlert("系統ajax交互錯誤");

11.},

12.success : function(data, textStatus) {

13.if (data.messageBean.code == "200") {

14.hiAlert(data.messageBean.msg, "提示", function() {

15.window.parent.$("#consoleDlg").dialog("close");

16.// 刷新表格

17.window.parent.$("#gridTable").jqGrid("setGridParam", {

18.search : true,

19.mtype : "post"

20.}).trigger("reloadGrid", [ {

21.page : 1

22.} ]);

23.});

24.} else {

25.hiAlert(data.messageBean.msg, "提示", function() {

26.window.parent.$("#consoleDlg").dialog("close");

27.});

28.}

29.}

30.});

31.}

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


該文章在 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",     // 加載數據時訪問的url     具體的返回可以是xml,json

    datarype:"json"                              //返回的數據類型,后臺需要返回一個json字符串 json,xml,xmlstring,local,javascript,function

    mtype : 'GET'                                //請求的方式     GET,POST

    height: $(window).height(),              //設置表格高度  auto,%值

    autowidth:ture                              //打開瀏覽器‘寬度自測’

 colName:['用戶名','密碼'],   // 表格表頭

    colModel:[

                {name : 'myac',index :'myac',width : 80,formatter:'actions',delOption:true},

                {label : '用戶',name : 'user',index :'user',width : 80,},

                 ],

   pager : "#gridPager",                       //導航欄,分頁組件<div id="gridPager"></div>

   rowNum : 10,                                //設置顯示記錄條數,默認20,若返回的記錄條數大于rowNum,grid只會顯示rowNum規定的條數

   rowList : [10,20,30],                     //用與設置grid能夠接受的rowNum值

   viewrecords:true,                           //設置是否顯示總條數

   sortname : "time",

   sortorder : 'asc',                             //排序的列,倒序、順序             asc/desc

   multiselect: true,                           //開啟多選

   rownumber : true,                          //左側的行號

   loadonce:                                   //若設置成true,則只從服務器請求一次數據,datatype被修改為local,且以后所有的操作都是基于客戶端的操作

   subGrid: ture                                //默認為false,展開子格

   subGridUrl

   subGridModel

   subGridRowExpandedfunction(){}     //當點擊“+”展開子表格時,將觸發此選項定義的事件方法;

  subGridRowColapsed                          //當點擊“-”收起子表格時,將觸發此選項定義的事件方法;

  width:                                      //調整表格大小

  height                                      //調整表格大小

   pamNames :[]                                //用于設置jqgrid要向server傳遞的參數名稱

   jsonReader:[]                               //用于解析server放回的json數據

});

//jQuery(window).height()代表了當前可見區域的大小,

 

//而jQuery(document).height()則代表了整個文檔的高度,可視具體情況使

 pamNames:默認值

prmNames : {

page:"page", // 表示請求頁碼的參數名稱

rows:"rows", // 表示請求行數的參數名稱

sort: "sidx", // 表示用于排序的列名的參數名稱

order: "sord", // 表示采用的排序方式的參數名稱

search:"_search", // 表示是否是搜索請求的參數名稱

nd:"nd", // 表示已經發送請求的次數的參數名稱

id:"id", // 表示當在編輯數據模塊中發送數據時,使用的id的名稱

oper:"oper", // operation參數名稱

editoper:"edit", // 當在edit模式中提交數據時,操作的名稱

addoper:"add", // 當在add模式中提交數據時,操作的名稱

deloper:"del", // 當在delete模式中提交數據時,操作的名稱

subgridid:"id", // 當點擊以載入數據到子表時,傳遞的數據名稱

npage: null,

totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱,參見jqGrid選項中的rowTotal

}

 

列名:colNames

colNames : [ '操作', '用戶帳號', '用戶密碼', '所屬權限組', '員工id'],

列屬性:colMode                     

label:標簽,標記                    colNames數組為空時,定義此列的標題。

name:對象的屬性名                  其中保留字包括subgridcbrn

index:索引                            //排序,和向server傳遞參數的名稱

align                                   //日期格式,可用/,-和.。作為間隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期

key                                      //設置主鍵列

hidedlg                              //該值不會出現在模式對話框中,默認值為false

width:寬度                             //  px單位

hidden:false                     //該列是否隱藏,默認false

align:center                      //居中

editable:可編輯的

editoptios:

edittype                           定義行編輯和表單模式的編輯類型,可以是texttextareaselectcheckbox passwordbuttonimagefile

editrules   

datefmt                          //日期格式,可用/,-和.。作為間隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期                 

sortable:true                   //該列是否可以排序 ,默認true

sorttype                        datatypelocal時,用于定義排序列類型。可取int/integer(整數)、float/number/currency(小數)、date(日期)、text(文本)

resizable: true,              //該列尺寸是否能更改,默認true

fromoptions                // 定義表單編輯的各種選項

formatter:'actions'           //用來預設類型或格式化該列的自定義函數名 ,常用預設格式: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]);                         //加載本地數據  datatype:local

 jQuery("#gird_id").jqGrid('navGrid','#gridGager',{edit:false,add:false,del:falseposition:'right'}); 

 //設置的就是不顯示編輯、添加、刪除按鈕(在分頁組件里)

 jQuery("#grid_id").jqGrid('getGridParam','selrow');                  //返回選中行的id

 jQuery("#grid_id").jqGrid('getRowData',rowId);                       //獲得選中行數據,rowId 行號

 jQuery("#grid_id").jqGrid('delRowData',rowId);                       //刪除一行記錄,servser不會刪除

 jQuery("#grid_id").jqGrid('setRowData',rowId,datarow);            //更新一行數據,server不更新

 jQuery("#grid_id").jqGrid('addRowData',rowId,datarow);           //添加一行數據,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')               //獲得總記錄條數

 

重新載入數據:

  jQuery(grid_selector).setGridParam({

        data : data[0].dataList

       }).trigger("reloadGrid");

 

清空數據:

$(grid_selector).clearGridData();



該評論在 2023/8/22 18:38:57 編輯過
admin
2023年8月22日 18:39
 JQuery jqGrid是一種強大、靈活和可自定義的Javascript表格插件,它采用了JQuery框架進行開發,可以幫助用戶快速、輕松地創建和管理復雜的數據表格。它提供了豐富的特性和功能,例如分頁、排序、搜索、編輯、滾動和導出等。

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

JQuery jqGrid是什么?

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

JQuery jqGrid特點:

  1. 可高度自定義和靈活

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

  1. 處理大量數據

JQuery jqGrid可以處理大量的數據,支持分頁和滾動操作。這極大地增強了表格的可用性和效率。

  1. 支持多種數據格式

JQuery jqGrid可以與多種數據格式進行交互,包括XML,JSON,本地數組等。

  1. 支持排序和搜索

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

  1. 支持編輯和行操作

JQuery jqGrid可以編輯和行操作。用戶可以在表格內進行編輯、刪除、復制、粘貼等操作,并且支持行拖拽和調整大小。

JQuery jqGrid使用方法

以下介紹JQuery jqGrid的使用方法:

  1. 引入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>


  1. 定義表格標簽

在HTML文件中定義表格標簽的容器元素,例如:

<div id="gridContainer"></div>

  1. 定義表格屬性

定義表格屬性,包括URL,列名,列寬度和數據格式等。例如:

var grid = $("#gridContainer");

grid.jqGrid({

    url: "getData.php",  //請求后臺的URL地址

    datatype: "json",   //數據格式

    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,  //每頁顯示的記錄數目

    rowList: [10, 20, 30],  //每頁顯示記錄數目的選項

    pager: "#gridPager",  //表格分頁的容器

    sortable: true,  //是否允許列排序

    multiselect: true,  //是否允許多選

    viewrecords: true,  //是否顯示記錄數

    width: 780,  //表格寬度

    height: 250  //表格高度

});


  1. 顯示表格

將表格數據顯示到頁面上,例如:

grid.jqGrid('navGrid','#gridPager',{edit:false,add:false,del:false});

JQuery jqGrid常用方法:

  1. jqGrid()

用于初始化表格,設置表格的屬性和配置。

  1. navGrid()

用于創建表格的導航菜單,支持添加、編輯、刪除和搜索等操作。

  1. getRowData()

獲取指定行的數據。

  1. setRowData()

設置指定行的數據。

  1. addRowData()

添加一行數據到表格中。

  1. delRowData()

刪除指定行的數據。

  1. editRow()

編輯指定行的數據。

  1. saveRow()

保存指定行的數據。

總結:

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


該評論在 2023/8/22 18:44:08 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved