我正在使用kendo ui treeview。在那我动态添加树视图节点,我使用kendo 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并动态添加了treeview这样的孩子:
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包含两个控件。就像我想并排显示文本框和下拉菜单一样。 我怎么能这样做?
答案 0 :(得分:0)
第一条评论是table
中HTML 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 Menus