treeTable的简单用法

标签：jquery   插件   treetable   

treeTable也是一种很常用的插件，以数型table的形式来展示数据，效果图如下：

不多说了，直接贴代码吧：

需要引入的文件：

  <script type="text/javascript" src="jquery-1.7.2.js"></script>  
  <script type="text/javascript" src="jquery.treetable.js"></script>
  <link rel="stylesheet" type="text/css" href="jquery.treetable.theme.default.css" />
  <link rel="stylesheet" type="text/css" href="jquery.treetable.css" />

html代码：

  <table id="example-advanced">
 <tr data-tt-id="0">
   <td>app</td>
 </tr>
 <tr data-tt-id="1" data-tt-parent-id="0">
   <td>controllers</td>
 </tr>
 <tr data-tt-id="1-1" data-tt-parent-id="1">
   <td>application_controller.rb</td>
 </tr>
 <tr data-tt-id="2">
   <td>helpers</td>
 </tr>
 <tr data-tt-id="2-1" data-tt-parent-id="2">
   <td>models</td>
 </tr>
 <tr data-tt-id="2-1" data-tt-parent-id="2">
   <td>views</td>
 </tr>
  </table>
  <a href="#" onclick="jQuery(‘#example-advanced‘).treetable(‘expandAll‘); return false;">展开所有</a>


  <a href="#" onclick="jQuery(‘#example-advanced‘).treetable(‘collapseAll‘); return false;">关闭所有</a>
  <br/>
     双击可以看到选择的是哪个

js代码：

  <script>
  $(function(){

//加载treetable
   $("#example-advanced").treetable({ expandable: true });
   //选中高亮
   $("#example-advanced tbody").on("mousedown", "tr", function() {
     $(".selected").not(this).removeClass("selected");
    $(this).toggleClass("selected");
});
//双击提示
$("#example-advanced tbody").on("dblclick", "tr", function() {
//console.log($(this).attr(‘data-tt-id‘));
alert("你选择的是"+$(this).attr(‘data-tt-id‘));
});

})
  </script>

源码连接如下：

http://download.csdn.net/detail/s592652578/8520831

treeTable的简单用法

标签：jquery   插件   treetable   

原文地址：http://blog.csdn.net/s592652578/article/details/44517157