如何在 Kendo UI Grid 中获得行号

Posted 2023-05-07

【中文标题】如何在 Kendo UI Grid 中获得行号

【英文标题】：How Can I Have Row Number In Kendo UI Grid

【发布时间】：2014-02-02 10:34:51

【问题描述】：

我在 asp.net mvc 中有剑道网格，我使用服务器包装器。我想要名为“行号”的附加列，它是简单的计数器 (1,2,3,...)。我希望这个计数器永远不会因客户端排序而改变。总是第一行是 1 第二行是 2 ，...在列“RowNumber”

如何在剑道网格中做到这一点？

【问题讨论】：

How to add row number to kendo ui grid? 的可能重复项

【参考方案1】：

您可以使用dataBound 事件：

$("#grid").kendoGrid(
    sortable: true,
    dataSource: [
        name: "Jane Doe",
        age: 30
    , 
        name: "John Doe",
        age: 33
    ],
    columns: [
        field: "name"
    , 
        field: "age"
    , 
        field: "rowNumber",
        title: "Row number",
        template: "<span class='row-number'></span>"
    ],
    dataBound: function () 
        var rows = this.items();
        $(rows).each(function () 
            var index = $(this).index() + 1;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        );
    
);

(demo)

【参考方案2】：

其他答案还可以，但它们不应用分页效果。 所以我认为更好的实现是：

var grid = $( "#grid" ).kendoGrid( 
    sortable: true,
    dataSource: [ 
        name: "Jane Doe",
        age: 30
    , 
        name: "John Doe",
        age: 33
     ],
    pageable: 
        refresh: false,
        pageSizes: true,
        pageSize: 10,
    ,
    columns: [ 
        field: "name"
    , 
        field: "age"
    , 
        field: "rowNumber",
        title: "Row number",
        template: dataItem => grid.dataSource.indexOf(dataItem) + 1
     ],
 ).data().kendoGrid;

【讨论】：

这正是我所寻找的，它的工作方式与 Angular Kendo Grid 实现完全相同。

以防万一，template: (dataItem) => ... 只能用于 ES6 浏览器，你可能需要为 ES5 做function(dataItem) var ds = ... 。

【参考方案3】：

我同时使用 Angular 和 Kendo，并像这样设置索引值（使用 Lodash）：

dataBound : function () 
   _.each(this.items(), function (item, i) 
      var rowScope = angular.element(item).scope();
      rowScope.dataItem.index = i;
   );

【参考方案4】：

Lars Hoppner 的回答是正确的，但是如果您更改页面，编号将被重置。我的解决方案是在公式中添加页码和页面大小：

$("#grid").kendoGrid(
    sortable: true,
    dataSource: [
        name: "Jane Doe",
        age: 30
    , 
        name: "John Doe",
        age: 33
    ],
    columns: [
        field: "name"
    , 
        field: "age"
    , 
        field: "rowNumber",
        title: "Row number",
        template: "<span class='row-number'></span>"
    ],
    dataBound: function () 
        var rows = this.items();
        $(rows).each(function () 
            var index = $(this).index() + 1 
            + ($("#grid").data("kendoGrid").dataSource.pageSize() * ($("#grid").data("kendoGrid").dataSource.page() - 1));;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        );
    
);

【参考方案5】：

对于服务器端分页，可以使用此脚本（在网格的列部分中）：

 title: "#", 
  template: dataItem => (grid.dataSource.page() - 1) *
            grid.dataSource.pageSize() + 
            grid.dataSource.indexOf(dataItem) + 1, 
  width: 45,

【参考方案6】：

我认为更好的实现方式是：

dataBound: function () 
            if (this.dataSource && this.dataSource._total) 
                var rows = this.items();
                for (var i = 0; i < rows.length; i++) 
                    var index = i + 1
                        + (this.dataSource.pageSize() * (this.dataSource.page() - 1));
                    var rowLabel = $(rows[i]).find(".row-number");
                    $(rowLabel).html(index);
                
            
        

【参考方案7】：

对我来说是这样的

grid = $("#grid").kendoGrid(
    dataSource: dataSource,
    height: 543,
    scrollable: 
        virtual: true
    ,
    pageable: 
        numeric: false,
        previousNext: false,
        messages: 
            display: "Showing 2 data items"
        
    ,
    columns: [
        
            title: "#",
            // template: "#= ++record #",
            template: function(dataItem) 
                var rowNumber = 0
                if($("#grid").data("kendoGrid")) 
                  rowNumber = $("#grid").data("kendoGrid").dataSource.indexOf(dataItem) + 1;
                
                return "<strong>" + rowNumber + "</strong>";
            ,
            width: 80
        ,
         field: "FirstName", title: "First Name" ,
         field: "LastName", title: "Last Name" ,
         field: "City", title: "City" ,
         field: "Title" 
    ]
);`

不使用 $("#grid").data("kendoGrid") 这在第一次渲染时显示为 0 作为行号。

【参考方案8】：

另一种方法。只需 3 个简单的步骤即可完成：

创建一个保留行号的变量 在 dataBinding 中将值设为 0 将函数传递给模板，这将为每一行增加变量