var oriData = [
{myId:0,myParent:null,myTitle:'text0'},
{myId:1,myParent:0,myTitle:'text1'},
{myId:2,myParent:0,myTitle:'text2'},
{myId:3,myParent:1,myTitle:'text3'},
{myId:4,myParent:1,myTitle:'text4'},
{myId:5,myParent:3,myTitle:'text5'},
{myId:6,myParent:3,myTitle:'text6'},
{myId:7,myParent:4,myTitle:'text7'}
];
var scpt = document.createElement("script");
scpt.onload = scpt.onreadystatechange = function() {
if(this.readyState && this.readyState.toLowerCase() != "loaded") {
return;
}
jQuery.noConflict();
(function($) {
function organizeTree(data,idKey,parentKey) {
var tmp = {};
$(data).each(function() {
tmp[this[idKey]]=this;
});
var root;
$(data).each(function () {
if(this.__parentNode = tmp[this[parentKey]]) {
(this.__parentNode.__childNodes||(this.__parentNode.__childNodes=[])).push(this);
} else {
root = this;
}
});
return root;
}
function createTree(data,offset,titleKey,prepend1,prepend2,prepend3) {
offset = offset||20;
titleKey = titleKey || 'title';
var tmp = $("<div>");
var children = data.__childNodes||[];
var text = (data[titleKey]||"").valueOf();
var titleLayer = $("<div>").appendTo(tmp).html(children.length?prepend1+text:prepend3+text)
.css("cursor","pointer").attr("isTitle","true").css("line-height","20px");
var subLayer = $("<div>").css("margin-left",offset+"px").appendTo(tmp);
$(children).each(function() {
createTree(this,offset,titleKey,prepend1,prepend2,prepend3).appendTo(subLayer);
});
if(children.length) {
titleLayer.toggle(function() {
titleLayer.html(prepend2+text);
subLayer.hide("fast");
},function() {
titleLayer.html(prepend1+text);
subLayer.show("fast");
});
};
return tmp;
}
$(function() {
var root = organizeTree(oriData,'myId','myParent');
createTree(root,20,
'myTitle',"<img src='http://www.destroydrop.com/javascripts/tree/example/img/folderopen.gif'/>",
"<img src='http://www.destroydrop.com/javascripts/tree/example/img/folder.gif'/>","<img src='http://www.destroydrop.com/javascripts/tree/example/img/page.gif'/>"
).appendTo(document.body);
});
})(jQuery);
}
scpt.src="http://code.jquery.com/jquery-1.5.min.js";
document.body.appendChild(scpt);
我贴个能立竿见影看到效果的,大家打开浏览器控制台,把上面代码贴进去执行即可(什么?没有控制台?IE8 F12,chrome ctrl+shift+j,如果还没有,那就算了)
如果chrome提示恶意网站,可能是因为图床的网站有问题,但是引用的图肯定没问题的。
分享到:
相关推荐
jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库jquery ui库
jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件
快速上手Jquery树形菜单 jquery树形菜单例子 树形菜单 jquery jquery插件
jquery超漂亮树形控件
jquery树形插件jquery树形插件jquery树形插件jquery树形插件jquery树形插件jquery树形插件 非常美观,功能强大,代码简单易读
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
非常简单的JQuery树,支持关系数据源装载
Jquery实现超酷的树形排列评论列表时间轴 Jquery实现超酷的树形排列评论列表时间轴 Jquery实现超酷的树形排列评论列表时间轴
不错的jquery树形下拉菜单,在此跟大家分享一下。希望提出宝贵意见……
asp.net-jquery树 asp.net-jquery树 asp.net-jquery树
优秀的Jquery树形菜单,请大家使用。
jquery树十分不错的菜单结构图,容易修改使用
菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树...
jquery 初步实现树形菜单的代码修改版本,增加了文字点击函数,处理里线性图片不能正常显示的问题
一个非常好用的jquery树。 一个非常好用的jquery树。
jquery树形结构,包括图表样式,简单构建。
jQuery 表格树形结构插件演示与下载,jQuery 表格插件,jQuery 树形结构插件。treeTableTreeTable 是一款小型的 jQuery 插件,可以让...
jQuery树结构菜单选择器代码
jquery树形滑动导航,亲测可用,DirectoryTree插件