的jqGrid不能在线编辑

我一直在寻找遍布互联网的解决方案，以我的简单的问题（我希望），但遗憾的是没有任何帮助！..的jqGrid不能在线编辑

我与jqGrid的初学者，我已经成功地去到显示我所有的样本阵列数据在表中..我想要的是能够编辑内联的“角色”列并将其保存回阵列数据...我使用Zend框架，并有此问题：

我的问题

我根本无法编辑数据。我可以选择并高亮显示像往常一样，在没有提供任何textarea的..

这里是我的HTML（请核实我使用正确的库）：

<html> 
<head> 
    <title>JqGrid Test</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery.jqGrid-4.4.0/css/ui.jqgrid.css" /> 
    <script src="/js/jquery.jqGrid-4.4.0/js/jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script src="/js/jquery.jqGrid-4.4.0/js/i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script src="/js/jquery.jqGrid-4.4.0/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <script src="/js/test/index.js" type="text/javascript"> </script> 
    <script src="/js/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>  
    <script src="/js/jquery.jqGrid-4.4.0/src/grid.loader.js" type="text/javascript"> </script>  
</head> 
<body> 
    <table id="list" class="scroll"></table> 
    <br /> 
</body> 
</html>

下一页我index.js：

$(document).ready(function(){ 
    var lastsel2; 
    jQuery("#list").jqGrid({ 
     datatype: "local", 
     height: 250, 
     colNames:['Role Id','name'], 
     colModel:[ 
      {name:'id',index:'id', width:60, sorttype:"int", editable: true},   
      {name:'name',index:'name', width:100, sortable:false,editable: true, 
       edittype:"textarea", editoptions:{rows:"2",cols:"10" },  
     ], 
     onSelectRow: function(id){ 
      if(id && id!==lastsel2){ 
       jQuery('#list').restoreRow(lastsel2); 
       jQuery('#list').editRow(id,true); 
       lastsel2=id; 
      } 
     }, 
     caption: "Manipulating Array Data", 
    }); 
    var mydata = [ 
      {id:"1",name:"test"}, 
      {id:"2",name:"test2"}, 
      {id:"3",name:"test3"}, 
      {id:"4",name:"test"}, 
      {id:"5",name:"test2"}, 
      {id:"6",name:"test3"}, 
      {id:"7",name:"test"}, 
      {id:"8",name:"test2"}, 
      {id:"9",name:"test3"} 
     ]; 
    for(var i=0;i<=mydata.length;i++) 
     jQuery("#list").jqGrid('addRowData',i+1,mydata[i]); 
});

我错过了什么？我希望我的问题很明确，我感谢并赞赏所有发布回复的人！

来源

2012-10-18 1291

您发布的代码中存在很多错误。

如果没有<!DOCTYPE html ...，请不要使用<html>。这意味着HTML的quirks mode。后面的HTML代码看起来像XHTML。所以，你应该用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

你应该只包括一个版本的任何JavaScript库。在你的代码中，你包含了第一个jQuery 1.8.2（它在src属性中也是错误的，它应该是src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"），然后包含jquery-1.7.2.min.js。以同样的方式，您包括第一个grid.locale-en.js和jquery.jqGrid.min.js，然后包括grid.loader.js，它将包含相同的jqGrid代码，但未被最小化。
下一点不是一个真正的错误，但你可以删除class="scroll"，因为许多版本jqGrid没有使用它。
'name'列的定义包含语法错误：您必须在'name'列的定义末尾包含}。
您使用for(var i=0;i<=mydata.length;i++)而不是for(var i=0;i<mydata.length;i++)。用于填充网格的addRowData的使用很糟糕且缓慢。您应该在创建jqGrid的代码前添加定义mydata的代码，并添加data: mydata作为附加参数。
如果要执行本地编辑数据，您必须将其他参数editurl: "clientArray"添加到网格。

接下来的问题是我写回答的主要原因。问题在于你在网格中定义了可编辑列'id'。问题在于jqGrid内部使用"id"作为rowid的id属性（<tr>元素），也称为rowid。所以你应该重命名id列到另一个名字。此外，您应该在输入数据中提供id属性，这些属性将用作rowid。

如果你愿意把你原来的"id"名称与自定义数据的列，并希望这样的jqGrid使用任何其他财产名称，如"id1"例如，你必须包括

localReader: {id: "id1"}, // needed for reading of the rowids 
prmNames: {id: "id1"}  // needed for editing

在其rowid情况mydata可能看起来像

var mydata = [ 
     {id: "1", id1: "10", name: "test"}, 
     {id: "2", id1: "20", name: "test2"}, 
     {id: "3", id1: "30", name: "test3"}, 
     {id: "4", id1: "40", name: "test"}, 
     {id: "5", id1: "50", name: "test2"}, 
     {id: "6", id1: "60", name: "test3"}, 
     {id: "7", id1: "70", name: "test"}, 
     {id: "8", id1: "80", name: "test2"}, 
     {id: "9", id1: "90", name: "test3"} 
    ];

Here你会看到这是固定的您的原代码演示。它使用值“10”，“20”，...，“90”（id1）作为rowid（id属性的值为<tr>元素），并将id用于可编辑的自定义数据。

来源

2012-10-18 18:02:09 Oleg

感谢您的回复..我了解我的错误，并再次感谢您编辑我的代码。昨天我浏览了我的jqGrid库，发现我忘记了包含“jquery.jqGrid.src.js”，之后所有的功能都是正常的。再次感谢！ – 1291

@ 1291：不客气！您发布的代码已经包含'jquery.jqGrid.min.js'，它是'jquery.jqGrid.src.js'的最小版本。所以你应该在下面的文件中包含** 1 **：1）'jquery.jqGrid.min.js' 2）'jquery.jqGrid.src.js' 3）'grid.loader.js'。文件'jquery.jqGrid.src.js'是包含在'grid.loader.js'中的文件的串联，但'grid.locale-en.js'除外。 – Oleg

的jqGrid不能在线编辑

回答

相关问题