jqGrid 内联编辑功能

Question

我想将内联编辑功能分配给我的 jqGrid，即当用户单击特定行时，他应该能够编辑..

我正在关注这个 jQuery 代码的 url，但它不起作用，我也无法编辑

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

这是我的看法

<table id="list"></table>
</table>

JavaScript 代码：

  <script type="text/javascript">
    $(function () {
        var lastsel;
        jQuery("#list").jqGrid({
            url: '/Home/GetStudents/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['StudentID', 'FirstName', 'LastName', 'Email'],
            colModel: [
      { name: 'StudentID',sortable: false,key:true },
      { name: 'FirstName' },
      { name: 'LastName', sortable: false},
      { name: 'Email', width: 200,  sortable: false}],
      cmTemplate: {align: 'center', editable: true},
            pager: '#pager',
            width: 750,
            rowNum: 15,
            rowList: [5, 10, 20, 50],
            sortname: 'StudentID',
            sortorder: "asc",
            viewrecords: true,
            caption: ' My First JQgrid',
            onSelectRow: function (StudentID) {


                if (StudentID != lastsel) {

                    lastsel = StudentID;   
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editRow', StudentID, true);


                }

            },

            editurl: '/Home/GetStudents/',
            caption: "Using events example"

        });
        jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false });
    });

</script>

这些是我的脚本，我添加了

<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.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>
<script src="/Scripts/rowedex3.js" type="text/javascript"></script>

Answer 1

首先你必须定义 jqGrid 的editurl 选项，该选项将负责处理服务器端的行保存。

下一个问题：你应该在onSelectRow回调中定义lastsel变量来使用if。

我建议您另外使用colModel 的默认属性，例如width: 150 或sortable: true（请参阅the documentation）。如果您需要重新定义网格列的一些默认设置，您可以使用cmTemplate（请参阅here）获取更多信息。您可以将colModel 从您的网格减少到以下内容

colModel: [
        { name: 'StudentID', sortable: false, key: true },
        { name: 'FirstName' },
        { name: 'LastName', sortable: false },
        { name: 'Email', width: 200, sortable: false}],
cmTemplate: {align: 'center', editable: true}

此类更改将使代码更具可读性和易于维护。我添加了key: true 以确保jqGrid 使用列中的值作为rowid。取决于您返回的 JSON 数据的格式，它可能不是必需的，但我认为它使代码更具可读性和更易于维护。

您还可以删除用于网格的<table> 元素的所有属性。

另外出于性能原因，我建议您始终使用 jqGrid 的 gridview: true 选项并将 pager: jQuery('#pager') 替换为 pager: '#pager'。