Question

我是Asp.net MVC的kendo UI新手，我要求在kendo Grid中将序列号设为1,2,3,4等。同样在“添加新记录”的情况下，序列列应该是获取最新的数字并加1（例如：如果网格中的记录是4并且1,2,3,4作为序列，它应该在新记录中有5）。任何形式的帮助表示赞赏。

Answer 1

我认为这些链接中的一个或两个都能回答您的问题：

How Can I Have Row Number In Kendo UI Grid

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

http://www.telerik.com/forums/row-number-in-kendo-grid

<script>
  var rowNumber = 0;
  function resetRowNumber(e) {
      rowNumber = 0;
  }
  function renderNumber(data) {
      return ++rowNumber;
  }
</script>

@(Html.Kendo().Grid()   
    .Name("grid")
    .Columns(columns => {
        columns.Template(t => { }).Title("Row No").ClientTemplate(
            "#= renderNumber(data) #"
        );
    })
    .Events(ev => ev.DataBound("resetRowNumber"))
)

总之，使用模板为行号添加一个额外的列，您还需要设置循环遍历行的数据绑定事件并抓取行的索引（如果您不想要，则为+1）包括零）并将其绑定到模板。

Answer 2

您可以尝试使用此reference

进行数据绑定

<script>

 var RecordNumber = 0;

 $("#grid").kendoGrid({  
    dataSource: dataSource,
    columns: [
              { title: "&nbsp;", template: "#= ++RecordNumber #", width: 30 },
             ..
             ],
    dataBinding: function() {       
              RecordNumber = (this.dataSource.page() - 1) * this.dataSource.pageSize();
        }

 });
  </script>

Answer 3

我得到了我的头脑。不知道它是否是最好的方式，无论如何，它似乎达到你想要的目的：

$("#grid").kendoGrid(
{
  dataSource: new kendo.data.DataSource({
    data: [{
        item: "Item 1"
      }, {
        item: "Item 2"
      },{
        item: "Item 3"
      }],
    schema: {
      parse: function(data) {
        var count = 0;

        return data.filter(function(i) {
          i.count = ++count;
          return true;
        });
      }
    }
  }),
  columns: [{
    field: "count",
    editable: false
  }, {
    field: "item",
    title: "Item name"
  }],
  toolbar: [{ name: "create"}],
  editable: {
    mode: "inline"
  },
  edit: function(e) {
    var nextid = 0;

    nextid = Number($(e.sender.element).find("tbody tr:last td:first").text()) + 1;

    $(e.container).find('[name="count"]').val(nextid);
  }
});

的 Demo 。它基本上设置了parse()事件中的数字，如果您可以在服务器端设置数字，则可以避免这种情况。然后它将计数器相加并将其设置为新行。

kendo网格列序列号

3 个答案: