一个棵自己写的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"
,
//名称
ajaxData:
"1"
//获取下面子元素的唯一标识
},{
name:
"测试跟节点2"
,
ajaxData:
"0"
}]
});
});
|
下面再给出服务器端返回的json数据格式：
{
"Test1"
:
{
"name"
:
"测试子节点栏目1"
,
//节点名称
"id"
:
"1"
,
//节点id，也用于获取下一子节点数据的id
"hasChild"
:
"0"
,
//是否存在子节点
"last"
:
"1"
//是否是子节点中最后一个元素，如果不是，也可不写
},
"Test2"
:
"Test3"
:
}
|
好了，到此代码贴完。希望有需要的朋友拿去改造。有什么问题，请批评指正。
扫一扫
1992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
