将 Table 格式更改为 Div

Question

我正在使用 Kendo UI 网格插件。如何将网格 Table 布局更改为基于 Div 的布局？

而且我还可以创建新的/编辑现有的项目等...

请查看下面的参考图片以获得更多说明...

有什么帮助吗？

Online Demo

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/api">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

 <div id="grid"></div>

  <script>
    jQuery(document).ready(function(){
      $("#grid").kendoGrid({
        columns: [
          { field: "Name" },
          { field: "Age" },
          { command: "edit" }
        ],
        dataSource: {
          data: [
            { id: 1, Name: "Reddy Prasad", Age: 30 },
            { id: 2, Name: "Gaurav Kapadia", Age: 33 }
          ],
          schema: {
            model: { id: "id" }
          }
        },
        editable: {
          mode: "popup",
          window: {
            title :"This is the title"
          }
        },
        toolbar: [{ name: 'create', text: 'Add' }]
      });
    });
  </script>

</body>
</html>

Answer 1

它需要一些样式来允许每行多个 div 并使其看起来像你想要的那样，但是使用 kendo templates，你可以实现这一点。一些 CSS 可用于隐藏 header 行 table 可为单元格中的每个项目提供面板外观。

在 JavaScript 中有一行用于行模板，在 HTML 中定义了该模板并使用了 dataSource 中的字段。

请注意模板中<tr>上的data-uid="#: uid #"对于编辑按钮是必需的上班。没有那个属性按钮将会损坏，因为它不确定我们要编辑哪个 "row"。

jQuery(document).ready(function(){
      $("#grid").kendoGrid({
        columns: [
          { field: "Name" },
          { field: "Age" },
          { command: "edit" }
        ],
        dataSource: {
          data: [
            { id: 1, Name: "Reddy Prasad", Age: 30 },
            { id: 2, Name: "Gaurav Kapadia", Age: 33 }
          ],
          schema: {
            model: { id: "id", Name: "", Age: "" }
          }
        },
        editable: {
          mode: "popup",
          window: {
            title :"This is the title"
          }
        },
        toolbar: [{ name: 'create', text: 'Add' }],
        rowTemplate: kendo.template($("#rowtemplate").html())
      });
    });

html { 
    font-size: 14px; 
    font-family: Arial, Helvetica, sans-serif; 
}

.k-grid-header-wrap th {
    display: none;
}

tr {
    float: left;
}

.rowEdit {
    float: right;
}

.myPanel {
    border: 1px solid #888;
    background-color: #eee;
    width: 200px;
    margin: 5px;
    padding: 15px;
}

.myPanel label {
    clear: both; /* puts labels on new line */
    display: block;
    padding: 15px 0 5px 0;
}

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/api">
    <style></style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

 <div id="grid"></div>
    
 <script type="text/x-kendo-template" id="rowtemplate">
 
   <tr data-uid="#: uid #"><td>
   
   <div class="myPanel">
   
     <a class="rowEdit k-button k-button-icontext k-grid-edit" href="\#">
       <span class="k-icon k-edit"></span>Edit
     </a>
   
     <label>Name: "#: Name #"</label>
     
     <label>Age: "#: Age #"</label>
   
  </div> 
  
  </td></tr>
 
 </script>
</body>
</html>

将 Table 格式更改为 Div

Change Table format to Div

jquery

kendo-ui

kendo-grid