Fatal编程技术网
  • kendo-ui/
  • Kendo ui 剑道网格-动态聚合页脚模板值

Kendo ui 剑道网格-动态聚合页脚模板值

kendo-ui

Kendo ui 剑道网格-动态聚合页脚模板值,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,我正在构建一个需要在页脚中有一个总和的网格，但是内置的总和聚合不能完全满足我的需要 例如，假设我正在用我正在销售的产品列表构建一个网格。我还有一个字段，上面写着“有资格享受折扣”。我想显示产品价格的总和，但仅显示符合折扣条件的项目 理想情况下，我希望能够传入如下函数，但我认为剑道网格不支持它 函数（种子，模型）{ 如果（model.eligiblefordiscont==真）{ 返回种子。价格+型号。价格； } 返回种子。价格； } 它还必须在网格更新时自动刷新 只有通过手动处理网格上的事件并

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

例如，假设我正在用我正在销售的产品列表构建一个网格。我还有一个字段，上面写着“有资格享受折扣”。我想显示产品价格的总和，但仅显示符合折扣条件的项目

理想情况下，我希望能够传入如下函数，但我认为剑道网格不支持它

函数（种子，模型）{
如果（model.eligiblefordiscont==真）{
返回种子。价格+型号。价格；
}
返回种子。价格；
}
它还必须在网格更新时自动刷新

只有通过手动处理网格上的事件并使用jQuery帮助更新页脚模板才能做到这一点吗？

不幸的是，Kendo
数据源
没有提供添加自定义聚合函数的方法，但您可能只需使用自定义列
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()#'
        }

    ]
});

var gridDataSource=new kendo.data.DataSource（{…}）；
window.calculatePriceAggregate=函数（）{
var data=gridDataSource.data（）；
var合计=0；
对于（变量i=0；i
不幸的是，Kendo
数据源不提供添加自定义聚合函数的方法，但您可能只需使用自定义列
页脚模板即可实现这一点，如：


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()#'
        }

    ]
});



var gridDataSource=new kendo.data.DataSource（{…}）；
window.calculatePriceAggregate=函数（）{
var data=gridDataSource.data（）；
var合计=0；
对于（变量i=0；i
尝试以下示例：


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



$（“#搜索详细信息”）.kendoGrid({
可滚动：对，
可调整大小：正确，
可排序：是的，
可分页：false，
可导航：是的，
可过滤：false，
分组：对，
可选：“行”，
模式：{
字段：{
持续时间：{type:“number”}
}                      
},
栏目：[
{title:'Name'，field:'CustName'}，
{title:'Event Name'，字段：'ServiceName'}，
{title:'Resource Name'，field:'ResourceName'，footerTemplate:'Total'}，
{title:'Duration（Min）'字段：'Duration'，模板：'#=Duration#'，聚合：'sum'，footerTemplate:'#=calc（sum）#'，
{title:'Total Amount（'+currencycsymbol+'），field:'TotalAmount'，模板：'\\=TotalAmount'，聚合：'sum'，footerTemplate:'\\=kendo.toString（sum，\'n\'）\}
],
数据源：{
数据：viewModel.AppintDetails（），
聚合：[{field:'Duration'，聚合：'sum'，格式：'n'}，{field:'TotalAmount'，聚合：'sum'，格式：'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>




函数计算（val）{
var小时=数学楼层（val/60）；
var最小值=val%60；
val=小时+“：”+分钟+“小时”；
返回val；
}


我只是用正确的日期格式来显示总的持续时间。这个代码适合我。。。
下面的网格显示此…详细信息
试试下面的例子：


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



$（“#搜索详细信息”）.kendoGrid({
可滚动：对，
可调整大小：正确，
可排序：是的，
可分页：false，
可导航：是的，
可过滤：false，
分组：对，
可选：“行”，
模式：{
字段：{
持续时间：{type:“number”}
}                      
},
栏目：[
{title:'Name'，field:'CustName'}，
{title:'Event Name'，字段：'ServiceName'}，
{title:'Resource Name'，field:'ResourceName'，footerTemplate:'Total'}，
{title:'Duration（Min）'字段：'Duration'，模板：'#=Duration#'，聚合：'sum'，footerTemplate:'#=calc（sum）#'，
{title:'Total Amount（'+currencycsymbol+'），field:'TotalAmount'，模板：'\\=TotalAmount'，聚合：'sum'，footerTemplate:'\\=kendo.toString（sum，\'n\'）\}
],
数据源：{
数据：viewModel.AppintDetails（），
聚合：[{field:'Duration'，聚合：'sum'，格式：'n'}，{field:'TotalAmount'，聚合：'sum'，格式：'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>




函数计算（val）{
var小时=数学楼层（val/60）；
var最小值=val%60；
val=小时+“：”+分钟+“小时”；
返回val；
}


我只是用正确的日期格式来显示总的持续时间。这个代码适合我。。。
下面的网格显示此…详细信息

或者像这样使用代码


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



$（“#网格”）.kendoGrid({
可滚动：对，
可排序：是的，
pageable:对，
可导航：是的，
可过滤：{
额外：错，
操作员：{
字符串：{
startswith:“以开始”，
情商：“等于”，
neq：“不等于”
}
}
},