Kendo 模板自增

Question

你好，我想知道如何在模板中使用 for 循环来添加数字 1 因为这就是我在下面的图片中得到的

其余的都被后端调用了，但是这个S/N只是从1开始的一个数字加火

enter image description here

// Call the table to the kendogrid where we use our datasource
$("#customer-list").kendoGrid({
    dataSource: dataSource,
    height: $(window).height()-$("#customer-list").position()["top"]-180,
    selectable: "single, row",
    change: function(e) {
        console.log("change", this.dataItem(this.select()[0]));
    },
    scrollable: {
        endless: true,
    },
    columns: [{
        field: "",
        title: "S/N",
        headerAttributes: { "class": "k-text-center" },
        width: 60,
        template: `1`
    }, {
        field: "",
        title: "Profile",
        headerAttributes: { "class": "k-text-center" },
        width: 150,
        template:`
            <img class="imageinside" src='#=data.Picture#' width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/avatar.png';" style="border-radius:50px"/>
        `
    }, {
        field: "",
        title: "Customer Name",
        template:`
            <div id="customernameid">#=data.Name#</div>                  
        `
    }],  
});

Answer 1

在知识库 here 中有一个解决方案，使用数据源的 page() 和 pageSize() 方法，以及一个计数器变量。

请参阅建议解决方案的代码片段。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
</head>
<body>
  
  <div id="grid"></div>
    <script>
      var record = 0;

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
          },
          pageSize: 20

        },
        sortable: true,
        columns: [
          {
            title: "#",
            template: "#= ++record #",
            width: 50
          }, {
            field: "ContactName", title: "Contact Name"
          }, {
            field: "CompanyName",
            title: "Company Name"
          }, {
            field: "Country",
            width: 150
          }
        ],
        pageable: true,
        dataBinding: function() {
          record = (this.dataSource.page() -1) * this.dataSource.pageSize();
        }
      });
    </script>
</body>
</html>

Kendo 模板自增

Kendo template auto increasement

kendo-ui

kendo-grid