Question

我正在尝试将jqGrid添加到ASP.NET MVC3局部视图中。此网格仅作为快捷计算器用于客户端，他们按下按钮并根据一些输入的参数生成网格。我可以让网格显示甚至addDataRow，但即使字段被指定为行，也不能编辑行。我已经在IE9，Chrome，FF，Safari中尝试了所有相同的结果。

我将它拉出到一个简单的HTML页面中，看看它是否与MVC局部视图干扰相关，但仍然没有运行可编辑的行。该行是可选择的，但不会打开进行编辑。

我仔细检查以确保我从here

下载了完整的jqGrid包

默认情况下，通过addDataRow添加的行是不可编辑的？从jqGrid Wiki上的所有文档中我找不到它的位置。我已多次阅读内联编辑维基页面，看起来这应该可行。我错过了什么？

not editable http://bigpichost.com/files/noteditable_zm7rflo0.png

当我点击它选择的行但没有打开进行编辑时！

以下是我正在测试的HTML页面：

<html>
   <head>
    <meta charset="utf-8">
     <title>Testing JQGrid</title>
        <link rel="stylesheet" href="../Content/themes/base/jquery.ui.all.css">
        <link href="Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
        <link href="Content/themes/redmond/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    </head>

    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.18.custom.js" type="text/javascript"></script>
    <script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <body>
        <table id=jqgRequests></table>

        <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgRequests').jqGrid({
                // type of data
                datatype: 'local',
                // column names
                colNames: ['Save', 'Pct-Amt', 'Request', 'French'],
                // columns model
                colModel: [
                    { name: 'Save', index: 'Save', width: 55, sortable: false, editable: true, edittype: 'checkbox', formatter: 'checkbox', align: 'center' },
                    { name: 'PctAmt', index: 'PctAmt', width: 55, editable: false, align: 'right' },
                    { name: 'Request', index: 'Request', editable: true, align: 'left' },
                    { name: 'French', index: 'French', editable: true, align: 'left' }
                    ],
                //initial sorting column
                sortname: 'Pct-Amt',
                // initial sorting direction
                sortorder: 'asc',
                // we want to display total records count
                viewrecords: false,
                // grid width
                autowidth: true,
                // grid header
                caption: "Generated Requests"
            });  // end jqgrid
            var myFirstRow = { Save: "true", PctAmt: "0", Request: "Testing this", French: "Testing Oui" };
            $('#jqgRequests').addRowData("1", myFirstRow);
        });
        </script>
    </body>
</html>

Answer 1

必须将行切换到可编辑状态。如果您希望在添加行后处于编辑模式，则只需调用editRow方法：

$("#jqgRequests").jqGrid('editRow', "1", false);

如果您希望在选择行时切换到可编辑状态，则应使用onSelectRow回调：

var previousSelectedRowId;

$('#jqgRequests').jqGrid({
    ...
    onSelectRow: function(currentSelectedRowId) {
        if(currentSelectedRowId && currentSelectedRowId !== previousSelectedRowId) { 
            $('#jqgRequests').jqGrid('restoreRow', previousSelectedRowId); 
            previousSelectedRowId = currentSelectedRowId; 
        }
        $('#jqgRequests').jqGrid('editRow', currentSelectedRowId, false);
    },
    ...
};

如果要添加已经处于编辑模式的行，则应使用addRow方法：

$('#jqgRequests').jqGrid('addRow', { rowID: "1", initdata: myFirstRow });

为什么我的jqGrid行即使在选择时也不可编辑？

1 个答案: