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

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

下一个问题:你应该定义lastsel如果在 onSelectRow 中使用的变量回调。

我建议您另外添加默认属性 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> 的所有属性用于网格的元素。

此外，由于性能原因，我建议您始终使用 gridview: true jqGrid 的选项并替换 pager: jQuery('#pager')至pager: '#pager' .