0

0

jquery 树形结构实现代码详解

伊谢尔伦

伊谢尔伦

发布时间:2017-06-17 10:45:04

|

3064人浏览过

|

来源于php中文网

原创

 由于工作需要,要求实现在table中的某一列有树的结构和效果,不得已使用jquery,第一次用,寸步难行  一段程序憋三天,终于凑合着实现了

 

 功能要求如下:

点击+号,下面的子节点展开,只展开当前节点的下一级节点,二级及以下节点仍隐藏

点击-号,下面的所有子节点隐藏

点击 1 2 3 4 会相应的展开到第一级节点,展开到第三级,展开到第四级。

我的思路是:使用最原始的拼接html ,获取数据源以后,给tr赋值自定义属性,例如当前行数据的code 、parentcode,是否是叶子节点的标识,当前数据行的level 等等 我能用到的属性 ,至于加减号以及文字的缩进我是用jquery实现的。第二个td里面加入两个span,第一个控制缩进字符,第二个控制+-号,因为页面的要求是点击+-时才折叠、展开,而不是点击td展开折叠。

 贴一段程序,帮助我理解jquery

function setIndentText() {            
$("#tableData tr:gt(0)").
each(function() {//橘色部分是查找id为
tableData
的DataTable里面除第一行以外的行
                var ifEndNode = $(this).attr("IfEndNode"); //获取行的属性值。是否是根节点 False True
                var costLevel = $(this).attr("CostLevel"); //当然节点的级别
                var tdSubject = $(this).find("td:eq(1)");//在这一行里面定位行的第一个td
                var indentSpace = "  ";
                var tdText = tdSubject.text();//获取这个td的text,里面即使有span nobr 获取的也是文字,不是html 
                for (var i = 0; i < costLevel; i++) {
                    indentSpace += indentSpace;
                }
                if (ifEndNode == "False") {
                    tdSubject.children().html("" + indentSpace + "[-]" + tdText);
                }
            })
        }




项目成本

如果是这样一个td,获取到td的对象,

tdSubject.children()就是 >

 tdSubject.children().html() 就是两个span的html

  tdSubject.text();就是项目成本这几个字

tdSubject.parent()  是获取tr

1、 js给tr 添加一些属性,自定义属性不知道行不行??

jquery 的:$("#test").attr("test","aaa"// 设置   

$("#test").removeAttr("test"// 删除 

js 的:var testEle = document.getElementById("test")   

testEle.setAttribute("test","aaa"); // 设置   

testEle.attributes["test"].nodeValue; // 获得 

2.jquery 的选择器 $("#btnConfirm")

事件绑定函数:bind();

隐藏显示函数:show() 、hide();

修改元素内部html :html("hello world");

3  遍历   id 为tableData 的table里面所有td

简单库存管理系统
简单库存管理系统

本系统是一个基于工厂模式的三层架构项目,基于VS2005 开发,结构简洁,配合动软Codematic代码生成器,可以使开发效率事半功倍,倍感轻松。本系统主要功能 1,物品类别管理 实现了物品类别的添加、修改、删除功能,方便库存物品分类管理。 2,物品管理 实现物品添加、修改,管理员可实时对物品做出库、入库记录,也可查看详细历史出入库记录。 3,商家管理 实现商家添加、修改、删除功能,方便公司和客户

下载
$("#tableData").find("tr").each(function() {
                $(this).find("td").each(function() {
                    alert($(this).text());
                });
            });

4、 undefined 类型

var name;   

alert(typeof name);//输出为undefined   

alert(typeof myname);//输出为undefined   

alert(name=="undefined");//输出为false   

alert(name==undefined);//输出为true  

undefined是一种类型,不是字符串

javascript 中有五种原始值:Undefined,Null,Boolean,Number,String,

5、元素显示、隐藏

 $(this).show();     $(this).hide();   $(this).toggle();自动切换隐藏显示

显示:toggle(true);

隐藏:toggle(false);

 $(this).slideDown("slow");缓慢滑动的效果显示

$(this).slideUp("slow")缓慢滑动的效果隐藏

 $(this).slideToggle();缓慢滑动的显示或隐藏 

6、增加css

如果是css,$(this).css("background", "#f9edf1");
如果是class,  $(this).addClass("classname");

7 append 与appendto用法的区别

$("#button1").click(function(){$("
").appendTo("#p1");}); $("#button1").click(function(){$("#p1").append("
");});

$(html字符串).appendTo(某个控件);$(某个控件).append(html字符串);

8、调试同事的一个bug,发现Append这个方法的真正用法

append() 方法在被选元素的结尾(仍然在内部)插入指定内容

关键就在这个“仍然在内部”,比如tr.append ,就是在这个结束标记里面附加字符串,不是在外面

9、今天使用了after函数,跟append()相对应的 ,在某个元素后面附加相应的东东;$("#tblId").find("tr[id]:last") 查找table中凡是有id属性的最后一个tr元素

10、$("#tableId").find(tr[id]:last)  遍历table下面的tr 不仅遍历table中tr,也遍历table里面嵌套的table的tr,也就是说遍历table里面所有的tr标签,不分层级关系

11、Query.each(obj,callback) //这个函数用了很多次了,没有真正理解其中的意思,现在了解了 

相关专题

更多
微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

2

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

74

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

133

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

54

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

19

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

106

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

44

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

11

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.4万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.6万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号