jqgrid navgrid 在选项卡内不工作

Question

我有使用 jqgrid 显示文档列表的视图。当我单击网格中的文档标题时，我创建了一个带有局部视图的弹出窗口，并且在这个局部视图中使用 Kendo 选项卡。在其中一个选项卡中，我使用局部视图加载显示所有文档日志的 jqgrid，而在该网格中，我的导航网格无法正常工作。当我单击下一步按钮导航到下一页时，它实际上是在我有文档列表的主页上导航。为了避免混淆，我在局部视图中对导航网格使用了不同的 'id'，但它根本没有显示下一个和上一个按钮。谁能指导我如何在不影响 parent 视图的情况下向局部视图添加分页。

下面是主视图的jqgrid代码：

  $.ajax(
    {
        type: "GET",
        url: "@Url.Action("GetDocumentFileList", "Document")",
        data: "",
        dataType: "json",
        success: function (data) {
            if (data == "SessionTimeOut")
                window.location.href = '@Url.Action("SessionTimeOut", "Error")';
            var page = data.Page;
            var rows = data.Rows;
            var colModel = eval(data.Columns);
            var colNames = eval(data.ColumnsTitle);
            var $grid = $("#datagrid");
            $grid.jqGrid({
                url: "@Url.Action("GetDocumentFileList", "Document")",
                datatype: griddataType,
                datastr: rows,
                colNames: colNames,
                colModel: colModel,
                gridComplete: initGrid,
                rowList: [25, 50, 75, 100],
                ignoreCase: true,
                width: null,
                shrinkToFit: true,
                multiselect: true,
                multiboxonly: false,
                pager: '#navGrid',
                sortname: 'DocumentRegisterID',
                sortorder: "desc",
                scrollerbar: true,
                viewrecords: true,
                rowNum: 25,
                autowidth: true,
                ondblClickRow: function (DocumentRegisterID) {
                    if (DocumentRegisterID && DocumentRegisterID !== lastsel2) {
                        $grid.jqGrid('restoreRow', lastsel2);
                        $grid.jqGrid('editRow', DocumentRegisterID, true, null, successFuncStandardGrid);
                        lastsel2 = DocumentRegisterID;
                    }
                },
                editurl: "@Url.Action("EditDocumentNo", "Document")",
                hoverrows: true,
                onSelectRow: function () {
                    return false;
                },

这里是主视图中弹出窗口中使用的局部视图的 jqgrid 代码：

$.ajax(
{
    type: "GET",
    url: "@Url.Action("DocHistoryEventLog", "Document")",
    data: '',
    success: function (data) {
        var page = data.Page;
        var rows = data.Rows;
        var $grid = $("#dataeventgrid");
        $grid.jqGrid({
            url: "@Url.Action("DocumentRegisterHistoryEventLogList", "Document", new { id = @docId })",
            datatype: "json",
            datastr: rows,
            colNames: ['DocumentRegisterEventLogID', 'Event Type', 'Description', 'Revision', 'Version', 'Log By', 'Log Date', 'Organization Name', 'Document Owner Organization'],
            colModel: [
               { name: 'DocumentRegisterEventLogID', index: 'DocumentRegisterEventLogID', key: true, hidden: true },
                { name: 'EventType', index: 'EventType', width: "20%", resizable: true },
                { name: 'EventDescription', index: 'EventDescription', sorttype: 'text', width: "20%", resizable: true },
                { name: 'Revision', index: 'Revision', width: "15%", sorttype: 'text', resizable: true },
                { name: 'DocVersion', index: 'DocVersion', width: "20%", resizable: true },
                { name: 'LogBy', index: 'LogBy', sorttype: 'text', width: "20%", resizable: true },
                {
                    name: 'StrLogDate', index: 'StrLogDate', sorttype: 'text', width: "25%", resizable: true,
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker },
                },
                { name: 'OrganizationName', index: 'OrganizationName', sorttype: 'text', width: "20%", resizable: true },
                { name: 'DocumetOwnerOrganizationName', index: 'DocumetOwnerOrganizationName', width: "20%", sorttype: 'text', resizable: true },
            ],
            rowList: [15, 30, 45, 100],
            loadonce: false,
            shrinkToFit: true,
            ignoreCase: true,
            pager: '#navLogGrid',
            autoencode: true,
            sortname: 'DocumentRegisterEventLogID',
            sortorder: "desc",
            viewrecords: true,
            rowNum: 15,
            width: 850,
            height:270,
            gridview: true,
            height: "auto",
            scrollerbar: true,
            loadComplete: function () {
                highlightFilteredData.call(this);

            },
            loadError: function (jqXHR, textStatus, errorThrown) {
                alert('HTTP status code: ' + jqXHR.status + '\n' +
                      'textStatus: ' + textStatus + '\n' +
                      'errorThrown: ' + errorThrown);
                alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
            }
        });

        $grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", stype: 'select' });
        $grid.jqGrid("navGrid", "#navLogGrid", { add: false, edit: false, del: false, search: false, refresh: true });
        $grid.parents('div.ui-jqgrid-bdiv').css("max-height", '270px');

Answer 1

在我的部分视图中设置属性 loadonce:true 解决了我的问题。谢谢

jqgrid navgrid 在选项卡内不工作

jqgrid navgrid not working inside tabs

c#

jquery-ui

jqgrid

jqgrid-asp.net

mvcjqgrid