第4個jqGrid範例: 資料列處理

2010/02/14 |

| 點擊數: 10 / 24129

jqGrid Method的執行方法語法是：

  $("#grid_id").jqGrid('方法', 參數 [,參數...]);

部份常用方法列表如下：

方法	說明
getRowData	取得列物件
delRowData	刪除指定的資料列
setRowData	修改指定的資料列
setSelection	切換指定的列為勾選或不勾選
addRowData	新增一筆資料列到最後
sortGrid	對Grid資料做排序處理
reloadGrid	重新讀資料到Grid

部份Grid參數(getGridParam)：

參數	說明
url	取資料的網址
sortname	排序的欄名
sortorder	排序是升冪或降冪
selrow	取得被選取列
selarrrow	多選狀態下取得被選取的列記錄(select array row)
page	取得目前頁碼
rowNum	要求的列數
datatype	資料類型
records	Grid裡的記錄筆數

將options multiselect設成true時，在資料每列左方會出現勾選框供使用者打勾操作，要取回勾選了的列記錄，使用$("#list1″).jqGrid("getGridParam", "selarrrow")就可以了。

資料列處理範例(修改自示範資料夾裡的manipex.html與getex.html、setex.html、multiex.html)：

< %@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
< %@ include file="/jqgrid/jq_inc.jspf" %>
<style type="text/css">
  .altClass {
    background: lightYellow;
    color: red;
  }
</style>
</head>
<table id="list1"></table>
<div id="pager1"></div>
<input type="button" id="btnGetRowData" value="選取列的資料(getRowData)"/>
<input type="button" id="btnDelRowData" value="刪除選取列(delRowData)"/>
<input type="button" id="btnSetRowData" value="設定選取列(setRowData)"/>
<input type="button" id="btnAddRowData" value="複製資料列(addRowData)"/>
<input type="button" id="btnGetArrayRow" value="多選資料列(selarrrow)"/><br />
<select id="selParam">
  <option value='url'>url</option>
  <option value='sortname'>sortname</option>
  <option value='sortorder'>sortorder</option>
  <option value='selrow'>selrow</option>
  <option value='page'>page</option>
  <option value='rowNum'>rowNum</option>
  <option value='records'>records</option>
  <option value='datatype'>datatype</option>
  <option value='caption'>caption</option>
</select>
<input type="button" id="btnGetParam" value="getGridParam"/><br />
<input id="newValue"/>
<input type="button" id="btnSortGrid" value="排序"/>
<hr />
<span id="spaMsg"></span>
<br />
<br />
</html>

<script type="text/javascript">
  jQuery(document).ready(function () {
    $.jgrid.defaults.altclass = "altClass";  // 奇偶列使用不同的樣式形成斑馬紋

    jQuery("#list1").jqGrid({
      url:'test1_xml.jsp',  // 主機端提供資料的網址
      datatype: "xml",
      colNames:['<font color="red">使用者代碼</font>','姓名', '密碼'],
      colModel:[
        { name:'userid', index:'userid', width:75 },
        { name:'username', index:'username', width:90, sortable:true },
        { name:'passwd', index:'passwd', width:100,align:'center' }
      ],
      rowNum:10,  // 由Server取回10筆
      rowList:[10,20,30],  // 每頁顯示筆數
      pager: jQuery('#pager1'),
      sortname: 'userid',
      sortorder: "desc",
      height: "auto",  // Grid高度
      autowidth: true, // 自動欄寬
      viewrecords: true,
      altRows: true,
      //footerrow: true,
      gridview: true,  // 設定成true以快速大量資料集之載入
      loadonce: true,  // 只由Server讀一次資料
      rownumbers: true,
      multiselect: true,  // 顯示勾選框
      caption:"jqGrid測試3"
    });
    // 要顯示編輯與新增按鈕時使用下列指令
    jQuery("#list1").jqGrid('navGrid', '#pager1', {edit:false,add:false,del:false});

    $("#btnGetRowData").click(function() {
      var id = $("#list1").jqGrid('getGridParam','selrow');
      if (id) {
        var row = $("#list1").jqGrid('getRowData', id);
        $("#spaMsg").text("被選取列：userid=" + row.userid +
                          " username=" + row.username +
                          " passwd=" + row.passwd);
      } else {
        $("#spaMsg").text("請先選取一列資料列。");
      }
    });  // getRowData

    $("#btnDelRowData").click(function() {
      var id = $("#list1").jqGrid('getGridParam','selrow');
      if (id) {
        var row = $("#list1").jqGrid('delRowData', id);
        $("#spaMsg").html("刪除被選取列：id=" + id + "<br />要叫用Server程式才會真的刪除");
      } else {
        $("#spaMsg").text("請先選取一列資料列。");
      }
    });  // delRowData

    $("#btnSetRowData").click(function() {
      var id = $("#list1").jqGrid('getGridParam','selrow');
      if (id) {
        var row = $("#list1").jqGrid('getRowData', id);
        var _sNewUserid = row.userid.toLowerCase();
        var row = $("#list1").jqGrid('setRowData', id, {userid: _sNewUserid});
        $("#spaMsg").html("userid改成小寫<br />要叫用Server程式才會真的修改");
      } else {
        $("#spaMsg").text("請先選取一列資料列。");
      }
    });  // setRowData

    $("#btnAddRowData").click(function() {
      var id = $("#list1").jqGrid('getGridParam','selrow');
      if (id) {
        var _iCount = $("#list1").jqGrid('getGridParam', 'records');
        var row = $("#list1").jqGrid('getRowData', id);
        $("#list1").jqGrid('addRowData', _iCount+1, row);
        $("#spaMsg").html("複製被選取列的資料");
      } else {
        $("#spaMsg").text("請先選取一列資料列。");
      }
    });  // addRowData

    $("#btnGetArrayRow").click(function() {
      var _aIDs = $("#list1").jqGrid('getGridParam','selarrrow');
      if (_aIDs.length > 0) {
        for (var i=0; i < _aIDs.length; i++) {
          var id = _aIDs[i];
          var row = $("#list1").jqGrid('getRowData', id);
          alert("勾選[" + (i+1) + "]=" + row.userid + "," + row.username);
        }
      } else {
        $("#spaMsg").text("請先勾選資料列。");
      }
    });  // getArrayrow

    $("#btnGetParam").click(function() {
      var _sParam = $("#selParam").val();
      $("#spaMsg").html(_sParam + '=' + $("#list1").jqGrid('getGridParam', _sParam));
    });  // addRowData

    $("#btnSortGrid").click(function() {
      var _sNewValue = $("#newValue").val();
      if ("userid,username,passwd".indexOf(_sNewValue) >= 0) {
        $("#list1").jqGrid('sortGrid', _sNewValue, false);
      }
    });  // sortGrid

  }); // ready()

</script>

jqGrid data manipulation

範例檔案下載(請用右鍵另存目標)

範例1	Local array: my_localex.html
範例2	Local array 2: my_localex2.jsp
範例3	XML類型: my_xmlex.jsp XML字串類型: my_xmlstringex.jsp JSP含入檔: jq_inc.jspf 產生資料的程式範例：test1_xml.jsp
範例4	資料列處理程式: my_manipex.jsp

您可能也會有興趣的類似文章

第3個jqGrid範例: XML與XML STRING格式 (0則留言, 2010/02/14)
第一個jqGrid範例：Local array (1則留言, 2010/02/13)
第2個jqGrid範例：增加額外選項設定 (6則留言, 2010/02/13)
jQuery在Xuite的測試 (0則留言, 2007/10/01)
jQuery選擇器測試與範例 (0則留言, 2007/09/29)
jQuery神奇的選擇器(Selector) (2則留言, 2007/09/28)
FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
使用jQuery的效益 (0則留言, 2007/09/23)
在Xuite裡使用jQuery的重點 (0則留言, 2007/09/22)
jQuery TreeView插件IE異常解決方法 (0則留言, 2007/11/13)
使用TiddlyWiki彙總部落格文章的方法與心得 (4則留言, 2007/12/01)
替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
方便查閱的jQuery 1.2 Cheat Sheet (1則留言, 2007/09/25)
在Xuite測試 jQuery (0則留言, 2007/09/12)

老少咸宜

2010/03/28 於 11:32:52 » 留言

不好意思, 您這四個jqGrid範例後面的全部都下載不了, 可否重PO檔案造福網友, 非常感謝您。

簡睿:

2010/03/28 於 19:59:41 » 留言

Sorry, 已經更新了，請再試看看。

2010/03/29 於 21:19:21 » 留言

真是不好意思, 打擾您了, 我還是無法下載這四個jqGrid範例, 每個連結按下去都是空白頁。可否麻煩您email給我, 非常感謝您。

簡睿:

2010/03/29 於 22:12:50 » 留言

咦，奇怪，SkyDrive的網址怎麼變來變去???

我換成我網站的固定網址了，請用右鍵另存新檔。

jack

2010/04/07 於 22:37:37 » 留言

請問一下，要如何刪除多筆資料。

謝謝

簡睿

2010/04/07 於 23:26:02 » 留言

要加入multiselect:true選項，這樣每列會出現勾選的checkbox, 再寫個getRowData的loop來刪除。
- jack
  
  2010/04/08 於 09:20:42 » 留言
  
  非常感謝您
  的回答~

2010/04/08 於 09:50:25 » 留言

不好意思，我還有個問題就是
jqGrid(‘addRowData’)
要怎麼把資料傳到資料庫去
謝謝

簡睿

2010/04/09 於 00:00:08 » 留言

jqGrid(‘addRowData’)是把記錄加到jqGrid的物件裡，並不是新增資料庫的記錄。

新增的操作應該是navGrid的add按鈕開啟的form視窗裡輸入，按Save後透過editurl傳回後台處理。

周日來得及得話，希望能再加個範例說明。
- jack
  
  2010/04/09 於 19:22:10 » 留言
  
  所以，就沒辨法同步新增就是了。
  
  謝謝
  
  你的解答

Bryant

2010/11/04 於 16:29:29 » 留言

您好，拜讀了您的文章後我也想使用jqGrid，我用的是ASP.NET，在套用jqGrid前已確定Gridview已完成data binding，但套用jqGrid後，除了標題欄之外一片空白，程式碼如下，煩請您幫我看一下小弟那裡遺漏了，感謝您。

$(document).ready(function() {
jQuery(‘#GridView1′).jqGrid({
url: ‘jqGrid.aspx’,
datatype: "xml",
height: 250,
caption: "jqGrid Demo",
gridview: true,

colNames:['編號','標籤名稱', '說明', '建立者','建立日期','更新日期'],
colModel:[
{name:'Label_ID',index:'Label_ID', width:60, sorttype:"int"},
{name:'Label_Name',index:'Label_Name', width:90, sorttype:"text"},
{name:'Label_Desc',index:'Label_Desc', width:100},
{name:'Create_User',index:'Create_User', width:80, align:"right",sorttype:"text"},
{name:'Create_Date',index:'Create_Date', width:80, align:"right",sorttype:"text"},
{name:'Update_Date',index:'Update_Date', width:80,align:"right",sorttype:"text"}]

});
});