grid表格

最新推荐文章于 2024-10-23 10:49:54 发布

夏木。。。

最新推荐文章于 2024-10-23 10:49:54 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： grid 文章标签： kendo-ui grid-表格

本文链接：https://blog.youkuaiyun.com/w_jiunian/article/details/72916742

grid 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Kendo UI Grid进行表行标题的自定义修改（headerTemplate），展示了一级标题的设置方法，并详细讲解了如何添加总计行及实现数据合计的功能。通过headerTemplate和合计行函数，可以实现定制化的表格展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改表行标题：（headerTemplate）

{ 
    field: "threeStar",
    title: '3',
    width: 80,
    headerTemplate: '3 <i class="fa fa-star" aria-hidden="true"></i>'

}

效果：这里写图片描述

表格一级标题

{
    title:'1',
    columns:[{
        field: "one",
        title: '2',
        width: 120
    }, {
        field: "two",
        title: '3',
        width: 100
    }]
}

效果：这里写图片描述

合计：

获取表格数据

function getDataSource(){
   return new kendo.data.DataSource({
        data:reportData,
        aggregate: [
            { field: "member", aggregate: "sum" },
            { field: "useMount", aggregate: "sum" },
            { field: "appCustomer", aggregate: "sum" },
            { field: "appMember", aggregate: "sum" },
            { field: "sellCard", aggregate: "sum" },
            { field: "prepaid", aggregate: "sum" },
            { field: "orderGross", aggregate: "sum" },
            { field: "order", aggregate: "sum" }
        ],
        pageSize:15
    })
}

合计行：

{
  field:"one",
  title:'1',
  width:120,
  footerTemplate: "<div class='bold'>合计：<span class='mgle5' id='allStore'></span></div>"
}

对应需要合计的行：

 {
   field:"one",
     title:'1',
     width:100,
     footerTemplate: "<span class='foot_total' id='member'></span>"
 }

合计行函数：

 dataBound: function () {
     var that=this;
     //计算合计
     $('.k-footer-template span.foot_total').each(function (index) {
         var field=that.dataSource.aggregate()[index].field;
         var value = that.dataSource.aggregates()[field].sum;
         $(this).html(value.toFixed(2));
     })
 },
  }).data('kendoGrid');

效果：这里写图片描述