製作JqGrid單元格可編輯

我的目標是使用JQuery和JqGrid內聯編輯數據網格中的單元格。基於ajax請求和json響應，我得到了網格填充。不幸的是，我不能讓單元格在點擊行時變得可編輯。製作JqGrid單元格可編輯

我嘗試了Chrome和Safari，並進行了兩天的研究，仍然沒有運氣。我下面使用的鏈接沒有幫助：

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

http://www.trirand.net/demoaspnetmvc.aspx

接着我又說，會叫editRow並將其值設置爲true onRowSelect事件教程。然而它從來沒有工作，我不明白爲什麼。

任何幫助將不勝感激。

代碼：

<html> 
<head> 
    <title>Test</title> 

    <link rel="stylesheet" type="text/css" href="ui.jqgrid.css"/> 
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/> 

    <style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     font-size: 75%; 
    } 
    </style> 


    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    <script src="i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script src="jquery.jqGrid.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      jQuery("#list").jqGrid({ 
         url:'http://localhost:8080/jblog/messages', 
         datatype:'json', 
         jsonReader: { 
          root: 'rows', 
          repeatitems: false, 
          page: 'currentPage', 
          total: 'totalRecords' 
         }, 
         mtype:'GET', 
         colNames:['Message ID', 'Message Content'], 
         colModel:[ 
          {name:'messageId', index:'messageId'}, 
          {name:'content', index:'content', width:'400'} 
         ], 
         viewrecords:true, 
         caption:'My first grid', 
         rowNum:30, 
         rowList:[10,20,30], 
         pager: '#pager', 
         sortname: 'messageId', 
         onSelectRow: function(id){ 
          console.log('onSelectRow'); 
          editRow(id); 
          }, 
         editurl:'http://localhost:8080/jblog/messages' 
        }); 
     }); 
    </script> 

</head> 
<body> 
<table id="list"> 
    <tr> 
     <td/> 
    </tr> 
</table> 
<div id="pager"></div> 
<script type="text/javascript"> 
      var lastSelection; 

      function editRow(id) { 
       console.log("editRow"); 
       if (id && id !== lastSelection) { 
        console.log("setRowToEdit"); 
        var grid = $("#list"); 
        grid.restoreRow(lastSelection); 
        console.log("id " + id); 
        grid.editRow(id, true); 
        lastSelection = id; 
       } 
      } 
</script> 
</body> 
</html>

來源

2012-04-01 user1306537

主要錯誤代碼是：

你必須包括在您需要編輯列editable: true財產。

另外，你應該做以下的代碼更改：

你應該包括哪些<html>聲明HTML/XHTML的您所使用的方言之前<!DOCTYPE html ...>線。如果您使用HTML5方言，則該行僅爲<!DOCTYPE html>。在你的情況下，它似乎可以是對應於XHTML 1.0 Strict的行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。有關更多詳細信息，請參閱the documentation。
我建議你減少全局變量的數量。變量lastSelection和函數editRow應該只在onSelectRow的外部範圍內。所以你可以在$(document).ready(function() {/*here!!!*/});區塊內移動。我建議你最好使用匿名函數，並將代碼editRow直接放在代碼onSelectRow中。順便說一句，您可以使用$(this)而不是$("#list")裏面的onSelectRow。它使代碼快速一點，並提高了代碼的維護性，因爲您可以更輕鬆地剪切代碼片段&。
您不應該在Ajax請求中使用像這樣的前綴（請參閱url和editurl選項）。而不是你應該使用url:'/jblog/messages'或url:'jblog/messages'的網址。由於Ajax的same origin policy被禁止訪問另一個服務器作爲當前服務器從中加載當前頁面或訪問另一個端口。
我建議你總是使用gridview: true jqGrid選項，它可以提高電網的性能。

來源

2012-04-01 19:27:43 Oleg

我刪除了DocType，因爲我有在StackOverflow中粘貼代碼的問題。可編輯行的示例沒有提到需要指定單個列，除非需要一些可編輯的列，而有些則不需要。 – user1306537 2012-04-01 20:08:59

@ user1306537：在[post]（http://meta.stackexchange.com/a/22189/147495）中，您會發現如何格式化代碼的簡單規則。像'<！DOCTYPE html>'這樣的行可以很容易地包含在stackoverflow中。這個例子有什麼問題？我只會將'jQuery（'＃rowed3'）'替換爲'$（this）'。 – Oleg 2012-04-01 20:11:00

我無法獲得可編輯的行。 – user1306537 2012-04-01 20:14:31

製作JqGrid單元格可編輯

回答

相關問題