Kendo UI Grid從html表格初始化編輯

Question

我一直在玩Kendo UI Grid，我喜歡它如何將HTML標記表很容易地使用。

是否可以使用HTML標記表並將其製作成Kendo可編輯網格。

http://demos.kendoui.com/web/grid/from-table.html

Answer 1

萬一別人需要幫助與此，這裏是解決方案。假設我使用以下格式創建了表格：

<table id="data"> 
    <thead> 
     <tr> 
      <th>Field 1</th> 
      <th>Field 2</th> 
      <th>Field 3</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Field 1 data</td> 
      <td>Field 2 data</td> 
      <td>Field 3 data</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

請注意，存在空頭和數據列。這是KendoUI在網格初始化時添加命令按鈕的地方。

初始化此爲可編輯KendoUI網格，你可以使用下面的JavaScript：

$("#data").kendoGrid({ 
     editable: "popup", //or "inline" 
     columns: [ 
      { field: "field1", title: "Field 1" }, 
      { field: "field2", title: "Field 2" }, 
      { field: "field3", title: "Field 3" }, 
      { command: "edit" } 
     ] 
    }); 

然後，您可以自定義編輯模板，這樣你一樣會創建從遠程或本地JSON網格時數據。

另外需要注意的是，在我的KendoUI版本中，彈出編輯器窗口中存在一個錯誤。你需要以正確地作出彈出窗口顯示添加此樣式替代，如果它不是（也就是你看到的是在屏幕中間一個白色的小方塊）：

.k-window 
    { 
     transform: none !important; 
    }