如何在Kendo UI网格中添加行号？

Question

我在页面中有一个Kendo UI网格，其中有一些列。 现在我想添加一列来显示行号。 我该如何做？ 谢谢。

我该如何在Kendo UI网格中添加一列来显示行号？

- Tavousi

---

请展示您的Razor标记。 - YD1m

即使您使用分页网格，这个答案也很好。 - Morteza Tourani

Answer 1

初始化一个变量并将其显示在列中，代码为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();
  }
});

- Zaheer Ahmed

---

注意：record变量应该被定义为全局(window)变量。如果这段JS代码是在全局作用域中编写的，那么没有问题。但是如果您在函数中编写此代码，则应将var record = 0更改为window.record = 0，否则会引发异常。 - Mohammad Dehghan

如果删除一行会发生什么？ - kittu

Answer 2

无需定义任何变量，您可以从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 
            + ($("#grid").data("kendoGrid").dataSource.pageSize() * ($("#grid").data("kendoGrid").dataSource.page() - 1));;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        });
    }
});

- Ehsan Mirsaeedi

Answer 3

对于Razor，您还需要实际显示数字：（没有足够的点东西来评论）

在网格上方：

@{int counter = 1;}

栏目定义内部:

columns.Template(@<text> 
        <span>@counter @{ counter++; }</span>
        </text>).Title("#");

- WhiteRuski

---

太棒了，伙计。 - Shawn J. Molloy

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Razim Khan

Answer 4

YD1m的模板对我没起作用，它将变量当作了字符串处理。因此，我不得不这样实现：

columns.Template(@<text>@((long)counter++)</text>)

- J Lipford

Answer 5

对于 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          
   })
)

- YD1m

---

这段代码看起来是正确的。但对我来说没有起作用。当我使用“Columns.Template(@<text>"EVERTYTHINGS"</text>);”时，网格中没有任何内容。 - Tavousi

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

结果：

- Leon

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<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>

- Aquiles Perez

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

- Arda Basoglu