ajaxTree 用Javascript 写的树形导航控件 jsTreeView-控件新闻-慧都网

ajaxTree 用Javascript 写的树形导航控件 jsTreeView

翻译|其它|编辑：郝浩|2008-05-23 10:10:13.000|阅读 1453 次

概述：

<!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 下试过，其余的尚未测试，和服务器端的联合也未测试。
标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客

上一篇：动态添加WEB控件,点控件获取动态添加的控件下一篇：一个XAP中有多个Silverlight控件时如何选择调用