一个棵自己写的jQuery的树。与大家分享一下。
主要用于动态加载子节点，避免大数据量加载页面慢的情况。
展示效果：
下面贴上源码：
css部分：
#TreeView
{
width:100%;
font-size:12px;
float:left;
}
.nodes /*节点*/
{
width:100%;
min-height:22px;
float:left;
}
.parentNodes /*父节点*/
{
width:100%;
height:22px;
float:left;
}
.childNodes /*子节点*/
{
float:left;
width:100%;
}
.plus /*展开和收缩图片样式*/
{
float:left;
cursor:pointer;
width:16px;
height:22px;
}
/* line 竖向虚线图片
end 子节点最后拐角图片
null 空白图片
join 子节点相连图片
lineh 横向虚线图片
load 数据加载时等待图片
*/
.line,.end ,.null ,.join , .load
{
float:left;
width:16px;
height:22px;
}
.checkbox
{
float:left;
}
.text
{
float:left;
height:22px;
line-height:22px;
}
js部分：
//将TreeView封装成插件的方式
(function($){
$.fn.extend({
TreeView:function(obj){
if($.type(obj)==="object"){
if(obj["Default"]!=undefined){
var objDiv=$("<div></div>");
$.each(obj["Default"],function(k,v){
var nodes=$("<div></div>").addClass("nodes");
var parentNodes=$("<div></div>").addClass("parentNodes");
var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
var topplus=$("<img src=\"image/topplus.gif\"/>").addClass("plus").css({"width":"9px","height":"9px","margin":"5px 4px 8px 0"});;
var checkbox=$("<input type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
var a=$("<span class=\"text\"><a href=\""+v["url"]+"\">"+v["name"]+"</a></span>").addClass("text");
parentNodes.append(topplus.attr("id",v["ajaxData"])).append(checkbox).append(a);
nodes.append(parentNodes).append(childNodes);
objDiv.append(nodes);
});
$(this).append(objDiv.html());
}else{
return false;
}
//对TreeView里面所以的收缩的图标进行监听
$(this).delegate(".plus","click",function(){
var childNodes=$(this).parent().next(),thisObj=$(this);
if(childNodes.css("display")!="none"){
TreeFn.childHide(thisObj);
}else{
if(childNodes.html()==""){
TreeFn.GetData(thisObj,obj);
}else{
TreeFn.childShow(thisObj);
}
}
//同时对checkbox也进行监听
}).delegate(".checkbox","click",function(){
var checkbox=$(this),childNodes=$(this).parent().next();
if(checkbox.attr("checked")){
childNodes.find(".checkbox").attr("checked",true);
}else{
childNodes.find(".checkbox").attr("checked",false);
}
})
}else{
alert("111");
}
return this;
}
});
})(jQuery);
//这里定义一个对象，把我们用的到的方法封装以来
var TreeFn={
//将ajax动态加载好的子节点展开出来
childShow:function(thisObj){
var childNodes=thisObj.parent().next();
childNodes.show();
if(thisObj.attr("src").indexOf("top")>=0){
thisObj.attr("src","image/topminus.gif");
}else if(thisObj.attr("src").indexOf("end")>=0){
thisObj.attr("src","image/endminus.gif");
}else{
thisObj.attr("src","image/centerminus.gif");
}
},
//将子节点收缩
childHide:function(thisObj){
var childNodes=thisObj.parent().next();
childNodes.hide();
if(thisObj.attr("src").indexOf("top")>=0){
thisObj.attr("src","image/topplus.gif");
}else if(thisObj.attr("src").indexOf("end")>=0){
thisObj.attr("src","image/endplus.gif");
}else{
thisObj.attr("src","image/centerplus.gif");
}
},
//利用父节点元素的个数，构造子节点元素的个数
lineImage:function(thisobj){
var objDiv=$("<div></div>");
var p=thisobj.parent().children();
p.each(function(index){
if(index<p.size()-3){
var line=$("<img src=\"image/line.gif\"/>").addClass("line");
var nul=$("<img src=\"image/null.gif\"/>").addClass("null");
if($(this).attr("class")=="line"||$(this).attr("class")=="join"||$(this).attr("src").indexOf("center")>=0){
objDiv.append(line);
}else{
objDiv.append(nul);
}
}
});
return objDiv;
},
//解析ajax过来的json数据，将其构造成子节点
AnalyJSON:function(json,thisObj,obj){
var objDiv=$("<div></div>");
$.each(json,function(key,value){
var nodes=$("<div></div>").addClass("nodes");
var parentNodes=$("<div></div>").addClass("parentNodes");
var childNodes=$("<div></div>").addClass("childNodes").css("display","none");
var line=$("<img src=\"image/line.gif\"/>").addClass("line");
var topplus=$("<img src=\"image/topplus.gif.gif\" />").addClass("plus");
var centerplus=$("<img src=\"image/centerplus.gif\" />").addClass("plus").attr("id",value["id"]);
var endplus=$("<img src=\"image/endplus.gif\"/>").addClass("plus").attr("id",value["id"]);
var join=$("<img src=\"image/join.gif\"/>").addClass("join");
var lineh=$("<img src=\"image/lineh.gif\"/>").addClass("end");
var end=$("<img src=\"image/end.gif\"/>").addClass("end");
var checkbox=$("<input type=\"checkbox\"/>").addClass("checkbox").css("display",obj["checkbox"]);
var a=$("<span class=\"text\"><a href=\""+value["url"]+"\">"+value["name"]+"</a></span>").addClass("text");
var commone=TreeFn.lineImage(thisObj);
if(value["hasChild"]=="1"){
if(value["last"]==undefined||value["last"]!="1")
{
parentNodes.append(commone.html()).append(join).append(centerplus);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}else{
parentNodes.append(commone.html()).append(end).append(endplus);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}
nodes.append(parentNodes);
nodes.append(childNodes);
objDiv.append(nodes);
}else{
if(value["last"]==undefined||value["last"]!="1"){
parentNodes.append(commone.html()).append(join).append(lineh);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}else{
parentNodes.append(commone.html()).append(end).append(lineh);
if(thisObj.next().attr("checked")){
parentNodes.append(checkbox.attr("checked",true)).append(a);
}else{
parentNodes.append(checkbox).append(a);
}
}
nodes.append(parentNodes);
nodes.append(childNodes);
objDiv.append(nodes);
}
});
return objDiv;
},
//点击父节点展开，进获取下面的子节点数据
GetData:function(thisObj,obj){
$.ajax({
type:"GET",
cache:false,
async:false,
url:obj["ajaxUrl"],
dataType:"text",
data:{Key:thisObj.attr("id")},
beforeSend:function(){
thisObj.parent().append("<img src=\"image/Loading.gif\" class=\"load\"/>");
},
success:function(json){
thisObj.parent().next().html("").append(TreeFn.AnalyJSON($.parseJSON(json),thisObj,obj).html());
TreeFn.childShow(thisObj);
},
complete:function(){
thisObj.parent().children().remove(".load");
}
});
}
};
前端调用js：
$(function(){
$("#TreeView1").TreeView({
checkbox:"block", //是否显示checkbox
ajaxUrl:"Tree.aspx", //ajax动态获取相应父节点下面的子节点元素的地址（可以 换成需要获取数据的url地址）
Default:[{ //TreeView首次加载时默认顶级节点名称
name:"测试跟节点1", //名称
url:"http://www.cnblogs.com/Suven/", //节点上的url
ajaxData:"1" //获取下面子元素的唯一标识
},{
name:"测试跟节点2",
url:"http://www.baidu.com/",
ajaxData:"0"
}]
});
});
下面再给出服务器端返回的json数据格式：
{
"Test1":
{
"name":"测试子节点栏目1", //节点名称
"url":"http://test1", //节点url
"id":"1", //节点id，也用于获取下一子节点数据的id
"hasChild":"0", //是否存在子节点
"last":"1" //是否是子节点中最后一个元素，如果不是，也可不写
},
"Test2":
{"name":"测试子节点栏目2","url":"http://test2","id":"2","hasChild":"1"},
"Test3":
{"name":"测试子节点栏目3","url":"http://test3","id":"3","hasChild":"1","last":"1"}
}
好了，到此代码贴完。希望有需要的朋友拿去改造。有什么问题，请批评指正。
浙公网安备 33010602011771号