Slickgrid 3分组如何删除总计行?

时间:2014-02-12 17:28:18

标签: javascript asp.net-mvc-4 twitter-bootstrap-3 slickgrid

我使用多行分组并将总计放在分组标题中。 我没有在总计行中使用总计。我看到行被分组,总数将是空行。在我的情况下,在每个子分组之后有一个空行,最后在父总计中有一个空行。
如何删除这些总计行? 谢谢!

.cshtml:

  <div id="gridList" class="grid" style="width: 100%; height: 500px"></div>

的.js

$(function() {
    var columns = [
    {
        id: "isExcluded",
        name: "Exclude",
        field: "isExcluded" /*, width: 120*/,
        formatter: Slick.Formatters.Checkmark,
        editor: Slick.Editors.Checkbox, sortable: true
    },
    {
        id: "symbol",
        name: "Symbol",
        field: "symbol",
        sortable: true /*, width: 120*/
    },
    {
        id: "price",
        name: "Price",
        field: "price",
        sortable: true
        //, groupTotalsFormatter: sumTotalsFormatter 
    },
    {
        id: "parent_name",
        name: "Parent Name",
        field: "parent_name",
        sortable: true /*, width: 120*/
    },

    {
        id: "description",
        name: "Description",
        field: "description",
        sortable: true,
        width: 120,
        editor: Slick.Editors.Text,
    },
    { id: "cancel_ind", 
      name: "Canceled", 
      field: "cancel_ind", 
      sortable: true, width: 80 }
];

function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
        return { valid: false, msg: "This is a required field" };
    } else {
        return { valid: true, msg: null };
    }
};

var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: true,
    enableExpandCollapse: true,
    rowHeight: 25
};

var sortcol = "parent_name";
var sortdir = 1;
var grid;
var data = [];
var groupItemMetadataProviderTrades = new Slick.Data.GroupItemMetadataProvider();
var dataView = new Slick.Data.DataView({ groupItemMetadataProvider:      groupItemMetadataProviderTrades });

dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

function groupByParentAndSymbol() {
    dataViewTrades.setGrouping([
        {
            getter: "parent_name",
            formatter: function(g) {
                return "Parent:  " + g.value + "  <span style='color:green'>(" + g.count + " items)  Total: " + g.totals.sum.price + "</span>";
            },
            aggregators: [
                new Slick.Data.Aggregators.Sum("price")
            ],
            aggregateCollapsed: true
            ,lazyTotalsCalculation: true
        },
    {
        getter: "symbol",
        formatter: function(g) {
            return "Symbol:  " + g.value + "  <span style='color:green'>(" + g.count + " items)   Total: " + g.totals.sum.price + "</span>";
        },
        aggregators: [
            new Slick.Data.Aggregators.Sum("price")
        ],
        collapsed: true
        ,lazyTotalsCalculation: true
    }]);
};

grid = new Slick.Grid("#gridList", dataView, columns, options);
grid.registerPlugin(groupItemMetadataProviderTrades);
grid.setSelectionModel(new Slick.RowSelectionModel());

..... /*sorting support etc*/

 // use instead of the default formatter <---  removed not used.
 function sumTotalsFormatter(totals, columnDef) {
    var val = totals.sum && totals.sum[columnDef.field];
    //if (val != null) {
    //    return "total: " + ((Math.round(parseFloat(val) * 100) / 100));
    //}
    return "";
 }

// will be called on a button click (I didn't include the code as irrelevant)
var getDataList = function () {
    $.getJSON('/Home/GetData/', function (json) {
        data = json;
        dataView.beginUpdate();
        dataView.setItems(data);
        groupByParentAndSymbol();
        dataView.endUpdate();
        dataView.syncGridSelection(grid, true);
    });
 };

  getDataList();

});

2 个答案:

答案 0 :(得分:3)

向dataview添加displayTOtalsRow:false解决了我的问题 - 现在没有显示总行数。

 var dataView = new Slick.Data.DataView({ groupItemMetadataProvider: groupItemMetadataProviderTrades, displayTotalsRow: false });

答案 1 :(得分:0)

简单回答你的问题...只需删除aggregators: [...],当我说删除你有2个选项时,你可以删除任何数组[...],或者你可以简单地删除该对象line(所以完全删除aggregators[...])。

现在,如果你想要更多解释它是如何工作的......让我们给你一些定义,这样你就会更好地理解。聚合是一组聚集在一起形成总数量的项目。有问题的总数可以是所有字段的总和,您可以定义的平均或其他类型的聚合器。因此,基本上它是按您选择的列重新组合的操作,并给出组的计算结果。好吧,现在它如何在SlickGrid的情况下工作?您需要定义要在function groupByParentAndSymbol()内使用的聚合器类型(平均值,总和等等),定义它们将进行计算,除非您附加它在该字段中,不会显示任何内容,因此在示例中您发现将groupTotalsFormatter: sumTotalsFormatter附加/绑定到列定义非常重要,例如:

...var columns = [{id: "cost", ...width: 90, groupTotalsFormatter: sumTotalsFormatter}, ...];

所以让我们回顾一下......一旦聚合器定义new Slick.Data.Aggregators.Sum("cost"),它将进行计算,但除非它绑定到该字段,否则不会显示任何内容。作为额外选项,aggregateCollapsed(真/假)是在折叠时显示组内部或外部的小计(平均值,总和或其他)。