2012-12-05 116 views
0

http://www.trirand.com/blog/jqgrid/jqgrid.htmljqGrid的自定義編輯問題

我有5列jqGrid的,與第一列操作,在第一列我有3個按鈕作爲編輯,保存,取消。當我將數據列表綁定到jqgrid時,我有兩個問題...首先是列中的數據出現錯位,因爲第一列有3個按鈕,列表中的列數據綁定在第一列網格列的行列名稱和所有其他列數據的行被錯置

當我單擊操作列中的編輯按鈕時,網格中的所有行都支持內聯編輯功能,包括操作列,因此沒有選擇點擊保存。

我的jQuery代碼:

 <script type="text/javascript"> 
     $(function() { 
     var lastsel; 

     jQuery("#list").jqGrid({ 
      url: '/Home/GetStudents/', 
      datatype: 'json', 

      mtype: 'POST', 
      colNames: ['Actions', 'StudentID', 'FirstName', 'LastName', 'Email'], 
      colModel: [ 
     { name: 'act', index: 'act', width: 75, sortable: false }, 
     { name: 'StudentID', sortable: false, key: true }, 
     { name: 'FirstName', key: true }, 
     { name: 'LastName', sortable: false, key: true }, 
     { name: 'Email', width: 200, sortable: false, key: true}], 
      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', 

      gridComplete: function() { 
       var ids = jQuery("#list").jqGrid('getDataIDs'); 

       for (var i = 0; i < ids.length; i++) { 
        var cl = ids[i]; 
        be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" />"; 
        se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" />"; 
        ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />"; 
        jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce }); 
       } 
      }, 

      editurl: '/Home/About/', 
      //    data: { get_param: selectedDescription }, 
      caption: "jQgrid Sample" 

     }); 

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

</script> 
+0

很難理解你有什麼「錯位」。一張照片會有幫助。演示的代碼來自jqGrid的*非常舊的*版本。使用'formatter:「actions」'是不是更好?從jqGrid 3.8.2開始,您可以使用格式化程序(請參閱[這裏](http://stackoverflow.com/a/5204793/315935))。您應該另外*總是*使用'gridview:true'來提高網格的性能(詳情請參見[這裏](http://stackoverflow.com/a/12519858/315935))。 – Oleg

+0

我添加了圖像,我的意思是名字顯示在id列中,姓氏在firstname列中etcc ... –

回答

0

您使用cmTemplate: { editable: true },所以你應該act'列的定義添加editable: true財產。此外,如果在colModel的起始處添加新列,則必須調整從服務器返回的JSON中元素的位置。此外它可以是只有一個列與key: true屬性。這意味着行的id屬性的值(id<tr>)將從列中獲得。如果您使用該屬性,則來自JSON輸入的id屬性將被忽略。只能使用key: true的列中包含的唯一值。