jquery tree table

本文介绍如何使用 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.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值