使用 JqGrid 分组时数据无法正确显示

Question

我正在尝试使用 jqGrid 在组中显示数据。它为同名创建多个组。 以下是我的代码

jQuery("#jqGridManage").jqGrid({
        datatype: "local",
        data: Projectdata,
        colNames: ['Action', 'Opportunity Id', 'Salesforce Opportunity ID', 'Project Name (Opportunity Name)', 'Project Type', 'Type Of Revenue', 'Milestone Description', 'Amount', 'PO Number', 'PO Amount', 'Close Date', 'Assigned To',
                    'Business Unit', 'Product', 'Channel Name', 'Sales Person', 'Vertical', 'Customer Name', 'Customer Contact','Region'],
        colModel: [
            { name: 'actionBtn', search: false, frozen: true, width: 200, align: 'center'},
            { name: 'OpportunityID', index: 'id', frozen: true },//, cellattr: arrtSetting
            { name: 'SalesforceOpportunityId', index: 'invdate', frozen: true },
            { name: 'OpportunityName', index: 'name', frozen: true },
            { name: 'ProjectTypeLongName', index: 'amount', frozen: true },
            { name: 'ProjectTypeChildName', index: 'tax', frozen: true },
            { name: 'ChannelName', index: 'total', frozen: true },
            { name: 'Amount', index: 'amount' },
            { name: 'PONumber', index: 'closedate' },
            { name: 'POAllocatedAmount', index: 'closedate' },
            { name: 'CloseDate', index: 'closedate' },
            { name: 'AssignedTo', index: 'note' },
            { name: 'BusinessUnit', index: 'note' },
            { name: 'Product', index: 'product' },
            { name: 'Channel Name', index: 'stage' },
            { name: 'SalesPerson', index: 'salesperson' },
            { name: 'Vertical', index: 'vertical' },
            { name: 'CustomerName', index: 'customername' },
            { name: 'CustomerContactNumber', index: 'currency' },
            { name: 'Region', index: 'amountexpected' }
        ],
        shrinkToFit: false,
        pager: "#jqGridPagerManage",
        viewrecords: true,
        autowidth: true,
        height: 450,
        sortname: "OpportunityID",
        grouping: true,
        groupingView: {
            groupField: ["OpportunityID"],
            groupColumnShow: [true, true],
            groupCollapse: false,
            groupDataSorted: true
        },
        resizeStop: function () {
            resizeColumnHeader.call(this);
            fixPositionsOfFrozenDivs.call(this);
            fixGboxHeight.call(this);
        },
        loadComplete: function () {
            fixPositionsOfFrozenDivs.call(this);
        },
        gridComplete: function () {
            var ids = $("#jqGridManage").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var rowId = ids[i],
                //	statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
                //	activeBtn = "";
                //	if (statusId == 0) { // Inactive
                        activeBtn = "<button class='ManageEditBtn ManageEdit'><i class='fa fa-edit'></i> Edit</button> <button class='ManageEdit ManageCreate'><i class='fa fa-plus'></i> Create Invoice</button>";
                //"onclick='publish(" + rowId + ")' />";
                //	}
                jQuery("#jqGridManage").jqGrid('setRowData', rowId, { actionBtn: activeBtn });


            }
        },
    })

在我来自后端的代码数据中。我按 OpportunityID 分组；有 4 个机会 ID，但每个组都显示多次。下面是我的截图供参考。

我也提到了其他相同的问题，但没有帮助。有人可以帮我吗？

Answer 1

colModel，您使用的有很多不一致之处。您应该删除 index 属性。如果您将index 与datatype: "local" 结合使用，则index 属性的值应对应name 属性或引用colModel 另一列的name。最好的选择是根本不使用任何index 属性。

此外，您还必须修复 Channel Name 列的名称。 name 属性的值将用于在 HTML 页面上构建一些内部元素的 id，HTML5 不允许在 id 中使用空格。

Answer 2

恕我直言，问题在于您来自服务器的数据应按 OpportunityID 排序。检查这是不是真的。

另一个原因可能是您的 gridComplete 事件。去掉这个事件，看看分组是否正常。