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属性添加到BusinessUnitId中colModel的定义中。

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

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

JQGrid - 如何使用内联编辑？

1 个答案: