jquery tree table

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.