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

由 · 發表於: · 更新於: | 瀏覽數: 1 / 95392

標籤：

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
  1. XML類型: my_xmlex.jsp
  2. XML字串類型: my_xmlstringex.jsp
  3. JSP含入檔: jq_inc.jspf
  4. 產生資料的程式範例：test1_xml.jsp
範例4 資料列處理程式: my_manipex.jsp

##

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

簡睿

服務於軟體業的資訊老兵。興趣廣泛，學習力佳，樂於分享所知所學。

您可能也會喜歡…

15 個回應

  1. 陽光表示:
    2011/11/1711:59:26

    你好~請問有沒有遇過Uncaught jqGrid – No such method: getPostData這個問題
    一直辨識不到我的jqGrid

    回覆
  2. Bryant表示:
    2010/11/0510:42:57

    原來如此，我鬧了個笑話，我還以為在jqGrid中指定Gridview就可以使用了，原來是先要將資料轉為XML，謝謝您的提點，我再試看看，感謝您!!

    回覆
  3. Bryant表示:
    2010/11/0416: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”}]

    });
    });

    回覆
    • 簡睿表示:
      2010/11/0420:32:18

      我猜可能是jqGrid.aspx沒有傳回XML的內容吧，叫用jqGrid.aspx看看網頁裡會否寫回需要的XML內容。

      回覆
  4. jack表示:
    2010/04/0809:50:25

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

    回覆
    • 簡睿表示:
      2010/04/0900:00:08

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

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

      周日來得及得話，希望能再加個範例說明。

      回覆
  5. jack表示:
    2010/04/0722:37:37

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

    謝謝

    回覆
  6. 老少咸宜表示:
    2010/03/2921:19:21

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

    回覆
    • 簡睿:表示:
      2010/03/2922:12:50

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

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

      回覆
  7. 老少咸宜表示:
    2010/03/2811:32:52

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

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *