Slickgrid分组扩展/崩溃奇怪的行为 [英] Slickgrid grouping expand/collapse strange behaviour

问题描述

我正在使用SlickGrid进行分组功能并且有一些奇怪的行为。

I am using SlickGrid with grouping features and got some strange behaviour.

请检查 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();

})

当点击接受组并展开时，你将看到除第三之外的所有选项，但是此选项（在奇怪的地方）将看到总数。当您点击之后，例如，选项Second，您将看到Third。

When click on "Accepted" group and expand, you will see all options, except "Third", but total will be seen for this option (in strange place). When you will click after that on, for example, option "Second", you will see the "Third".

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

I tried to create this from scratch, using original SlickGrid examples, but got the same problem.

请问您能给出一些建议/解决方案吗？

Can you give some advice/solution, please?

谢谢！

推荐答案

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

The problem was in the SlickGrid itself. I found solution in Github: https://github.com/mleibman/SlickGrid/issues/926

这篇关于Slickgrid分组扩展/崩溃奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！