Slickgrid 分组展开/折叠奇怪的行为

Question

我正在使用具有分组功能的 SlickGrid，但出现了一些奇怪的行为。

请检查jsFiddle。

var ReportData = {
"cols":{
    "date":"Date",
    "status":"Status",
    "dataField":"Data field"
},
"data":[
    {"id":0,"date":"First","status":"Accepted","dataField":"1000"},
    {"id":1,"date":"Second","status":"Accepted","dataField":"2000"},
    {"id":2,"date":"Third","status":"Accepted","dataField":"3000"},
    {"id":3,"date":"Fourth","status":"Accepted","dataField":"4000"},
    {"id":4,"date":"Fifth","status":"Accepted","dataField":"5000"},
    {"id":5,"date":"Sixth","status":"Canceled","dataField":"6000"},
    {"id":6,"date":"Seventh","status":"Canceled","dataField":"7000"},
    {"id":7,"date":"Eight","status":"Canceled","dataField":"8000"},
    {"id":8,"date":"Ninth","status":"Canceled","dataField":"9000"},
    {"id":9,"date":"Tenth","status":"Rejected","dataField":"1000"},
    {"id":10,"date":"Eleventh","status":"Rejected","dataField":"2000"},
    {"id":11,"date":"Twelfth","status":"Rejected","dataField":"3000"}
]
};

var options = {
    enableCellNavigation: true,
    editable: true,
    autoHeight:true,
    forceFitColumns: true,
};

function groupBy() {
dataView.setGrouping([{
    getter: "status",
    aggregators: [
        new Slick.Data.Aggregators.Sum("dataField"),
    ],
    collapsed: true,
    aggregateCollapsed: true,
    lazyTotalsCalculation: true
},{
    getter: "date",
    aggregators: [
        new Slick.Data.Aggregators.Sum("dataField"),
    ],
    collapsed:true,
    aggregateCollapsed: true,
    lazyTotalsCalculation: true
},]);
}
function sumTotalsFormatter (totals, columnDef) {
var rowData = '';

// Get sum
var val = totals.sum && totals.sum[columnDef.field];
if (val != null) {
    rowData += "<b>" + (Math.round(parseFloat(val) * 100 ) / 100) + "</b>";
}

return rowData;
}

function makeGridColumns(data){
var that = this;
var columns = [];
var id = 0;

// Parse given result for SlickGrid
jQuery.each(data, function(label, name) {
    var item = {
        id:         id++,
        field:      label,
        name:       name,
        focusable:  false,
        groupTotalsFormatter: sumTotalsFormatter,
    }

    columns.push(item);
});

return columns;
}


$(function () {

var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();

dataView = new Slick.Data.DataView({
     groupItemMetadataProvider: groupItemMetadataProvider,
     inlineFilters: true
});

var columns = makeGridColumns(ReportData.cols);

grid = new Slick.Grid("#myGrid", dataView, columns, options);

// register the group item metadata provider to add expand/collapse group handlers
grid.registerPlugin(groupItemMetadataProvider);

// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});


// initialize the model after all the events have been hooked up
dataView.beginUpdate();

dataView.setItems(ReportData.data);

groupBy();

dataView.endUpdate();

})

当点击“Accepted”组并展开时，您将看到除“Third”之外的所有选项，但会看到此选项的总数（在奇怪的地方）。当您点击之后，例如，选项“第二”，您将看到“第三”。

我尝试使用原始的 SlickGrid 示例从头开始创建它，但遇到了同样的问题。

您能提供一些建议/解决方案吗？

谢谢！

Answer 1

问题出在 SlickGrid 本身。我在 Github 中找到了解决方案：https://github.com/mleibman/SlickGrid/issues/926