將表格格式更改爲Div

我正在使用Kendo UI Grid插件。我如何將Grid Table佈局更改爲Div佈局？將表格格式更改爲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>

來源

2015-12-28 Reddy

請參見[56，「問題‘’包括在他們的頭銜？」標籤（http://meta.stackexchange.com/questions/19190/should-questions-include-tags在他們的標題），共識是「不，他們不應該」！ –

這將需要一些造型，讓每行多div S和使它看起來您想要的方式，但使用kendo templates，你可以做到這一點。某些CSS可用於隱藏標題，行表可以將該面板外觀賦予單元格中的每個項目。

在JavaScript中有一行用於行模板，在HTML中，該模板已定義並使用dataSource中的字段。

請注意，關於在模板中<tr>的data-uid="#: uid #"是必要的編輯按鈕工作。沒有該屬性，該按鈕將被破壞，因爲它不確定我們要編輯哪個「行」。

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>

來源

2015-12-28 13:59:17 Jon

** @ JB _ ** ...感謝您的回覆......但** +添加**功能無法正常工作......將錯誤顯示爲「** Uncaught ReferenceError：Name is not defined **」 – Reddy

@Reddy ，對於那個很抱歉。您需要將這些字段添加到數據源中的模式中。我已更新帖子以包含此內容。 – Jon

** @ JB _ **再次感謝......按預期工作......但小的澄清，我可以隱藏表格標籤/元素......例如：結構應該是:: '<！ - Main Wrapper ！ - >

Edit Name: "#: Name #" Age: "#: Age #"

< - /主包裝 - >' – Reddy

將表格格式更改爲Div

回答

相關問題