ajaxTree 用Javascript 写的树形导航控件 jsTreeView
2008-05-22 20:53
519 查看
----------------------目前仅支持IE ----------------
IE 7 下试过，其余的尚未测试，和服务器端的联合也未测试。
----------------------ajaxTree.htm---------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<div>
<form id="form2" runat="server">
<script language="javascript" type="text/javascript" >
function directoryInfo(dirId,dirName,parentId,orderId,level){
this.dirId=dirId;
this.dirName=dirName ;
this.parentId=parentId ;
this.orderId=orderId ;
this.level=level-1;
this.state=0;
this.isShow=true ;
}
Array.prototype.remove=function(dx)
{
if(dx <0 || dx >=this.length )
return ;
for(var i=dx ;i<this.length-1;i++)
{
this[i]=this[i+1];
}
this.length-=1
}
//javascript 类
function ajaxTreeView(tableContainer,dirId,sortOrder){
this.dirArr=new Array();
this.depth=0;
this.tableId=tableContainer ;
this.rootId=dirId ;
this.sortOrder=sortOrder ;
this.result=new Array ();
this.ok=false ;
var cTh=this ;
this.addDirectory=function(dirInfo){
if(dirInfo.level>cTh.depth )
cTh.depth =dirInfo.level;
if(dirInfo.dirId==cTh.rootId){
cTh.result.push(dirInfo);
}
cTh.dirArr.push(dirInfo );
}
this.rootDir=function(){
var rt=cTh.dirArr[0];
for(var i=0;i<cTh.dirArr.length ;i ++){
if(cTh.dirArr[i].dirId==cTh.rootId ){
rt=cTh.dirArr[i];
break ;
}
}
return rt ;
}
//排序
this.sortCallback=function(x,y){
if(cTh.sortOrder =="desc")
{
if(x.orderId<y.orderId)
return 1;
else
return 0;
} else {
if(x.orderId>y.orderId)
return 1;
else
return 0;
}
}
this.getSubs=function(dirInfo){
var subs=new Array ();
var px=new Array ();
var len=cTh.dirArr.length ;
for(var i=0;i<len ;i ++){
if(cTh.dirArr[i].parentId==dirInfo.dirId){
subs.push(cTh.dirArr[i]);
px.push(i);
}
}
if(subs.length >=2){
subs.sort(cTh.sortCallback );
}
for(var j=px.length -1;j>=0;j--){
cTh.dirArr.remove(px[j]);
}
return subs ;
}
this.createSubTree=function(dirNode){
var subs=cTh.getSubs(dirNode );
dirNode.subs=subs.length;
for(var i=0;i<subs.length;i++){
cTh.result.push(subs[i]);
cTh.createSubTree(subs[i]);
}
}
this.render=function(){
if(cTh.ok ==false ){
var dirRoot=cTh.rootDir();
cTh.createSubTree(dirRoot );
cTh.ok=true ;
}
var len=cTh.result.length ;
var theTable=document.getElementById(cTh.tableId);
while(theTable.rows.length>=1)
theTable.deleteRow(theTable.rows.length-1);
var theBody=document.createElement("tbody");
for(var i=0;i<len ;i ++){
var dir=cTh.result[i];
var tr=document.createElement("tr");
if(dir.isShow==false )
continue ;
for(var j=0;j<dir.level;j ++){
var tj=document.createElement("td");
tj.setAttribute("width","10px");
tr.appendChild(tj);
}
var td=document.createElement("td");
td.setAttribute("colspan",cTh.depth -dir.level);
if(dir.subs>0){
var btn=document.createElement("button");
btn.setAttribute("id","btn_"+dir.dirId);
btn.setAttribute("value","-");
if(window.event){
btn.setAttribute("onclick",cTh.expand);
} else {
btn.addEventListener("click",cTh.expand,false );
}
btn.setAttribute("dirId",dir.dirId);
td.appendChild(btn);
}
td.setAttribute("width","100px");
td.appendChild(document.createTextNode(dir.dirName));
td.appendChild(document.createTextNode(dir.isShow));
tr.setAttribute("onclick",cTh.expand);
tr.setAttribute("dirId",dir.dirId);
tr.appendChild(td);
theBody.appendChild(tr);
}
theTable.appendChild(theBody );
}
this.getSubTree=function(dirid){
}
this.expand=function(evt){
var dirId;
if(window.event){
dirId=window.event.srcElement["dirId"];
} else {
dirId =evt.target["dirId"];
}
var dir=false ;
var ip;
for(var i=0;i<cTh.result.length ;i++){
if(cTh.result[i].dirId==dirId )
{
dir=cTh.result[i];
ip =i ;
break ;
}
}
if(!dir )
return ;
dir.state=dir.state ==0 ? 1:0;
var st=dir.state==0 ? true :false ;
if(st ==false ){
for(var j=ip+1 ;j<cTh.result.length ;j++){
if(cTh.result[j].level<=dir.level)
break;
cTh.result[j].isShow=st ;
}
} else {
for(var j=ip+1 ;j<cTh.result.length ;j++){
if(cTh.result[j].parentId==dir.dirId)
cTh.result[j].isShow=st ;
}
}
cTh.render ();
}
}
</script>
<div>
<table id="loginView"></table>
</div>
</form>
<script type="text/javascript" language="javascript">
window.onload =function(){
//根目录ID
var d1=new directoryInfo(1,"司法考试",0,1,1);
var d10=new directoryInfo(2,"刑法",1,1,2);
var d201=new directoryInfo(21,"x1",2,1,3);
var d202=new directoryInfo(22,"x2",2,2,3);
var c01=new directoryInfo(220,"xc1",22,1,4);
var c02=new directoryInfo(221,"xc2",22,2,4);
var c03=new directoryInfo(222,"xc3",22,3,4);
var d203=new directoryInfo(23,"x3",2,3,3);
var d11=new directoryInfo(3,"民法",1,2,2);
var d301=new directoryInfo(31,"m1",3,1,3);
var d302=new directoryInfo(32,"m2",3,2,3);
var d303=new directoryInfo(33,"m3",3,3,3);
var d12=new directoryInfo(4,"商法",1,3,2);
var d401=new directoryInfo(41,"s1",4,1,3);
var d402=new directoryInfo(42,"s2",4,2,3);
var d403=new directoryInfo(43,"s3",4,3,3);
var dv=new ajaxTreeView("loginView",1,"asc");
dv.addDirectory(d1);
dv.addDirectory(d10);
dv.addDirectory(d201);
dv.addDirectory(c02);
dv.addDirectory(c03);
dv.addDirectory(d11);
dv.addDirectory(d301 );
dv.addDirectory(d302 );
dv.addDirectory(d303 );
dv.addDirectory(d12);
dv.addDirectory(d202);
dv.addDirectory(d203);
dv.addDirectory(c01);
dv.addDirectory(d401);
dv.addDirectory(d402);
dv.addDirectory(d403);
dv.render();
}
</script>
</div>
</body>
</html>
IE 7 下试过，其余的尚未测试，和服务器端的联合也未测试。
----------------------ajaxTree.htm---------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<div>
<form id="form2" runat="server">
<script language="javascript" type="text/javascript" >
function directoryInfo(dirId,dirName,parentId,orderId,level){
this.dirId=dirId;
this.dirName=dirName ;
this.parentId=parentId ;
this.orderId=orderId ;
this.level=level-1;
this.state=0;
this.isShow=true ;
}
Array.prototype.remove=function(dx)
{
if(dx <0 || dx >=this.length )
return ;
for(var i=dx ;i<this.length-1;i++)
{
this[i]=this[i+1];
}
this.length-=1
}
//javascript 类
function ajaxTreeView(tableContainer,dirId,sortOrder){
this.dirArr=new Array();
this.depth=0;
this.tableId=tableContainer ;
this.rootId=dirId ;
this.sortOrder=sortOrder ;
this.result=new Array ();
this.ok=false ;
var cTh=this ;
this.addDirectory=function(dirInfo){
if(dirInfo.level>cTh.depth )
cTh.depth =dirInfo.level;
if(dirInfo.dirId==cTh.rootId){
cTh.result.push(dirInfo);
}
cTh.dirArr.push(dirInfo );
}
this.rootDir=function(){
var rt=cTh.dirArr[0];
for(var i=0;i<cTh.dirArr.length ;i ++){
if(cTh.dirArr[i].dirId==cTh.rootId ){
rt=cTh.dirArr[i];
break ;
}
}
return rt ;
}
//排序
this.sortCallback=function(x,y){
if(cTh.sortOrder =="desc")
{
if(x.orderId<y.orderId)
return 1;
else
return 0;
} else {
if(x.orderId>y.orderId)
return 1;
else
return 0;
}
}
this.getSubs=function(dirInfo){
var subs=new Array ();
var px=new Array ();
var len=cTh.dirArr.length ;
for(var i=0;i<len ;i ++){
if(cTh.dirArr[i].parentId==dirInfo.dirId){
subs.push(cTh.dirArr[i]);
px.push(i);
}
}
if(subs.length >=2){
subs.sort(cTh.sortCallback );
}
for(var j=px.length -1;j>=0;j--){
cTh.dirArr.remove(px[j]);
}
return subs ;
}
this.createSubTree=function(dirNode){
var subs=cTh.getSubs(dirNode );
dirNode.subs=subs.length;
for(var i=0;i<subs.length;i++){
cTh.result.push(subs[i]);
cTh.createSubTree(subs[i]);
}
}
this.render=function(){
if(cTh.ok ==false ){
var dirRoot=cTh.rootDir();
cTh.createSubTree(dirRoot );
cTh.ok=true ;
}
var len=cTh.result.length ;
var theTable=document.getElementById(cTh.tableId);
while(theTable.rows.length>=1)
theTable.deleteRow(theTable.rows.length-1);
var theBody=document.createElement("tbody");
for(var i=0;i<len ;i ++){
var dir=cTh.result[i];
var tr=document.createElement("tr");
if(dir.isShow==false )
continue ;
for(var j=0;j<dir.level;j ++){
var tj=document.createElement("td");
tj.setAttribute("width","10px");
tr.appendChild(tj);
}
var td=document.createElement("td");
td.setAttribute("colspan",cTh.depth -dir.level);
if(dir.subs>0){
var btn=document.createElement("button");
btn.setAttribute("id","btn_"+dir.dirId);
btn.setAttribute("value","-");
if(window.event){
btn.setAttribute("onclick",cTh.expand);
} else {
btn.addEventListener("click",cTh.expand,false );
}
btn.setAttribute("dirId",dir.dirId);
td.appendChild(btn);
}
td.setAttribute("width","100px");
td.appendChild(document.createTextNode(dir.dirName));
td.appendChild(document.createTextNode(dir.isShow));
tr.setAttribute("onclick",cTh.expand);
tr.setAttribute("dirId",dir.dirId);
tr.appendChild(td);
theBody.appendChild(tr);
}
theTable.appendChild(theBody );
}
this.getSubTree=function(dirid){
}
this.expand=function(evt){
var dirId;
if(window.event){
dirId=window.event.srcElement["dirId"];
} else {
dirId =evt.target["dirId"];
}
var dir=false ;
var ip;
for(var i=0;i<cTh.result.length ;i++){
if(cTh.result[i].dirId==dirId )
{
dir=cTh.result[i];
ip =i ;
break ;
}
}
if(!dir )
return ;
dir.state=dir.state ==0 ? 1:0;
var st=dir.state==0 ? true :false ;
if(st ==false ){
for(var j=ip+1 ;j<cTh.result.length ;j++){
if(cTh.result[j].level<=dir.level)
break;
cTh.result[j].isShow=st ;
}
} else {
for(var j=ip+1 ;j<cTh.result.length ;j++){
if(cTh.result[j].parentId==dir.dirId)
cTh.result[j].isShow=st ;
}
}
cTh.render ();
}
}
</script>
<div>
<table id="loginView"></table>
</div>
</form>
<script type="text/javascript" language="javascript">
window.onload =function(){
//根目录ID
var d1=new directoryInfo(1,"司法考试",0,1,1);
var d10=new directoryInfo(2,"刑法",1,1,2);
var d201=new directoryInfo(21,"x1",2,1,3);
var d202=new directoryInfo(22,"x2",2,2,3);
var c01=new directoryInfo(220,"xc1",22,1,4);
var c02=new directoryInfo(221,"xc2",22,2,4);
var c03=new directoryInfo(222,"xc3",22,3,4);
var d203=new directoryInfo(23,"x3",2,3,3);
var d11=new directoryInfo(3,"民法",1,2,2);
var d301=new directoryInfo(31,"m1",3,1,3);
var d302=new directoryInfo(32,"m2",3,2,3);
var d303=new directoryInfo(33,"m3",3,3,3);
var d12=new directoryInfo(4,"商法",1,3,2);
var d401=new directoryInfo(41,"s1",4,1,3);
var d402=new directoryInfo(42,"s2",4,2,3);
var d403=new directoryInfo(43,"s3",4,3,3);
var dv=new ajaxTreeView("loginView",1,"asc");
dv.addDirectory(d1);
dv.addDirectory(d10);
dv.addDirectory(d201);
dv.addDirectory(c02);
dv.addDirectory(c03);
dv.addDirectory(d11);
dv.addDirectory(d301 );
dv.addDirectory(d302 );
dv.addDirectory(d303 );
dv.addDirectory(d12);
dv.addDirectory(d202);
dv.addDirectory(d203);
dv.addDirectory(c01);
dv.addDirectory(d401);
dv.addDirectory(d402);
dv.addDirectory(d403);
dv.render();
}
</script>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ajaxTree 用Javascript 写的树形导航控件 jsTreeView
- SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题
- SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题
- SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题
- SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题
- TreeView控件结合js树形选择
- JavaScript, AJAX树形控件大全(all kinds of TreeView Controls by JavaScript, AJAX)
- JavaScript, AJAX树形控件大全(all kinds of TreeView Controls by JavaScript, AJAX)
- TreeView控件结合js树形选择 .
- SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题
- JavaScript 几种JS日历控件
- 树形导航的JS代码(别人网站上的)
- JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件
- 树形控件(MS TreeView 6.0 ActiveX Control)在网页中的应用
- JS树形控件--dtree
- 从外部的js文件中获取ASPX页面的控件ClientID(get control reference from external javascript)
- QML中树形控件TreeView的最基本、最简单粗暴的、一看秒懂的实现方法，之一
- js 动态树形控件 xtree
- SharePoint 2013 树形导航菜单，读取指定文档库下的文件夹（非JS部分）
- 将XML文件绑定到TreeView，建立树形导航