jqGrid 不能内联编辑答案

【问题标题】：jqGrid cannot inline editjqGrid 不能内联编辑
【发布时间】：2012-10-09 05:08:42
【问题描述】：

我一直在互联网上寻找解决我的简单问题的方法（我希望如此），但不幸的是没有任何帮助！..

我是 jqGrid 的初学者，我已经成功地将我的所有示例数组数据显示在一个表中。我想要的是能够内联编辑“角色”列并将其保存回数组数据...我正在使用 Zend 框架并遇到这个问题：

我的问题

我根本无法编辑数据。我可以像往常一样选择和突出显示，没有提供文本区域..

这是我的 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]);
});

我错过了什么？我希望我的问题很清楚，我感谢并感谢所有发表回复的人！

【问题讨论】：

标签： php jquery jquery-ui zend-framework jqgrid

【解决方案1】：

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

你不应该在没有<!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 代码，但未最小化。
下一点不是真正的错误，但您可以删除 jqGrid 没有使用的class="scroll"，因为许多版本很多。
'name' 列的定义包含语法错误：您必须在'name' 列的定义末尾包含}。
您使用for(var i=0;i<=mydata.length;i++) 而不是for(var i=0;i<mydata.length;i++)。使用addRowData 填充网格很糟糕而且很慢。您只需将定义 mydata 的代码移到创建 jqGrid 的代码之前，并添加 data: mydata 作为附加参数。
如果您想实现数据的本地编辑，您必须在网格中添加额外的参数editurl: "clientArray"。

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

如果您确实希望为包含自定义数据的列保留原始 "id" 名称，并希望 jqGrid 使用任何其他属性名称（例如 "id1"）作为必须包含的 rowid

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

如果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）作为 rowids（<tr> 元素的id 属性的值），并将id 与您的自定义数据一起使用可以编辑。

【讨论】：

感谢您的回复。我理解我的错误并再次感谢您编辑我的代码。昨天我浏览了我的 jqGrid 库，发现我忘记包含“jquery.jqGrid.src.js”，之后一切正常。再次感谢！
@1291：不客气！您发布的代码已经包含jquery.jqGrid.min.js，这是jquery.jqGrid.src.js 的最小化版本。因此，您应该包含以下文件中的 one：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 除外。