如何在Kendo UI Grid中创建行号

我在asp.net mvc中使用kendo网格，并使用服务器wrapper.I想添加一个名为“Row Number”的列，它是简单的计数器（1,2,3，.. ）。我希望这个计数器不会被客户端排序改变。总是第一行是第二行是2，...列“RowNumber”如何在Kendo UI Grid中创建行号

我怎么能在剑道网格中做到这一点？

来源

2014-01-14 Behrouz Ghazi

的[如何添加行号可能重复，以剑道ui网格？]（http://stackoverflow.com/questions/17378361/how-to-add-row-number-to-kendo-ui-grid） – Jesse

可以使用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）

来源

2014-01-14 21:43:07

我使用的角度和剑道和我一起这样设置索引值（使用Lodash）：

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

来源

2014-09-04 14:16:35 sma

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); 
 
     }); 
 
    } 
 
});

来源

2015-11-10 14:15:26

其他答案是确定的，但它们并不适用分页效果。所以我觉得更好的实现将是：

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;

来源

2016-01-05 10:13:16

这正是我正在寻找和它的作品完全相同Angular Kendo Grid实现的方式。 –

为了以防万一，'template：（dataItem）=> {...}'只能用于ES6浏览器，您可能需要为ES5执行'function（dataItem）{var ds = ...}'。 –

这是迄今为止最简单，最准确的答案。 –

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

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

来源

2017-09-24 22:12:35

如何在Kendo UI Grid中创建行号

回答

相关问题