Question

我正在使用Kendo UI Grid插件。如何将网格表布局更改为基于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可用于隐藏标题，行表可以为单元格中的每个项目提供该面板外观。

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

请注意模板中data-uid="#: uid #"上的<tr> 必要，以便编辑按钮正常工作。如果没有该属性，按钮将被破坏，因为它不确定哪个＆＃34; row＆＃34;我们想编辑。

＆＃13;

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())
      });
    });

＆＃13;

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

＆＃13;

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

＆＃13;

将表格格式更改为Div

1 个答案: