您的位置:首页 > Web前端 > JQuery

Jquery TreeTable使用的一个误区

2011-07-17 21:23 501 查看
       说起树形结构,在.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的格式就可以了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery class table tree .net css
相关文章推荐