treeTable v 1.4.2

treeTable v 1.4.2treeTablev1.4.2简介treeTable是跨浏览器、性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单。优点兼容主流浏览器:支持IE6和IE6+,Firefox,chrome,Opera,Safari接口简洁:在普通表格的基础上增加父子关系的自定义标签就可以组件性能高:内部实现了只绑

大家好,又见面了,我是你们的朋友全栈君。

treeTable v 1.4.2

简介

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

优点

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

配置参数

  • 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的自定义标签来控制可点击的区域。

点击这里下载    引自:
星火幽蓝

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132264.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • centos7 安装mysql详细流程

    centos7 安装mysql详细流程工作中经常需要安装mysql,每次安装的时候,总是用不同的方法安装,有错误就解决一下,今天又重新装了一次mysql,记录下过程,以后就安装这种方式安装了!1、查看系统版本[root@test107vm14rpm-gpg]#lsb_release-aLSBVersion::core-4.1-amd64:core-4.1-noarch:cxx-4.1-amd64:cxx-4….

  • QT——开发入门简介

    QT——开发入门简介1、你了解Qt吗?Qt是一种基于C++的跨平台图形用户界面应用程序开发框架。如何跨平台?上到服务器上位机,下到嵌入式GUI,上天入地无所不能。Qt最早是由1991年由QtCompany开发,但是到2008年,QtCompany科技被诺基亚公司收购,是的,就是拥有着我们很多情怀的诺基亚。但在2012年,Qt又被Digia收购。等到了2014年,跨平台集成开发环境QtCreator3.1….

  • Java安全之Weblogic 2016-3510 分析

    Java安全之Weblogic2016-3510分析首发安全客:Java安全之Weblogic2016-3510分析0x00前言续前面两篇文章的T3漏洞分析文章,继续来分析CVE-20

    2021年12月12日
  • ddos工具linux,DDoS常用工具大全[通俗易懂]

    ddos工具linux,DDoS常用工具大全[通俗易懂]网络攻防是发生在第五空间的对抗和战争。这是一个动态的过程,无论攻击者还是防御者都在实战中寻求进步。攻防双方的“兵器”就在这个战场中不断磨砺和进化。绿盟科技关注攻防的最新进展,为了帮助客户更好的对抗网络威胁,每个季度会推出最新的“DDoS兵器谱”,介绍DDoS工具的最新发展和变化。1.简介本期“DDoS兵器谱”将要介绍的这三款工具的最新进展,他们是XOIC、Zarp和Slowhttptest。其中…

  • 第二天

    第二天

  • 三分钟学会用Python+OpenCV批量裁剪xml格式标注的图片

    三分钟学会用Python+OpenCV批量裁剪xml格式标注的图片文章目录前言xml文件格式代码思想完整代码效果展示总结前言在目标检测中,数据集常常使用labelimg标注,会生成xml文件。本文旨在根据xml标注文件来裁剪目标,以达到去除背景信息的目的。xml文件格式以下是一个标注好的图片生成的xml文件。具体含义见代码注释。<annotation><!–xml所属文件夹–> <folder>JPEGImages</folder>

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号