jquery tree table

最新推荐文章于 2025-05-28 11:06:12 发布

最新推荐文章于 2025-05-28 11:06:12 发布 · 320 阅读

文章标签：

#javascript #ViewUI

j2ee 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 jQuery 的 treetable 插件创建树状表格，并详细解释了其 HTML 结构、使用方法及配置参数。通过简单的示例代码，展示了如何初始化插件并设置初始状态、缩进等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery的tree table插件：

http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#settings

1.html结构

<table id="tree">
  <tr id="node-1">
    <td>Parent</td>
  </tr>
  <tr id="node-2" class="child-of-node-1">
    <td>Child</td>
  </tr>
  <tr id="node-3" class="child-of-node-2">
    <td>Child</td>
  </tr>
</table>

2.使用tree table

<link href="path/to/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="path/to/jquery.treeTable.js"></script>
<script type="text/javascript">

$(document).ready(function()  {
  //设置第一列的格式
  $('#tree tr th:first').css('padding-left', '19px');  
  $('#tree tr td:first-child').css('padding-left', '19px');  
  $('#tree').treeTable({initialState:'expanded', indent:19}); 
});

</script>

3.参数

`childPrefix`	`string`	`"child-of-"`	Customize the prefix used for node classes.
`clickableNodeNames`	`bool`	`false`	Set to true to expand branches not only when expander icon is clicked but also when node name is clicked.
`expandable`	`bool`	`true`	Should the tree be expandable? An expandable tree contains buttons to make each branch with children collapsable/expandable.
`indent`	`int`	`19`	The number of pixels that each branch should be indented with.
`initialState`	`string`	`"collapsed"`	Possible values: `"expanded"` or `"collapsed"` .
`onNodeShow`	`function`	`null`	Callback function fired when a node is made visible.
`persist`	`bool`	`false`	Persist tree state on client side (requires persist.js ).
`persistStoreName`	`string`	`"treeTable"`	Store name used when `persist` is true.
`treeColumn`	`int`	`0`	The number of the column in the table that should be displayed as a tree.