1

When a user selects a row on the JQGrid, he should be able to edit the editable fields and then press the Enter key which will post the row to the controller method which will update the database. I cannot find how to post the updated data to do this. I want to send the businessUnitId field and the editable fields as parameters to the controller mether to do this. This is my webpage;

<%@ 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>
4

1 回答 1

1

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

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

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

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

于 2012-11-15T12:09:38.180 回答