当前位置: 首页 > article >正文

jquery插件treeTable

treeTable v 1.4.2

简介

treeTable是跨浏览器、性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单。

优点

  1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
  2. 接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以
  3. 组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等
  4. 提供两种风格: 通过参数来设置风格
效果图
接口

配置参数

  • theme: string {主题,有两个选项:default、vsStyle. 默认:default}
  • expandLevel: int {树表的展开层次. 默认:1}
  • column: int {可控制列的序号. 默认:0,即第一列}
  • onSelect: function {拥有controller自定义属性的元素的点击事件,return false则中止展开. 默认值:
    function($treeTable, id) {       //$treeTable 当前树表的jquery对象.       //id 当前行的id            //返回false,则直接退出,不会激发后面的beforeExpand和子节点的展开       return true; }
  • beforeExpand: {展开子节点前触发的事件, 默认值:
    function($treeTable, id) {       //$treeTable 当前树表的jquery对象.       //id 当前行的id }

属性说明

  • id: string 行的id
  • pId: string 父行的id
  • controller: bool 指定某一个元素是否可以控制行的展开
  • hasChild: bool 指定某一个tr元素是否有孩子(动态加载需用到)
  • isFirstOne: bool 指定某一个tr元素是否是第一个孩子(自动生成属性,只读)
  • isLastOne: bool 指定某一个tr元素是否是最后一个孩子(自动生成属性,只读)
  • prevId: string 前一个兄弟节点的id(自动生成属性,只读)
  • depth: string 当前行的深度(自动生成属性,只读)
使用方式

$("#元素id").treeTable({}) 如:

引用的文件

<script src="/script/jquery.js" type="text/javascript"> </script> 
<script src="/script/treeTable/jquery.treeTable.js" type="text/javascript"> </script>js代码
复制代码
<script type="text/javascript">
        $( function(){
             var option = {
                theme:'vsStyle',
                expandLevel : 2,
                beforeExpand :  function($treeTable, id) {
                     // 判断id是否已经有了孩子节点,如果有了就不再加载,这样就可以起到缓存的作用
                     if ($('.' + id, $treeTable).length) {  return; }
                     // 这里的html可以是ajax请求
                     var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
                             + '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';

                    $treeTable.addChilds(html);
                },
                onSelect :  function($treeTable, id) {
                    window.console && console.log('onSelect:' + id);
                    
                }

            };
            $('#treeTable1').treeTable(option);
        });
    </script> 
复制代码
html结构
复制代码
< table  id ="treeTable1"  style ="width: 100%" >
                 < tr >
                     < td  style ="width: 200px;" >
                        标题 </ td >
                     < td >
                        内容 </ td >
                 </ tr >
                 < tr  id ="1" >
                     < td >
                         < span  controller ="true" >1 </ span ></ td >
                     < td >
                        内容 </ td >
                 </ tr >
                 < tr  id ="2"  pid ="1" >
                     < td >
                         < span  controller ="true" >2 </ span ></ td >
                     < td >
                        内容 </ td >
                 </ tr >
                 < tr  id ="3"  pid ="2" >
                     < td >
                        3 </ td >
                     < td >
                        内容 </ td >
                 </ tr >
                 < tr  id ="4"  pid ="2" >
                     < td >
                        4 </ td >
                     < td >
                        内容 </ td >
                 </ tr >
                 < tr  id ="5"  pid ="4" >
                     < td >
                        4.1 </ td >
                     < td >
                        内容 </ td >
                 </ tr >
                 < tr  id ="6"  pid ="1"  haschild ="true" >
                     < td >
                        5 </ td >
                     < td >
                        注意这个节点是动态加载的 </ td >
                 </ tr >
                 < tr  id ="7" >
                     < td >
                        8 </ td >
                     < td >
                        内容 </ td >
                 </ tr >
             </ table >
复制代码
关于

作者: benzhan(詹潮江)

版本变更

1.0版本:创建基本功能。(2011-05-04)

1.1版本:(2011-05-08)

这个版本提高了性能,做了以下改进:   * 1、使用了Css Sprite Tools 合并了分散的图标 
* 2、使用了.id的方式来代替原来[pId=id],这样选择孩子效率更高 
* 3、把css剥离出来,增加动态添加css,每次家在前判断是否添加过   
关于第二点,非常感谢onli同学的提醒。但我并没有直接修改我的接口,直接除去pId,而是在第一次遍历时将pId作为class名添加到节点中。这样有两个好处: (1)接口可读性会比较好,pId比class更容易理解。 (2)第二点,如果直接使用class,那节点本来就有样式,这样获取到的className还要去分解空格得到pId,挺麻烦的。

1.3版本:(2011-05-09)

这个版本扩展了事件,做了以下改进:   
* 1、增加onSelect事件,onSelect: function($treeTable, id){} 
* 2、增加beforeExpand事件,beforeExpand : function($treeTable, id){}   动态加载节点就靠beforeExpand 事件了。

1.4.2版本:(2011-09-03)

这个版本修复了bug,做了以下改进: 
* 1、修复了多个tableTree不在同个页面的bug,并且可以让不同的tableTree使用不同的主题。
* 2、增加了controller的自定义标签来控制可点击的区域。


http://www.lryc.cn/news/2416807.html

相关文章:

  • 在Node.js版本v12.16.2中,`crypto`模块提供了加密功能的实现接口
  • 免费获取天气预报代码
  • 叉乘证明贝祖定理_谈方琳定理
  • oracle中exist什么意思,oracle中not exists 是什么意思 , oracle数据库中exists的作用
  • Nagios 安装教程
  • HS6621低功耗调试(HS6621CG)
  • QQ如何设置使用代理服务器?
  • 提权进阶篇
  • [从零学习汇编语言] - 计算机中的硬件与软件
  • 【爬虫】批量下载B站收藏夹视频 - Python
  • 动态IP?静态IP?看完本文你就懂了
  • 系统提示uxtheme.dll文件缺少出现错误问题
  • xvid编解码器安装
  • Solidity随笔
  • Ant 命令详解
  • C语言入门代码库,模拟显示数字时钟
  • 要解决蓝牙连接故障,不可忽略蓝牙驱动程序
  • VTK中坐标转换
  • redis三大集群使用看这篇就差不多了 | 主从哨兵Cluster
  • jsp中的request.getContextPath()
  • 【技术网站分享】全面整理了一波技术网站,分享给大家!
  • linux版drastic模拟器设置,DraStic nds模拟器下载安装及使用图文教程
  • oracle 错误 20001,LANG=c 引发的 ORA-20001 问题
  • 51CTO下载中心 移动开发的资料库
  • Filter2------原理
  • C#编写一个简易通讯录
  • ActiveX开发详解
  • 硬盘写入缓存
  • 证券交易系统设计与开发
  • java 正则 规则_Java基础-正则表达式(Regular Expression)语法规则简介