剑道网格列序号答案

【问题标题】：kendo grid column sequence number剑道网格列序号
【发布时间】：2015-07-28 17:31:41
【问题描述】：

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

【问题讨论】：

标签： kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案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零）并将其绑定到模板。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
多谢温柔指导，不常回复。将尝试编辑它。
@JAL 是的，您上面的人刚刚指出了这一点，并且对答案进行了编辑以反映这一点。
@JAL 不用担心！我通常是一个潜伏者——我什至不知道队列存在或不会打扰。显然，对我来说是一个学习的时刻。我有几个书签来自处理相同的问题。这条规则是有道理的。

【解决方案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>

【讨论】：

你能提供一个演示吗？我喜欢它。

【解决方案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() 事件中设置数字，如果您可以在服务器端设置数字，则可以避免这种情况。然后它对计数器求和并将其设置为新行。

【讨论】：