如何在Kendo UI Grid中使用行号

时间:2014-01-14 11:23:20

标签: jquery asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

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

如何在剑道网格中执行此操作?

7 个答案:

答案 0 :(得分:9)

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

答案 1 :(得分:6)

其他答案都可以,但它们不会应用分页效果。 所以我认为更好的实施将是:

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;

答案 2 :(得分:2)

我一起使用Angular和Kendo,我设置了这样的索引值(使用Lodash):

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

答案 3 :(得分:0)

Lars Hoppner的回答是正确的,但是如果你更改页面,编号将被重置。我的解决方案是将公式号和页面大小添加到公式中:

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

答案 4 :(得分:0)

对于服务器端分页,可以使用此脚本(在网格的列部分中):

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

答案 5 :(得分:0)

我认为更好的实现方法是:

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

答案 6 :(得分:0)

对我来说,它像这样工作 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作为行号。