使用 HTML Table 作为数据源将数据绑定到 Kendo UI 模板答案

【问题标题】：Use HTML Table as a datasource to bind data to Kendo UI Template使用 HTML Table 作为数据源将数据绑定到 Kendo UI 模板
【发布时间】：2013-11-07 16:59:00
【问题描述】：

我创建了一个服务，它将根据请求参数返回一组 HTML 表格。目前，我将数据（HTML 页面）作为字符串返回。示例输出如下：

<!DOCTYPE html>
<html>
   <head>
      <META http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>
   <body>
      <h1>Person</h1>
      <table name="name">
         <thead>
            <tr>
               <th data-field="propertyID"> Property ID</th>
               <th data-field="property"> Property</th>
               <th data-field="valueID"> Value ID</th>
               <th data-field="value"> Value</th>
            </tr>
         </thead>
         <tr>
            <td>http://topbraid.org/examples/kennedys#name</td>
            <td>Name</td>
            <td>Alfred Tucker</td>
            <td>Alfred Tucker</td>
         </tr>
      </table>
      <table name="firstName">
         <thead>
            <tr>
               <th data-field="propertyID"> Property ID</th>
               <th data-field="property"> Property</th>
               <th data-field="valueID"> Value ID</th>
               <th data-field="value"> Value</th>
            </tr>
         </thead>
         <tr>
            <td>http://topbraid.org/examples/kennedys#firstName</td>
            <td>First Name</td>
            <td>Alfred</td>
            <td>Alfred</td>
         </tr>
      </table>
      <table name="lastName">
         <thead>
            <tr>
               <th data-field="propertyID"> Property ID</th>
               <th data-field="property"> Property</th>
               <th data-field="valueID"> Value ID</th>
               <th data-field="value"> Value</th>
            </tr>
         </thead>
         <tr>
            <td>http://topbraid.org/examples/kennedys#lastName</td>
            <td>Last Name</td>
            <td>Tucker</td>
            <td>Tucker</td>
         </tr>
      </table>
      <table name="gender">
         <thead>
            <tr>
               <th data-field="propertyID"> Property ID</th>
               <th data-field="property"> Property</th>
               <th data-field="valueID"> Value ID</th>
               <th data-field="value"> Value</th>
            </tr>
         </thead>
         <tr>
            <td>http://topbraid.org/examples/kennedys#gender</td>
            <td>Gender</td>
            <td>http://topbraid.org/examples/kennedys#male</td>
            <td>male</td>
         </tr>
      </table>
      <table name="birthYear">
         <thead>
            <tr>
               <th data-field="propertyID"> Property ID</th>
               <th data-field="property"> Property</th>
               <th data-field="valueID"> Value ID</th>
               <th data-field="value"> Value</th>
            </tr>
         </thead>
         <tr>
            <td>http://topbraid.org/examples/kennedys#birthYear</td>
            <td>Birth Year</td>
            <td>1967</td>
            <td>1967</td>
         </tr>
      </table>
      <table name="spouse">
         <thead>
            <tr>
               <th data-field="propertyID"> Property ID</th>
               <th data-field="property"> Property</th>
               <th data-field="valueID"> Value ID</th>
               <th data-field="value"> Value</th>
            </tr>
         </thead>
         <tr>
            <td>http://topbraid.org/examples/kennedys#spouse</td>
            <td>Spouce</td>
            <td>http://topbraid.org/examples/kennedys#KymSmith</td>
            <td>Kym Smith</td>
         </tr>
      </table>
      <table name="type">
         <thead>
            <tr>
               <th data-field="propertyID"> Property ID</th>
               <th data-field="property"> Property</th>
               <th data-field="valueID"> Value ID</th>
               <th data-field="value"> Value</th>
            </tr>
         </thead>
         <tr>
            <td>http://www.w3.org/1999/02/22-rdf-syntax-ns#type</td>
            <td>Type</td>
            <td>http://topbraid.org/examples/kennedys#Person</td>
            <td>Person</td>
         </tr>
      </table>
   </body>
</html>

现在我得到了 HTML 字符串，我想以某种方式将每个表绑定到 Kendo UI 中的网格。如何才能做到这一点？如果没有，这样做的正确方法是什么？

【问题讨论】：

标签： html telerik kendo-ui datasource

【解决方案1】：

我不确定这是否正是您想要的，但您可以将该 HTML 注入您的页面（我的示例使用 jQuery）

<div id="contentArea"></div>

$("#contentArea").html(serviceResult);

然后将所有表格变成剑道网格：

$("#contentArea table").kendoGrid({});

【讨论】：

您是否知道我是如何获取类以及可能在原始行和单元格上设置的其他属性转移到新表的？剑道似乎取代了所有这些，这意味着在表格标记本身上传输的信息丢失了。