原文发表在:http://www.birchlee.com/post/2011/10/25/31.aspx
最近在使用一些js,jQuery树形控件,大多数都是基于json格式,都是按照要求的数据格式才能出固定的树形。扩展性差,还要研究他们的API。
树形控件有三点我觉得很重要:
1. 直觉是美观(简洁大方很重要)
2. 方便使用
3.易于扩展
项目中要求有复选框,这个很多树形控件实现了,节点后边是否能追加按钮,如增删查等等。大部分不行。
看到柴哥的Html2Tree:http://www.cnblogs.com/chaige/archive/2011/10/20/Html2Tree.html
设计思路如下:
Html2Tree采用的是以下方式构建树形:
全局根元素:<dl></dl> 【dl(definition list):定义了树列表】
节点元素:<dt></dt> 【dt(definition title):定义了节点标题】
子节点:<dd></dd>【dd(definition description):定义了节点的内容描述】
一个简单的树形:
<dl>
<dt>根元素</dt>
<dd>
<dl>
<dt>子元素一</dt>
<dt>子元素二</dt>
<dl>子元素三</dt>
</dl>
</dd>
</dl>
样式如下:
.Html2Tree h3{树标题}
.Html2Tree dl, .Html2Tree dd, .Html2Tree dt,.Html2Tree dt a{所有超链接样式}
.Html2Tree dd{子节点}
.Html2Tree dl{节点列表样式}
.Html2Tree dl.last{}
.Html2Tree dt{节点样式}
.Html2Tree dt.open {节点展开样式}
.Html2Tree dt span{节点文本样式}
.Html2Tree dt span,.Html2Tree dt a{节点超链接样式}
.Html2Tree dl dt.focus a{节点获得焦点样式}
.Html2Tree dt.open span{展开节点文本样式}
.Html2Tree dt.file span{background:url(Html2Tree_black.gif) no-repeat 1px -98px}
.Html2Tree dt a:hover{text-decoration:underline;color:#DF2520}
.Html2Tree dt.file, .Html2Tree dt.error{background:url(Html2Tree_black.gif) no-repeat 3px -250px}
.Html2Tree_a3 dl {background:none}
.Html2Tree_a3 dl dt,
.Html2Tree_a3 dl dt.open ,
.Html2Tree_a3 dl dt span,
.Html2Tree_a3 dl dt.open span,
.Html2Tree_a3 dl dt.file span{background-image:url(Html2Tree_a3.gif)}
.Html2Tree_a3 dl dt.file{background: none}
在mvc3项目中按照上述结构绑定数据列表,然后配合下面的Js,出现相应的效果。
由于要添加额外的一些事件,索性把javascript改成了Jquery版本的,效果如下:
<script type="text/javascript">
$(document).ready(function () {
var tree = $("#tree");
var theme = "black";
var dllist = tree.find("dl");
for (var i = 0; i < dllist.length; i++) {
var dl = $(dllist[i]);
var dt = dl.children("dt:first");
var dd = dl.children("dd");
//当前节点样式
if (dd.length == 0) {
dt.attr('class', "file");
}
else {
(function () {
//节点的点击事件
dt.click(function () {
var cdt = $(this);
var cdd = cdt.next();
//节点样式
var open = cdd.css("display") == undefined || cdd.css("display") == "none";
var dt_class = open ? 'open' : '';
cdt.attr("class", dt_class);
//子节点列表样式
var dd_display = open ? 'block' : 'none';
var dd_class = open ? 'open' : '';
cdd.css("display", dd_display);
cdd.attr("class", dd_class);
});
//复选框的事件
dt.children("input:first").click(function (e) {
alert("点击复选框");
e.stopPropagation(); //阻止执行节点事件
});
})(jQuery);
}
}
});
</script>
分享到:
相关推荐
计算机算法入门,概述,快速走进编程世界.Doc文档,可用演讲
毕业设计MATLAB
**We重邮** 是由蓝山工作室(重庆邮电大学-学生技术组织/团队)出品的一个**微信小程序**,是有别于订阅号/服务号的一种全新的连接用户与服务的方式,可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 > > **We重邮** 是**碎片式信息一体化校园移动门户**,适用于学生和教师,集课表、成绩、考试、空教室、学生、一卡通、借阅、学费、电费、报修、公告等各功能于一身。 > > **We重邮** 有更好用的**课表查询**,本周视图、学期视图、对应日期及时钟轴,清晰明了。 > > **We重邮** 有更方便的**考试安排**,帮你折算出考试周对应的日期,以及考试时间倒计时,一目了然。 > > **We重邮** 有更强大的**学生查询**,**搜人利器**,通过模糊查询姓名、学号、班级就可以搜索到学生的学院、专业、课表等基本信息,适合于查同学课表以及寻找失主。 > > **We重邮** 也是老师的**点名神器**,通过课表即可查询教学班学生名单,再也不用
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
python数据分析与可视化
细说PyTorch深度学习:理论、算法、模型与编程实现 书籍源码
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
JSP基于WEB网上论坛设计与实现(源代码+论文+开题报告+答辩PPT+外文翻译)
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
9026网上所有的资料合集一键下载
毕业设计matlab
毕业设计MATLAB
libaacs0-debuginfo报错补丁 rpm -i xx.rpm 注意架构是否一致
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
IMG_20240527_215005.jpg
edison是一款是虚拟的电路仿真软件,它通过3D模拟电路效果,使初学者学习电子技术更加的容易。实验过程中图声光并茂。具有非常强的真实感,作出的电路实验效果与实验室所做实验的效果一样,是电子技校与其它电子相关专业必备的教学软件。可以大大提高学生的学习兴趣和学习成绩。
Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码Python进销存管理系统源码
遗传算法 基于C++实现的遗传算法适合小白学习 基于C++实现的遗传算法适合小白学习 基于C++实现的遗传算法适合小白学习 基于C++实现的遗传算法适合小白学习 基于C++实现的遗传算法适合小白学习 基于C++实现的遗传算法适合小白学习
附件是Visual Studio2022使用教程.md,文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。