制作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>

答

主要错误代码是：

你必须包括在您需要编辑列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选项，它可以提高电网的性能。

我删除了DocType，因为我有在StackOverflow中粘贴代码的问题。可编辑行的示例没有提到需要指定单个列，除非需要一些可编辑的列，而有些则不需要。 – user1306537 2012-04-01 20:08:59

@ user1306537：在[post]（http://meta.stackexchange.com/a/22189/147495）中，您会发现如何格式化代码的简单规则。像''这样的行可以很容易地包含在stackoverflow中。这个例子有什么问题？我只会将'jQuery（'＃rowed3'）'替换为'$（this）'。 – Oleg 2012-04-01 20:11:00

我无法获得可编辑的行。 – user1306537 2012-04-01 20:14:31

制作JqGrid单元格可编辑

相关推荐