的jqGrid聯編輯功能

我想對在線編輯功能，當cuser點擊一個特定行，他應該能夠編輯分配給我的jqGrid，即..的jqGrid聯編輯功能

我下面這個網址爲jQuery的代碼，但它不工作，我不能夠獲取編輯也

http://www.trirand.com/blog/jqgrid/jqgrid.html#

這是我的看法

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

JavaScript代碼：

<script type="text/javascript"> 
    $(function() { 
     var lastsel; 
     jQuery("#list").jqGrid({ 
      url: '/Home/GetStudents/', 
      datatype: 'json', 
      mtype: 'POST', 
      colNames: ['StudentID', 'FirstName', 'LastName', 'Email'], 
      colModel: [ 
     { name: 'StudentID',sortable: false,key:true }, 
     { name: 'FirstName' }, 
     { name: 'LastName', sortable: false}, 
     { name: 'Email', width: 200, sortable: false}], 
     cmTemplate: {align: 'center', editable: true}, 
      pager: '#pager', 
      width: 750, 
      rowNum: 15, 
      rowList: [5, 10, 20, 50], 
      sortname: 'StudentID', 
      sortorder: "asc", 
      viewrecords: true, 
      caption: ' My First JQgrid', 
      onSelectRow: function (StudentID) { 


       if (StudentID != lastsel) { 

        lastsel = StudentID; 
        jQuery('#list').jqGrid('restoreRow', lastsel); 
        jQuery('#list').jqGrid('editRow', StudentID, true); 


       } 

      }, 

      editurl: '/Home/GetStudents/', 
      caption: "Using events example" 

     }); 
     jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false }); 
    }); 

</script>

這些都是我的劇本，我加

<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" /> 
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" /> 
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script> 
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="/Scripts/rowedex3.js" type="text/javascript"></script>

來源

2012-11-02 being fab

你所定義的jqGrid的editurl選項，將負責在服務器端行的保存處理的第一。

下一個問題是：你應該定義lastsel變量來使用，如果在onSelectRow回調。

我建議你的colModel項目，如width: 150或sortable: true（見the documentation）還默認屬性。如果您需要重新定義網格的列的一些默認設置就可以使用cmTemplate（見here）瞭解更多信息。您可以減少網格colModel以下

colModel: [ 
     { name: 'StudentID', sortable: false, key: true }, 
     { name: 'FirstName' }, 
     { name: 'LastName', sortable: false }, 
     { name: 'Email', width: 200, sortable: false}], 
cmTemplate: {align: 'center', editable: true}

這種變化將會使代碼更易讀，易維護。我加key: true以確保jqGrid的使用谷從列的ROWID。取決於您返回的JSON數據的格式可能不是必需的，但它使我認爲代碼更易讀，更易於維護。

你還可以去除用於電網<table>元素的所有屬性。

此外，由於性能原因，我建議您始終使用jqGrid的gridview: true選項並將pager: jQuery('#pager')替換爲pager: '#pager'。

來源

2012-11-02 12:35:14 Oleg

我做ü以上，但仍提到的所有更改其不工作，爲editurl我剛纔提到的樣本網址，因爲首先我需要編輯，比晚我能想到製作改變 –

@beingfab：正是「不工作是什麼「？內聯編輯是否會開始？您是否可以在IE或Chrome的Fiddler，Firebug或Developer Tools中看到保存的行請求將被髮送到服務器？ – Oleg

不，我不能夠得到單擊行的編輯文本框，是新代碼正確的，我已經提出和我的問題 –

的jqGrid聯編輯功能

回答

相關問題