Question

我的目标是使用JQuery和JqGrid内联编辑数据网格中的单元格。我根据ajax请求和json响应填充了网格。不幸的是，单击行时无法使单元格变得可编辑。

我尝试了Chrome和Safari，并进行了两天的研究，但仍然没有运气。我在下面使用的链接没有帮助：

http://trirand.com/blog/jqgrid/jqgrid.html

http://www.trirand.net/demoaspnetmvc.aspx

在教程之后，我添加了一个onRowSelect事件，该事件将调用editRow并将值设置为true。但它永远不会奏效，我无法弄清楚原因。

非常感谢任何帮助。

代码：

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

Answer 1

代码中的主要错误是：

您必须在需要修改的列中包含editable: true属性。

此外，您应该在代码中进行以下更改：

您应该在<!DOCTYPE html ...>之前添加<html>行，声明您使用的HTML / XHTML方言。如果您使用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请求中使用http://localhost:8080/之类的前缀（请参阅url和editurl选项）。相反，您应该使用url:'/jblog/messages'或url:'jblog/messages'网址。由于Ajax same origin policy，禁止访问另一台服务器作为加载当前页面的当前服务器或访问另一个端口。
我建议您始终使用gridview: true jqGrid选项，这样可以提高网格的性能。

使JqGrid单元格可编辑

1 个答案: