使JqGrid单元格可编辑

Question

My goal is to inline edit cells in a data grid using JQuery and JqGrid. 我的目标是使用JQuery和JqGrid内联编辑数据网格中的单元格。 I got the grid to populate based on an ajax request and json reponse. 我根据ajax请求和json响应填充了网格。 Unfortunately I can't get the cells to become editable when clicking on rows. 不幸的是，单击行时我无法使单元格变为可编辑状态。

I tried both Chrome and Safari and did two days of research and still no luck. 我同时尝试了Chrome和Safari，并做了两天的研究，但仍然没有运气。 The links I used below didn't help: 我在下面使用的链接没有帮助：

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

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

Following the tutorials I added an onRowSelect event that would call editRow and set the value to true. 在教程之后，我添加了一个onRowSelect事件，该事件将调用editRow并将其值设置为true。 However it never works and I can't figure out why. 但是它永远都行不通，我也不知道为什么。

Any help would be greatly appreciated. 任何帮助将不胜感激。

Code: 码：

<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

The main error in your code is: 您的代码中的主要错误是：

you have to include editable: true property in the columns which you need to edit. 您必须在需要编辑的列中包括editable：true属性。

Additionally you should do following changes in the code: 另外，您应该在代码中进行以下更改：

you should include <!DOCTYPE html ...> line before <html> which declare the dialect of HTML/XHTML which you use. 您应该在<html>之前包括<!DOCTYPE html ...>行，以声明所使用的HTML / XHTML的方言。 If you use HTML5 dialect the line will be just <!DOCTYPE html> . 如果使用HTML5方言，则该行将只是<!DOCTYPE html> 。 In you case it seems can be the line <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> which corresponds XHTML 1.0 Strict. 在您看来，这可能是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">对应于XHTML 1.0 Strict。 See the documentation for more details. 有关更多详细信息，请参见文档。
I recommend you reduce the number of global variables. 我建议您减少全局变量的数量。 The variable lastSelection and the function editRow should be just in outer scope of onSelectRow . 变量lastSelection和函数editRow应该在onSelectRow外部范围内。 So you can move there inside of $(document).ready(function() {/*here!!!*/}); 因此，您可以将其移至$(document).ready(function() {/*here!!!*/}); block. 块。 I would recommend you better to use anonymous functions and place the code of editRow directly in the code of onSelectRow . 我建议您最好使用匿名函数，并将editRow的代码直接放在onSelectRow的代码中。 By the way you can use $(this) instead of $("#list") inside of onSelectRow . 顺便说一下，您可以在onSelectRow内部使用$(this)代替$("#list") 。 It makes the code a little bit quickly and improves the maintenance of the code because you can easier cut & paste the code fragments. 因为您可以更轻松地剪切和粘贴代码片段，所以它使代码快速一点并改善了代码维护。
you should never use prefixes like http://localhost:8080/ in the Ajax requests (see url and editurl options). 您绝对不应在Ajax请求中使用诸如http://localhost:8080/类的前缀（请参阅url和editurl选项）。 Instead of that you should use url:'/jblog/messages' or url:'jblog/messages' URLs. 取而代之的是，您应该使用url:'/jblog/messages'或url:'jblog/messages' 。 Access to another server as the current server from which the current page are loaded or access of another port is prohibited because of same origin policy of Ajax. 由于与 Ajax 相同的原始策略，因此禁止访问作为当前页面加载源的当前服务器的其他服务器或访问其他端口。
I recommend you always use gridview: true jqGrid options which can improve performance of the grid. 我建议您始终使用gridview: true jqGrid选项，它可以提高网格的性能。

使JqGrid单元格可编辑

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-04-01 19:27:43

使JqGrid单元格可编辑

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-04-01 19:27:43

解决方案1
1 已采纳 2012-04-01 19:27:43