1

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

例如，假设我正在构建一个包含我正在销售的产品列表的网格。我还有一个字段显示“有资格获得折扣”。我想显示产品价格的总和，但仅适用于符合折扣条件的商品。

理想情况下，我希望能够传入如下所示的函数，但我认为 Kendo 网格不支持它。

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

  return seed.Price;
}

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

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

4

4 回答 4

2

试试下面的例子：

$("#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>

我只是用于以正确的日期格式显示持续时间总计。此代码对我有用...在网格下方显示此...详细信息 在此处输入图像描述

于 2014-07-02T08:37:08.773 回答
2

你好我迟到了，但如果它可以帮助某人。

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

链接到这里的项目

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>

于 2016-01-13T10:37:22.023 回答
1

不幸的是，KendoDataSource没有提供添加自定义聚合函数的方法，但您可以通过使用自定义列来完成此操作，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()#'
        }

    ]
});
于 2013-09-10T02:19:34.687 回答
0

或者使用像这样的代码......

 $("#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";
}

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

于 2014-10-28T05:41:47.490 回答