Jquery TreeTable使用的一个误区

       说起树形结构,在.net下首先会想到TreeView控件。但是如果要在后台的table表格里面表示这个树形结构，我个人感觉不太方便。不过我们还可以使用Jquery.Jquery提供了一个TreeTable的插件，使用这个插件可以方便的表示树形表格。

       使用Jquery TreeTable很简单，首先引入Jquery，然后在引入jquery.treeTable.min，CSS也是不可以缺少的。然后给要表示树形结构的Table表格加一个class属性，

然后在 $(".example").treeTable();就完成了。

      贴一个官方的例子。

     <table class="example">
  <caption>Simple treeTable Example</caption>
  <thead>
    <tr>
      <th>TreeColumn</th>
      <th>Additional data</th>
    </tr>
  </thead>
  <tbody>
    <tr id="ex0-node-1">
      <td>Node 1: Click on the icon in front of me to expand this branch.</td>
      <td>I live in the second column.</td>
    </tr>
    <tr id="ex0-node-1-1" class="child-of-ex0-node-1">
      <td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
      <td>Interesting.</td>
    </tr>
    <tr id="ex0-node-1-1-1" class="child-of-ex0-node-1-1">
      <td>Node 1.1.1: I am part of the tree too!</td>
      <td>That's it!</td>
    </tr>
  </tbody>
</table>

不过这里可以有一个误区，因为tr的ID写法，可能会被误导。

其实，tr的ID并不是最重要的，表示树形的关系的关键是class关系。

比如有两个<tr >，一个<tr id="tr1">,一个<tr id="tr2">,要表示<tr id="tr2">是属于<tr id="tr1">的，只需给<tr id="tr2">加一个class="child-of-tr1"。

也就是说，DEMO上ex0-node-1，ex0-node-1-1，ex0-node-1-1-1这种ID格式不是必须的。只要在后台使用递归函数的时候构造好class的格式就可以了。