JQGrid - 如何使用内联编辑？

Question

当用户在 JQGrid 上选择一行时，他应该能够编辑可编辑字段，然后按 Enter 键，这会将行发布到将更新数据库的控制器方法。 我找不到如何发布更新的数据来做到这一点。 我想将 businessUnitId 字段和可编辑字段作为参数发送给控制器来执行此操作。 这是我的网页；

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Maintenance
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <fieldset>
        <legend>Maintenance of Departments and Divisions</legend>
        <p>Add, edit or delete a department or division: <%: Html.DropDownList("BusinessUnitTypes")%></p>
        <p>To amend the department or division, select the row, make the change and then press the return key.</p>
        <table id="list" class="scroll"></table>
        <div id="pager" class="scroll" style="text-align:center;font-size: 11px;"></div>
    </fieldset>
    <!-- "BusinessUnitTypeId", (SelectList)ViewData["BusinessUnitTypes"] -->
<script type="text/javascript">
    $(document).ready(function () { reloadGrid(); });

    $('#BusinessUnitTypes').change(function () {
        $("#list").trigger("reloadGrid");
    });

    function reloadGrid() {
        var lastSelectedId;

        $('#list').jqGrid({
            url: '<%: Url.Action("GetBusinessUnits", "BusinessUnit")%>',
            postData: {
                businessUnitTypeId: function () { return $("#BusinessUnitTypes option:selected").val(); }
            },
            datatype: 'json',
            mtype: 'POST',
            colNames: ['ID', 'Name', 'Fax', 'Email', "Employees"],
            colModel: [
                { name: 'BusinessUnitId', index: 'BusinessUnitId', width: 25, editable: false },
                { name: 'BusinessUnitName', index: 'BusinessUnitName', width: 200, editable: true, edittype: 'text' },
                { name: 'Fax', index: 'Fax', width: 80, align: 'right', edittype: 'text', editable: true },
                { name: 'Email', index: 'Email', width: 200, editable: true, edittype: 'text' },
                { name: 'NumberOfEmployees', index: 'NumberOfEmployees', width: 70, editable: false}],
            rowNum: 20,
            rowList: [10, 20, 30],
            pager: $('#pager'),
            sortname: 'BusinessUnitName',
            viewrecords: true,
            sortorder: "asc",
            caption: "Edit",
            height: 575,
            onSelectRow: function (id) {
                if (id && id !== lastSelectedId) {
                    $('#list').restoreRow(lastSelectedId);
                    $('#list').editRow(id, true);
                    lastSelectedId = id;
                }
            },
            editurl: '<%: Url.Action("Save", "BusinessUnit")%>'
        });
    }

</script>
</asp:Content>

Answer 1

如果用户按Enter键保存数据，所有editable值和rowid将*自动*发送到editurl指定的URL。

在我看来，BusinessUnitId 是网格的原生唯一 id。您没有发布任何用于填充网格的测试数据。如果您将id 填充为与BusinessUnitId 相同的值，则问题可以自动解决，因为BusinessUnitId 的值将作为id 的值变为editurl。或者，您可以将key: true 属性添加到colModel 中BusinessUnitId 的定义中。

如果它不能解决您的问题，您可以使用extraparam 在保存行期间发送其他数据。有关详细信息，请参阅the answer。

我建议您另外将gridview: true 选项添加到网格并将pager: $('#pager') 更改为pager: '#pager'。它将提高性能。