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 包含两个控件。就像我想并排显示文本框和下拉菜单一样。我怎样才能做到这一点？

4

1 回答 1

0

第一个评论是 HTMLtable中的标签template没有正确平衡......但这不会影响结果。

在 KendoUI 中，树节点是 HTML 无序列表 ( ul)，因此每个节点的内容都包含在 HTML 列表项 ( li) 中。知道了这一点，您可能会明白，使用您的表格，每个节点都是一个不同的表格，因此一个项目不知道前一个/下一个的宽度，并且它们不会保持相同的宽度。

因此，您需要将列表元素的样式float设置为. 定义以下样式：

如果您知道两列中每一列的宽度，则可以将两种 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 回答