0

剣道UIツリービューを使用しています。その中で、ツリービュー ノードを動的に追加し、剣道 ui テンプレートを使用しています。次のようにテンプレートを定義しました。

  <script id="treetemplate" type="text/kendo-ui-template">


              <table id='treeviewtable'>

      # if (item.categoryName == "Textbox") { #  
        <tr>
        <td>
          <label style="color:red">#=item.label#</label>
        </td>
        <td>
      <label>#=item.val#</label>
        </td>
        # } #

          # if (item.categoryName == "Dropdown") { #            

                  <td>
        <label style="color:red">#=item.label#</label>
        </td>
        <td>
        <label>#=item.val#</label>  
         </td>
         # } #

    </table>
    </script>

次のようにツリービューを定義しました。

       var treeview = $("#treeview").kendoTreeView({
                  template: kendo.template($("#treetemplate").html()),
                  dataSource: homogeneous,
                  dataTextField: ["categoryName"],

              }).data("kendoTreeView");

              kendo.init($("#treeview-left"));

私は次のように ajax と動的に追加するツリービューの子を作成しました。

   var selectedNode = treeview.select();

   if (selectedNode.length == 0) {
        selectedNode = null;
    }

   treeview.append({
      categoryName: json[i].categoryName, label: json[i].label, val: json[i].val
   }, selectedNode);

正常に動作しています。私の質問は、各 tr に 2 つのコントロールが含まれているテーブル形式でコントロールを追加したいということです。テキストボックスとドロップダウンを並べて表示したいのと同じように。これどうやってするの？

4

1 に答える 1

0

最初のコメントの 1 つは、HTML のラベルのtableバランスtemplateが正しく取れていないということですが、結果には影響しません。

KendoUI では、ツリー ノードは HTML 順不同リスト ( ul) であるため、各ノード コンテンツは HTML リスト アイテム ( li) 内にあります。これを知っていると、テーブルを使用すると、各ノードが異なるテーブルであるため、1 つのアイテムが前/次の幅を認識せず、同じ幅を維持しないことがわかります。

したがって、リスト要素をにスタイルする必要がありますfloat。次のスタイルを定義します。

2 つの列のそれぞれの幅がわかっている場合は、2 つの CSS スタイルを次のように定義できます。

#treeview li.k-item {
    float: left;
}

テンプレートは次のようになります。

<script id="treetemplate" type="text/kendo-ui-template">
    # if (item.categoryName == "Textbox") { #
    <div><label class="ob-label" style="color:red">#=item.label#</label></div>
    <div><label class="ob-val">#=item.val#</label></div>
    # } #

    # if (item.categoryName == "Dropdown") { #
    <div><label class="ob-label" style="color:green">#=item.label#</label></div>
    <div><label class="ob-val">#=item.val#</label></div>
    # } #
</script>

ここで実行例を確認できます: http://jsfiddle.net/OnaBai/t6UeG/1/

取得したいものに応じて、KendoUI メニューを使用する場合があります

于 2013-04-08T15:35:51.630 に答える