C# 如何将行号添加到剑道 ui 网格中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17378361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add row number to kendo ui grid?
提问by Tavousi
I have a kendo ui grid in my page that has some columns. Now I want to add a column to it that shows me row number. How to I do this? Thanks.
我的页面中有一个 kendo ui 网格，其中包含一些列。现在我想向其中添加一列显示行号。我该怎么做？谢谢。
采纳答案by Zaheer Ahmed
Initialize a variable and show it in column as template: "#= ++record #"
初始化一个变量并将其显示在列中 template: "#= ++record #"
Here is code:
这是代码：
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();
}
});
回答by YD1m
For asp.net mvc wrapper you should use something like this:
对于 asp.net mvc 包装器，您应该使用如下内容：
@{
var counter = 1;
}
@( Html.Kendo().Grid<Types>()
.Name("grid")
.Columns(columns =>
{
// Define a template column with row counter
columns.Template(@<text>@counter++</text>);
// 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
})
)
回答by J Lipford
YD1m's template did not work for me it treated the variable like a string. So I had to implement it like so:
YD1m 的模板对我不起作用，它将变量视为string. 所以我必须像这样实现它：
columns.Template(@<text>@((long)counter++)</text>)
回答by WhiteRuski
For Razor you also need to actually show the number also: (not enough point thingies to comment)
对于 Razor，您还需要实际显示数字：（没有足够的要点来评论）
above the grid:
网格上方：
@{int counter = 1;}
inside column definitions:
内部列定义：
columns.Template(@<text>
<span>@counter @{ counter++; }</span>
</text>).Title("#");
回答by Ehsan Mirsaeedi
there is no need to define any variables, you can get help from databound event:
无需定义任何变量，您可以从数据绑定事件中获得帮助：
$("#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);
});
}
});
回答by Leon
Based on Ehsan Mirsaeedi's great answer, I came up with this version, which assigns indices starting at 0 instead of row numbers starting at 1, skips group headers if the grid is grouped, and handles the case when the grid is not paged.
基于 Ehsan Mirsaeedi 的精彩回答，我想出了这个版本，它分配从 0 开始的索引而不是从 1 开始的行号，如果网格已分组，则跳过组标题，并在网格未分页时处理这种情况。
I needed these indices in order to add a template with a hidden input to each column, so that I can then submit the grid's values along with the entire form.
我需要这些索引，以便向每列添加一个带有隐藏输入的模板，以便我可以将网格的值与整个表单一起提交。
I think it's related enough and worth adding to the thread...
我认为它足够相关并且值得添加到线程中......
Code:
代码：
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);
});
Result:
结果：
回答by Aquiles Perez
If you need, row number in editable grid
如果需要，可编辑网格中的行号
$(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<todos.length;i++){
if(todos[i].register_No!==id_actual){
var data = grid.dataSource.at(i);
data.set("register_No", count);
count++;
}
}
}
, height: 280,
toolbar: ["create"],
scrollable: true,
editable: {mode:"inline", createAt: "bottom", confirmation: true
}
,
columns: [
{field: "register_No",title: "No", width: 30},
{field: "myEditableField", title: "Any Field", width: 120},
{field: "options", command: ["edit", "destroy"], width: 200}
]
});
});<div id="grid"></div>回答by Arda Basoglu
Declare a variable for row counting:
声明一个用于行计数的变量：
var rowNumber = 0;
Use it in your template with ++ operator to increment it for each iteration:
在您的模板中使用 ++ 运算符来为每次迭代增加它：
#= ++rowNumber #
This also works for Kendo UI ListView.
这也适用于 Kendo UI ListView。
See the official document:
看官方文档：
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/add-row-numbers
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/add-row-numbers
