如何在kendo ui网格中添加行号？

我的页面中有一个kendo ui网格，有一些列。 现在我想在其中添加一个列，显示行号。 我该怎么做？ 谢谢。

Answer 1

初始化变量并将其作为template: "#= ++record #"显示在列中template: "#= ++record #"

工作演示

这是代码：

 var record = 0; $("#grid").kendoGrid({ dataSource: { data: [{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" }, { foo: "foo" }, { foo : "foo1" }], pageSize: 10 }, sortable: true, columns: [ { title: " ", template: "#= ++record #", width: 30 }, { field: "foo" }], pageable: true, dataBinding: function() { record = (this.dataSource.page() -1) * this.dataSource.pageSize(); } }); 

Answer 2

对于Razor，你还需要实际显示数字:(没有足够的点评论）

网格上方：

 @{int counter = 1;} 

内部列定义：

 columns.Template(@ @counter @{ counter++; } ).Title("#"); 

Answer 3

没有必要定义任何变量，您可以从数据绑定事件中获得帮助：

 $("#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: "" }], 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); }); } }); 

Answer 4

YD1m的模板对我来说不起作用，它将变量视为string 。 所以我必须像这样实现它：

 columns.Template(@@((long)counter++)) 

Answer 5

对于asp.net mvc包装器，你应该使用这样的东西：

 @{ var counter = 1; } @( Html.Kendo().Grid() .Name("grid") .Columns(columns => { // Define a template column with row counter columns.Template(@@counter++); // Define a columns from your data set and set a column setting columns.Bound(type => type.id); columns.Bound(type=> type.name).Title("Name"); // add more columns here }) ) 

Answer 6

根据Ehsan Mirsaeedi的好答案，我想出了这个版本，它指定从0开始的索引而不是从1开始的行号，如果网格被分组则跳过组头，并在网格未被分页时处理情况。

我需要这些索引才能添加一个带有隐藏输入的模板到每一列，这样我就可以提交网格的值和整个表单。

我认为它足够相关，值得添加到线程……

码：

 var theGrid = $("#grid").data("kendoGrid"); var rows = this.items().filter(function (index, item) { return $(item).hasClass("k-grouping-row") == false; }); $(rows).each(function () { var index = $(this).index(); //prevent group header rows from incrementing index if (theGrid.dataSource.options.group != null && theGrid.dataSource.options.group.length > 0) index -= $(this).prevAll("#grid tr.k-grouping-row").length; //adjust indices for current page if (theGrid.options.pageable == true) index += theGrid.dataSource.pageSize() * (theGrid.dataSource.page() - 1); //add the value to the grid's data object theGrid.dataItem(this).rowNumber = index; //and update the grid's HTML var rowLabel = $(this).find(".row-number"); $(rowLabel).html(index); }); 

结果：

Answer 7

如果需要，可编辑网格中的行号

  $(document).ready(function(){ $("#grid").kendoGrid({ dataSource: { data: null, schema: { model: { id: "register_No", fields: { register_No: {editable: true}, myEditableField: {editable: true}, } } } }, edit:function(e){ var fields= $('input[name="register_No"]'); fields.attr('disabled', true); fields.removeClass('k-input k-textbox'); fields.addClass('none'); //create this class and set border and background none $('input[name="myEditableField"]').focus(); }, save:function(e){ var total=e.sender.dataSource.data().length; if(e.model.register_No==""){ e.model.register_No=total; } }, remove:function(e){ var grid = $("#grid").data("kendoGrid"); var todos=grid.dataSource.data(); var id_actual=e.model.register_No; var count=1; for(var i=0;i 

Answer 8

声明行计数的变量：

 var rowNumber = 0; 

使用++运算符在模板中使用它来为每次迭代递增它：

 #= ++rowNumber # 

这也适用于Kendo UI ListView。

见官方文件：

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/add-row-numbers