如何使用kendoui動態創建列表視圖

如何動態創建KendoUI ListView。我的意思是我想創建div，dataSource，模板並動態添加，編輯和刪除功能。我該如何使用kendoui來做到這一點。如何使用kendoui動態創建列表視圖

我定義了諸如

<script type="text/x-kendo-tmpl" id="template"> 
      <div class="products">   
     <ul><li> 
    # for (var i = 0; i < data.length; i++) { # 
     #= data[i] # 
    # } # 
    </li></ul>    

     <div class="edit-buttons"> 
      <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a> 

      <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a> 
     </div> 
    </div> 


    </script>

然後模板中的動態模板將

<script type="text/x-kendo-tmpl" id="edittemplate"> 
      <div class="product-view"> 

      <ul><li> 
      # for (var i = 0; i < data.length; i++) { # 
     <input type="text" data-bind="value:data[i]" name="ProductName" required="required" validationMessage="required" /> 
      # } # 
      </li></ul> 
     <div class="edit-buttons"> 
     <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-edit"></span>Update</a> 

     <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-delete"></span>Cancel</a> 
    </div> 

    </div> 

    </script>

然後我也做了腳本像

var data = ["Todd", "Steve", "Burke"]; 
$("#dynamicdiv").kendoListView({ 
    template: kendo.template($("#template").html()), 
    editable:true,           
    dataSource:data,           
editTemplate:kendo.template($("#edittemplate").html()), 
}).delegate(".k-edit-button", "click", function (e) { 
     alert("dtjherut"); 
     listview.edit(); 
     e.preventDefault(); 
}).delegate(".k-delete-button", "click", function (e) { 
     alert("clicking"); 
     var model = dataSource.view()[$(this).closest(".tm").index()]; 
     dataSource.remove(model); 
     e.preventDefault(); 
     dataSource.sync(); 
}).data("kendoListView");

現在列表視圖正在加載三個名稱和編輯和刪除按鈕。但刪除和編輯按鈕不起作用。我還沒有給出創建，刪除和更新的路徑。基本上我需要動態地創建所有模板和數據源。對不起，如果有任何錯誤。任何幫助表示讚賞。

來源

2013-02-05 Jonathan

到目前爲止你嘗試了什麼？ – OnaBai

我正在嘗試動態定義模板並將該模板添加到列表視圖中。但列表視圖不顯示 – Jonathan

您可以顯示目前爲止的代碼嗎？您可以編輯這個問題，或者在JSFiddle或JSBin中添加一個工作示例。 – OnaBai

似乎你做錯了。在劍道UI列表視圖的構造函數，你必須通過一個模板的單個項目，而不是整個列表，如：

$("#listview").kendoListView({ 
    dataSource: dataSource, 
    template: "<div>#: data #</div>" 
});

更多的細節可以在這裏找到： http://docs.kendoui.com/getting-started/web/listview/overview#configuring-listview-behavior

而且，在此之前一個dataSouce應該被實例化，例如：

var dataSource = new kendo.data.DataSource({data: ["Todd", "Steve", "Burke"]});

希望有助於開始。

來源

2013-12-12 12:16:10 ikarami

如何使用kendoui動態創建列表視圖

回答

相關問題