Question

我正在阅读示例JS对象数组并将信息绑定到Kendo UI Grid，如下所示

var sites = [{

            sitename: "HTS_SITE_001",
                address: "HTS Orion",
                contact: "john.smith@telerik.com",
                status: "70",
                persons: "5"
            },
               {

                   sitename: "HTS_SITE_002",
                   address: "Smith",
                   contact: "john.smith@telerik.com",
                   status: "70"
               },
              {

                  sitename: "HTS_SITE_003",
                  address: "Smith",
                  contact: "john.smith@telerik.com",
                  status: "70"
              },
               {

                   sitename: "HTS_SITE_004",
                   address: "Smith",
                   contact: "john.smith@telerik.com",
                   status: "70"
               }];

        $("#grid").kendoGrid({
            columns: [{ title: "Site Name", field: "sitename" },
               { title: "Site Address", field: "address"},
               { title: "Contact", field: "contact" },
                { title: "Status", field: "status" }],
            pageable: true,
            sortable: true,
            navigatable: true,
            dataSource: sites
        });

然而，网格的样式并不是我所期望的。我想填充HTML表格中的数据，该表格具有预定义的样式，如下所示。我如何使用Kendo Grid实现这一目标，

<div class="box-body">
            <div class="table-responsive">
                <table class="table no-margin">
                    <thead>
                        <tr>
                            <th data-field="sitename">Sites</th>
                            <th data-field="address">Address</th>
                            <th data-field="status">Status</th>
                            <th data-field="contact">Contact</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="pages/examples/invoice.html">HTS_SITE_001</a></td>
                            <td>#24, Pirmasenserstrasse</td>
                            <td>In progress</td>
                            <td>joe.simon@google.de</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

Answer 1

您可以迭代JSON数组并将行添加到表中。为方便起见，给表格一个ID（在我的例子中，“theTable”）

$(document).ready(function(){

  html = '';
  for (var i=0; i<sites.length; i++){
    html += '<tr>';
    html += '<td><a href="pages/examples/invoice.html">' + sites[i].sitename + '</a></td>';
    html += '<td>' + sites[i].address + '</td>';
    html += '<td>' + sites[i].status + '</td>';
    html += '<td>' + sites[i].contact + '</td>';
    html += '</tr>';
  }

  $("#theTable tbody").empty().append(html);

});

的 DEMO

Answer 2

您还可以使用Kendo填充本地数据，如下所示：

$(document).ready(function(){

  var table = $("#theTable").kendoGrid({
                dataSource: sites
              });
});

在你的HTML中，你只需要在你的桌子上这样做：

<body>
  <div class="box-body">
      <div class="table-responsive">
          <table class="table no-margin" id="theTable">
              <thead>
                  <tr>
                     <th data-field="sitename" data-template="<a href='pages/examples/invoice.html' target='_blank'>#=sitename#</a>">Sites</th>
                     <th data-field="address">Address</th>
                     <th data-field="status">Status</th>
                     <th data-field="contact">Contact</th>
                 </tr>
              </thead>
              <tbody>
                <tr>
                  <td><a href="pages/examples/invoice.html">HTS_SITE_001</a></td>
                  <td>#24, Pirmasenserstrasse</td>
                  <td>In progress</td>
                  <td>joe.simon@google.de</td>
                </tr>
             </tbody>
          </table>
       </div>
    </div>
</body>

DEMO

使用Kendo Grid在HTML表格中填充JSON数据

2 个答案:

的 DEMO