Question

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

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

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

Answer 1

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

如果没有<html>，则不应使用<!DOCTYPE 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用于填充网格的用法很糟糕而且很慢。您应该在创建jqGrid的代码之前移动定义mydata的代码，并添加data: mydata作为附加参数。
如果要实施本地数据编辑，则必须在网格中添加其他参数editurl: "clientArray"。

下一个问题是我写答案的主要原因。问题是您在网格中定义了可编辑列'id'。问题是jqGrid使用内部"id"作为行（id元素）的<tr>属性，也称为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）作为rowid（id元素的<tr>属性的值）并使用{{ 1}}包含可以编辑的自定义数据。

jqGrid无法内联编辑

1 个答案: