0

KendoUI ListView を動的に作成するにはどうすればよいですか。つまり、div、dataSource、templates を作成し、機能を動的に追加、編集、および削除したいということです。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");

これで、リスト ビューがロードされ、3 つの名前と、編集および削除ボタンが表示されます。ただし、削除ボタンと編集ボタンは機能しません。ここでは、作成、削除、および更新のパスを指定していません。基本的に、すべてのテンプレートとデータソースを動的に作成する必要があります。間違いがありましたら申し訳ありません。どんな助けでも大歓迎です。

4

1 に答える 1

0

やり方が間違っているようです。kendo UI listview のコンストラクターでは、リスト全体ではなく、単一のアイテムのテンプレートを渡す必要があります。次に例を示します。

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

詳細については、http://docs.kendoui.c​​om/getting-started/web/listview/overview#configuring-listview-behavior をご覧ください 。

さらに、その前に dataSouce をインスタンス化する必要があります。

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

始めるのに役立つことを願っています。

于 2013-12-12T12:16:10.173 に答える