Javascript 使用Kendo网格在HTML表中填充JSON数据_Javascript_Kendo Ui_Kendo Grid

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

javascript kendo-ui

Javascript 使用Kendo网格在HTML表中填充JSON数据,javascript,kendo-ui,kendo-grid,Javascript,Kendo Ui,Kendo Grid,我正在阅读一个示例JS对象数组，并将信息绑定到剑道UI网格，如下所示 var sites = [{ sitename: "HTS_SITE_001", address: "HTS Orion", contact: "john.smith@telerik.com", status: "70", persons: "5" }

我正在阅读一个示例JS对象数组，并将信息绑定到剑道UI网格，如下所示

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表中的数据，该表具有如下所示的预定义样式。我如何使用剑道网格实现这一点

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


地点
地址
地位
接触
#24，皮尔马森斯特拉塞
进行中
乔。simon@google.de

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

$（文档）.ready（函数（）{
html=''；
对于（var i=0；i，您还可以使用剑道填充本地数据，如下所示：
$(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>


地点
地址
地位
接触
#24，皮尔马森斯特拉塞
进行中
乔。simon@google.de

您好，谢谢DoJo上的示例，但是我无法使其在我的网页上运行。我将检查并选择此作为答案。关于如何在Kendo UI中使用与网格相关的应用程序数据的Observable对象，我缺少对Kendo.js文件的引用。现在它可以运行了。再次感谢
<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>