0

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

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

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

4

1 回答 1

4

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

  • 你不应该使用<html>没有<!DOCTYPE html .... 这意味着HTML的怪癖模式。后面的 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很糟糕而且很慢。您应该只移动在mydata创建 jqGrid 的代码之前定义的代码并添加data: mydata为附加参数。
  • 如果要实现数据的本地editurl: "clientArray"编辑，则必须向网格添加其他参数。

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

如果您确实希望保留"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"}
    ];

在这里，您将看到修复原始代码的演示。它使用值“10”、“20”、...、“90”( id1) 作为 rowids（元素id属性的值），并与您可以编辑的自定义数据一起使用。<tr>id

于 2012-10-18T18:02:09.123 回答