2

我想在 jqgrid 中添加一行。这样做时，我想发送一个参数，但我无法获得正确的语法，我尝试使用 AddRowParams;

<%@ 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, key: true },
                { 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',
            gridview: true,
            sortname: 'BusinessUnitName',
            viewrecords: true,
            sortorder: "asc",
            caption: "Edit",
            height: 575,
            onSelectRow: function (id) {
                if (id && id !== lastSelectedId) {
                    $(this).restoreRow(lastSelectedId);
                    lastSelectedId = id;
                }
                $(this).editRow(id, true);
            },
            editurl: '<%: Url.Action("Save", "BusinessUnit")%>'
        });
        $('#list').jqGrid('navGrid', '#pager',
                { add: true, del: true, edit: false, search: false },
                {},
                { width: 'auto', url: '<%:Url.Action("Add", "BusinessUnit")%>', addRowParams: { extraparam: { businessUnitTypeId: function () { return $("#BusinessUnitTypes option:selected").val(); } } } },
                { width: 'auto', url: '<%:Url.Action("Delete", "BusinessUnit")%>' });
    }

</script>
</asp:Content>

编辑 - 我已将我的代码更新为以下内容，尽管现在它仍然不起作用 - 请参阅与 Oleg 的讨论。

<%@ 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 businessUnitTypeId = function() { return $("#BusinessUnitTypes option:selected").val(); };
            // var businessUnitTypeId =  $("#BusinessUnitTypes option:selected").val();

        var lastSelectedId,
            inlineEditParam = {
                keys: true,
                extraparam: {
                    businessUnitTypeId: function() { return $("#BusinessUnitTypes option:selected").val(); }
                }
            },
            $grid = $('#list');


        $('#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', hidden: true, editable: false, key: true },
                { 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: 30,
            rowList: [10, 20, 30],
            pager: '#pager',
            gridview: true,
            sortname: 'BusinessUnitName',
            viewrecords: true,
            sortorder: "asc",
            caption: "Edit",
            width: 700,
            height: "auto",
            onSelectRow: function (id) {
                if (id && id !== lastSelectedId) {
                    $(this).restoreRow(lastSelectedId);
                    lastSelectedId = id;
                }
                $(this).jqGrid('editRow', id, inlineEditParam);

            },
            editurl: '<%: Url.Action("Save", "BusinessUnit")%>'
        });
        // change defaults of delGridRow to use short for for navGrid
        $.extend($.jgrid.del, {
            width: 'auto',
            url: '<%:Url.Action("Delete", "BusinessUnit")%>'
        });

        // create navigator bar
        $grid.jqGrid('navGrid', '#pager',
            { add: true, del: true, edit: false, search: false });

        // add buttons to navigator bar
        $('#list').jqGrid('inlineNav', {
            edit: false,
            addParams: { addRowParams: inlineEditParam }
        });
    }

</script>
</asp:Content>
4

1 回答 1

1

如果我理解你是正确的，你尝试在项目中使用内联编辑。该方法navGrid添加导航栏，可用于添加“删除”按钮。要添加“添加”按钮，该按钮可用于添加空的新行并使用内联编辑来填充您需要在调用后使用inlineNav 的数据。对应的代码大概如下：navGrid

$('#list').jqGrid('navGrid', '#pager',
    { add: true, del: true, edit: false, search: false },
    {}, // Edit
    {}, // Add
    { width: 'auto', url: '<%:Url.Action("Delete", "BusinessUnit")%>' });
$('#list').jqGrid('inlineNav', {
    edit: false,
    addParams: {
        addRowParams: {
            keys: true,
            extraparam: {
                businessUnitTypeId: function () {
                    return $("#BusinessUnitTypes option:selected").val();
                }
            }
        }
    }
});

更新：顺便说一句，您可以定义一个变量并将其用于添加和编辑行：

var lastSelectedId,
    inlineEditParam = {
        keys: true,
        extraparam: {
            businessUnitTypeId: function () {
                return $("#BusinessUnitTypes option:selected").val();
            }
        }
    },
    $grid = $('#list');

$grid.jqGrid({
    url: '<%: Url.Action("GetBusinessUnits", "BusinessUnit")%>',
    ... // all other parameters
    height: "auto",
    onSelectRow: function (id) {
        if (id && id !== lastSelectedId) {
            $(this).jqGrid('restoreRow', lastSelectedId);
            lastSelectedId = id;
        }
        $(this).jqGrid('editRow', id, inlineEditParam);
    },
    editurl: '<%: Url.Action("Save", "BusinessUnit")%>'
});

// change defaults of delGridRow to use short for for navGrid
$.extend($.jgrid.del, {
    width: 'auto',
    url: '<%:Url.Action("Delete", "BusinessUnit")%>'
});

// create navigator bar
$grid.jqGrid('navGrid', '#pager',
    { add: true, del: true, edit: false, search: false });

// add buttons to navigator bar
$grid.jqGrid('inlineNav', '#pager', {
    edit: false,
    addParams: { addRowParams: inlineEditParam }
});
于 2012-11-15T17:25:31.683 回答