gpt4 book ai didi

jquery - 如何在同一行中对齐表中的所有 td

转载 作者:行者123 更新时间:2023-12-03 22:52:36 27 4
gpt4 key购买 nike

我正在使用 Kendo 用户界面 Treeview 。因为我正在动态添加 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>

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

最佳答案

第一个评论是 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

关于jquery - 如何在同一行中对齐表中的所有 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15871979/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com