如何在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中創建行號

回答

相關問題