Question

我正在构建一个需要在页脚中加一个总和的网格，但内置的总和并不能满足我的需求。

举个例子，假设我正在构建一个包含我正在销售的产品列表的网格。我还有一个字段说“有资格享受折扣”。我想显示产品价格的总和，但仅适用于有资格享受折扣的商品。

理想情况下，我希望能够传递下面的功能，但我认为Kendo网格不支持它。

function(seed, model){
  if(model.EligibleForDiscount === true){
      return seed.Price + model.Price;
  }

  return seed.Price;
}

在更新网格时，还必须自动刷新。

通过手动处理网格上的事件并使用jQuery的帮助来更新页脚模板是唯一的方法吗？

Answer 1

尝试以下示例：

$("#SearchDetails").kendoGrid({
        scrollable: true,
        resizable: true,
        sortable: true,
        pageable: false,
        navigatable: true,
        filterable: false,
        groupable: true,
        selectable: "row",
        schema: {
            fields: {
                Duration: { type: "number" }
            }                      
        },
        columns: [
                { title: ' Name', field: 'CustName'},
                { title: ' Event Name', field: 'ServiceName'},
                { title: 'Resource Name', field: 'ResourceName', footerTemplate: '<span style=\'float:right;\'>Total</span>' },
                { title: 'Duration(Min)', field: 'Duration', template: '<span style=\'float:right;\'>#=Duration#</span>', aggregates: 'sum', footerTemplate: '<span id=\'footerPlaceholder\' style=\'float:right;font-weight: bold;\'>#=calc(sum)#</span>' },
                { title: 'Total Amount (' + currencySymbol + ')', field: 'TotalAmount', template: '<span style=\'float:right;\'>#=TotalAmount#</span>', aggregates: 'sum', footerTemplate: '<span style=\'float:right;font-weight: bold;\'>#=kendo.toString(sum,\'n\')#</span>' }
        ],
        dataSource: {
            data: viewModel.AppintDetails(),
            aggregate: [{ field: 'Duration', aggregate: 'sum', format: 'n' }, { field: 'TotalAmount', aggregate: 'sum', format: 'n' }]
        }
    });

下面我们在html部分创建了一个函数

<script type="text/javascript">
    function calc(val) {
        var hour = Math.floor(val / 60);
        var min = val % 60;
        val = hour + ":" + min + " hrs";
        return val;
    }
</script>

我只是用来显示正确日期格式的持续时间总数。这段代码对我有用... 网格下方显示此...详细信息 enter image description here

Answer 2

不幸的是，Kendo DataSource没有提供添加自定义聚合函数的方法，但您可以通过使用自定义列footerTemplate来实现此目的：

var gridDataSource = new kendo.data.DataSource({...});

window.calculatePriceAggregate = function () {
    var data = gridDataSource.data();
    var total = 0;
    for(var i = 0; i < data.length; i++) {
        if (data[i].EligibleForDiscount === true) {
            total += data[i].Price;
        }
    }
    return total;
};

$("#grid").kendoGrid({
    data: gridDataSource,
    ...
    columns: [
        {
            field: 'Price',
            footerTemplate: '#=window.calculatePriceAggregate()#'
        }

    ]
});

Answer 3

或者像这段代码一样使用......

 $("#grid").kendoGrid({

        scrollable: true,
        sortable: true,
        pageable: true,
        navigatable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        dataSource: {
            data: viewModel.UserWithoutGUID(),
        },
        groupable: false,
        selectable: "row",
        columns: [
               { title: "ID", field: "ResourceID", template: '<span>#= ResourceID #</span> <input type="hidden" value="#= ResourceID #"/>', width: 40 },
               { title: "Photo", filterable: false, field: "Image", template: '<span class="image"><img id="#=ResourceID #" height="50" width="50" src="#=Image#" onerror="#=LoadDefaultImage()#"/></span>', width: 40 },
               { title: "Name", field: "Name", width: 100 },
               { title: "Email", field: "Email", width: 100 },
               { title: "Mobile", field: "Mobile", width: 100 }
        ]

    });

LoadDefaultImage = function () {
    return "null";
}

我在这里通过调用此函数通过模板绑定加载图像。

Answer 4

你好，我迟到了，但是如果能帮到别人的话。

我曾遇到过同样的问题，我实施的解决方案可以帮助您在groupFooterTemplate中使用自定义聚合函数。

链接到项目here

function myAggregate(data){
 // Data here is a list of data by group (brilliant right! :-) )
 // Do anything here and return result string
}

var grid = $('#grid').kendoGrid({
  ...
  columns: [
    { field: '', title: '', groupFooterTemplate: myAggregate
  ]
  ...
});

<!DOCTYPE html>
<html>
  <head>
    <!-- YOUR CSS HERE -->
  </head>
  <body>
    ...
    <div id="#grid"></div>
    ...
    <script>// jQuery here </script>
    <script>// kendo.all.min.js here </script>
    <script src="kendo.aggregate.helper.js"></script>
  </body>
</html>

Kendo Grid - 动态聚合页脚模板值

4 个答案: