BeQ通用树形控件Ver1.0Beta

原创 2004年10月16日 15:47:00

/*
*☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*★                                 ★
*☆          BeQ 通用树形控件 Ver 1.0 Beta          ☆
*★                                 ★
*☆ 版权所有: BeQ (BQ)                        ☆
*★                                 ★
*☆ 程序制作: BeQ (BQ)                        ☆
*★   MSN:  bq_x@msn.com                     ★
*☆   email:bq@bqprog.com                      ☆
*★                                 ★
*☆   QQ: 16486280                        ☆
*★                                 ★
*☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/

function addTreeNode(index , nodeText , nodeIcon , selIcon , nodeData , nodeAction)
{
 var st_pNode = this.tree;
 index = parseInt(index);

 if(index>this.nodes.length)index = this.nodes.length;
 
 var cindex = 0;
 for(i=0;(i<this.nodes.length)&&(i<index);i++)
 {
  if(this.nodes[i]=="[tree node]")
  {
   cindex++;
  }
  else if(this.nodes[i]=="[tree branch]")
  {
   cindex+=2;
  }
 }

 var tr = st_pNode.insertRow(cindex);
 var td;
 td = tr.insertCell(0);
 td.innerHTML="<img src=/""+nodeIcon+"/" border=0>";
 td.vAlign="middle";
 td.noWrap = true;
 td.height=22;
 td.width=22;
 td = tr.insertCell(1);
 td.height=22;
 td.vAlign="middle";
 td.noWrap = true;
 td.innerHTML = "<table border=0 cellpadding=0 cellspacing=0><tr><td><img src=/"" + nodeIcon + "/" border=0></td><td nowrap>&nbsp;<label alt='' title='' hidefocus='true' treeType='node' style='cursor:default;'>"+nodeText+"</label></td></tr></table>";
 var iconImg = td.firstChild.rows[0].cells[0].firstChild;
 var textSP = td.firstChild.rows[0].cells[1].firstChild.nextSibling;

 textSP.ondragstart = new Function("this.node.ondargstart();");
 textSP.onmousemove = new Function("window.status='';");

 td.firstChild.rows[0].cells[1].onmouseover = new Function("this.className='"+this.tdMouseOver+"';");
 td.firstChild.rows[0].cells[1].onmouseout = new Function("this.className='"+this.tdMouseOut+"';");
 td.firstChild.rows[0].cells[1].className = this.tdMouseOut;

 textSP.onmouseover = new Function("this.className='"+this.spanMouseOver+"';");
 textSP.onmouseout = new Function("this.className='"+this.spanMouseOut+"';");
 textSP.className = this.spanMouseOut;
 var tn = new treeNode(tr);
 tn.icon = nodeIcon;
 tn.selIcon = selIcon;
 tn.data = nodeData;
 tn.nodeAction = nodeAction;
 tn.parent = this;
 td.firstChild.rows[0].cells[1].node = tn;
 textSP.node = tn;
 tn.text = nodeText;
 tn.textSP = textSP;
 tn.iconImg = iconImg;
 td.firstChild.rows[0].cells[1].onclick = new Function("this.node.onSelected();");
// this.nodes.splice(index , 0 , tn );
 var tmpNodes = new Array;
 for(i=0;i<index;i++)
 {
  tmpNodes[i]=this.nodes[i];
 }
 tmpNodes[tmpNodes.length]=tn;
 for(i=index;i<this.nodes.length;i++)
 {
  tmpNodes[i+1]=this.nodes[i];
 }
 this.nodes=tmpNodes;

 if(this.opened)
 {
  this.TreeRow.style.display="";
 }


 if(index!=0)
 {
  var preSibling = this.nodes[index-1];
  if(preSibling.toString()=="[tree branch]")
  {
   if(preSibling.opened)
   {
    preSibling.img.src="../images/minus.gif"
   }
   else
   {
    preSibling.img.src="../images/plus.gif"
   }
   preSibling.TreeRow.cells[0].style.backgroundImage="url(../images/barI.gif)";
  }
  else
  {
   preSibling.img.src="../images/barH.gif";
  }
 }

 if(index==this.nodes.length-1)
 {
  tn.img.src="../images/barL.gif";
 }
 else
 {
  tn.img.src="../images/barH.gif";
 }

 return tn;
}

function delTreeNode(index)
{
 var tr,tr2;
 index = parseInt(index);
 tr2 = null;
 if ( this.nodes[index].toString() != "[tree node]" )
 {
  tr = this.nodes[index].subTree;
  tr2 = tr.nextSibling;
  this.tree.deleteRow(tr2.rowIndex);
 }
 else
 {
  tr = this.nodes[index].tree;
 }
 this.tree.deleteRow(tr.rowIndex);

 var tmpNodes = new Array;
 for(i=0;i<parseInt(index);i++)
 {
 tmpNodes[i] = this.nodes[i];
 }
 for(i=parseInt(index)+1;i<this.nodes.length;i++)
 {
  tmpNodes[i-1] = this.nodes[i];
 }
 this.nodes=tmpNodes;
 
 if(this.length()==0)
 {
  this.TreeRow.style.display="none";
 }

 if((index==this.nodes.length)&&(index!=0))
 {
  var pre = this.nodes[index-1];
  if(pre.toString()=="[tree branch]")
  {
   if(pre.opened)
   {
    pre.img.src="../images/minusL.gif";
   }
   else
   {
    pre.img.src="../images/plusL.gif";
   }
   pre.TreeRow.cells[0].style.backgroundImage="";
  }
  else
  {
   pre.img.src="../images/barL.gif";
  }
 }
}

function treeGetLength()
{
 return this.nodes.length;
}

function treeToString()
{
 return "[tree]";
}

function treeAddBranch(index , branch)
{
 index = parseInt(index);

 if(index>this.nodes.length)index = this.nodes.length;
 var cindex = 0;
 for(i=0;(i<this.nodes.length)&&(i<index);i++)
 {
  if(this.nodes[i]=="[tree node]")
  {
   cindex++;
  }
  else if(this.nodes[i]=="[tree branch]")
  {
   cindex+=2;
  }
 }
 var tr = this.tree.insertRow(cindex);

 branch.parent = this;
 if ( typeof(branch.tdMouseOver) == "undefined")branch.tdMouseOver = this.tdMouseOver;
 if ( typeof(branch.tdMouseOut) == "undefined")branch.tdMouseOut = this.tdMouseOut;
 if ( typeof(branch.spanMouseOver) == "undefined")branch.spanMouseOver = this.spanMouseOver;
 if ( typeof(branch.spanMouseOut) == "undefined")branch.spanMouseOut = this.spanMouseOut;

 var td;
 td = tr.insertCell(0);
 td.height=22;
 td.width=22;
 if(index==this.length())
 {
 td.innerHTML="<img src=/"../images/plusL.gif/" border=0 onclick=/"this.branch.ExpandOrClose();/">";
 }
 else
 {
 td.innerHTML="<img src=/"../images/plus.gif/" border=0>";
 }
 branch.img = td.firstChild;
 branch.img.branch = branch;
 td.vAlign="middle";
 td.noWrap = true;
 
 td = tr.insertCell(1);
 td.height=22;
 td.vAlign="middle";
 td.noWrap = true;
 td.innerHTML = "<table border=0 cellpadding=0 cellspacing=0><tr><td><img src=/"" + branch.openImg + "/" border=0 onclick=/"this.branch.ExpandOrClose();/"></td><td nowrap>&nbsp;<label treeType='branch' style='cursor:default;'>"+branch.text+"</label>&nbsp;</td></tr></table>";
 branch.icon = td.firstChild.rows[0].cells[0].firstChild;
 branch.icon.branch = branch;
 branch.textSP = td.firstChild.rows[0].cells[1].firstChild.nextSibling;

 branch.subTree = tr;

 tr = this.tree.insertRow(cindex+1);
 tr.style.display="none";
 td = tr.insertCell(0);
 td.width=22;
 td.innerHTML="";
 if(index!=this.nodes.length)
 {
 td.style.backgroundImage="url(../images/barI.gif)";
 }
 td.noWrap = true;
 td = tr.insertCell(1);
 td.innerHTML="<table cellspacing=0 cellpadding=0 border='0'></table>";
 td.noWrap = true;

 branch.tree = td.firstChild;
 branch.TreeRow = tr;

 td.onmouseover = new Function("this.className='"+branch.tdMouseOver+"';");
 td.onmouseout = new Function("this.className='"+branch.tdMouseOut+"';");
 td.className = branch.tdMouseOut;
 
 branch.tree.branch = branch;
 branch.subTree.branch = branch;
 branch.textSP.branch = branch;
 branch.textSP.onclick = new Function("this.branch.TextSPClicked();");
 branch.textSP.ondblclick = new Function("this.branch.ExpandOrClose();this.branch.TextSPClicked();");
 branch.textSP.onmouseover = new Function("this.className='"+branch.spanMouseOver+"';");
 branch.textSP.onmouseout = new Function("this.className='"+branch.spanMouseOut+"';");
 branch.textSP.className = branch.spanMouseOut;

 var tmpNodes = new Array;
 for(i=0;i<index;i++)
 {
  tmpNodes[i]=this.nodes[i];
 }
 tmpNodes[tmpNodes.length]=branch;
 for(i=index;i<this.nodes.length;i++)
 {
  tmpNodes[i+1]=this.nodes[i];
 }
 this.nodes=tmpNodes;

 branch.close();

 if(index!=0)
 {
  var preSibling = this.nodes[index-1];
  if(preSibling.toString()=="[tree branch]")
  {
   if(preSibling.opened)
   {
    preSibling.img.src="../images/minus.gif"
   }
   else
   {
    preSibling.img.src="../images/plus.gif"
   }
   preSibling.TreeRow.cells[0].style.backgroundImage="url(../images/barI.gif)";
  }
  else
  {
   preSibling.img.src="../images/barH.gif";
  }
 }

 if(this.opened)
 {
  this.TreeRow.style.display="";
 }

 return branch;
}

function tree(parentNode)
{
 this.nodes = new Array();
 this.addNode = addTreeNode;
 this.addBranch = treeAddBranch;
 this.delNode = delTreeNode;
 this.length = treeGetLength;
 this.toString = treeToString;

 this.tdMouseOver = "treetdMouseOver";
 this.tdMouseOut = "treetdMouseOut";
 this.spanMouseOver = "treespanMouseOver";
 this.spanMouseOut = "treespanMouseOut";

 this.tree = "";
 if(MM_findObj(parentNode)!=null){
  this.tree = MM_findObj(parentNode);
 }
}

function treeNodeText(text)
{
 this.text = text;
 this.textSP.innerHTML = text;
 if(this.NodeClass)
 {
  this.setClass(this.NodeClass);
 }
}

function treeNodeAction(text)
{
 this.nodeAction = text;
}

function treeNodeToString()
{
return "[tree node]";
}

function treeNodeSelected()
{
 var p = null;
 p = this.parent;
 while((p.parent!=null)&&(typeof(p.parent)!="undefined"))
 {
  p = p.parent;
 }

 treeUnselect(p);

 this.textSP.parentNode.style.border="1px dotted #808080";

 this.selected = true;

 this.iconImg.src = this.selIcon;

 if(this.nodeAction!=null)
 {
  eval(this.nodeAction);
 }
}

function treeNodeSetClass(cnspan)
{
 this.tree.cells[1].onmouseover = null;//new Function("this.className='"+cnspan+"MouseOver';");
 this.tree.cells[1].onmouseout = null;//new Function("this.className='"+cnspan+"MouseOut';");
 this.tree.cells[1].className = '';//cnspan+"MouseOut";

 this.NodeClass = cnspan;

// this.tree.cells[1].firstChild.onmouseover = new Function("this.className='"+cnspan+"MouseOver';");
// this.tree.cells[1].firstChild.onmouseout = new Function("this.className='"+cnspan+"MouseOut';");
// this.tree.cells[1].firstChild.className = cnspan+"MouseOut";

 if(this.textSP)
 {
  this.textSP.onmouseover = new Function("this.className='"+cnspan+"MouseOver';");
  this.textSP.onmouseout = new Function("this.className='"+cnspan+"MouseOut';");
  this.textSP.className = cnspan+"MouseOut";
 }
}

function treeNodeSetIcon(icon , selIcon)
{
 this.icon = icon;
 this.selIcon = selIcon;
 if(this.selected == true)
 {
  this.icon.src = this.selIcon;
 }
 else
 {
  this.icon.src = this.icon;
 }
}

function onTreeNodeDragStart()
{
 eval(this.ondragstartAction);
}

function treeNodeOnUnselect()
{
 this.textSP.parentNode.style.border="";
 this.selected = false;
}

function treeNode(tr)
{
 this.tree = tr;
 this.img = tr.cells[0].firstChild;
 this.text = "";
 this.data = "";
 this.selIcon = "";
 this.icon = "";
 this.nodeAction = "";
 this.selected = false;
 this.setText = treeNodeText;
 this.setAction = treeNodeAction;
 this.setIcon = treeNodeSetIcon;
 this.onSelected = treeNodeSelected;
 this.toString = treeNodeToString;
 this.setClass = treeNodeSetClass;
 this.ondargstart = onTreeNodeDragStart;
 this.onUnselect = treeNodeOnUnselect;
}

function treeBranchToString()
{
 return "[tree branch]";
}

function treeNodeGetIndex()
{
 var index = 0;
 var p = this.parent;
 var i;
 for(i=0;i<p.length();i++)
 {
  if(p.nodes[i]==this)
  {
   index = i;
   break;
  }
 }
 return index;
}

function treeBranchExpand()
{
 var index = this.getIndex();
 this.tree.style.display='';
 this.TreeRow.style.display='';

 if(index==this.parent.length()-1)
 {
 this.img.src = "../images/minusL.gif";
 }
 else
 {
 this.img.src = "../images/minus.gif";
 }
 this.icon.src = this.openImg;
 this.opened=true;
}

function treeBranchClose()
{
 this.tree.style.display='none';
 this.TreeRow.style.display='none';

 var index = this.getIndex();

 if(index==this.parent.length()-1)
 {
 this.img.src = "../images/plusL.gif";
 }
 else
 {
 this.img.src = "../images/plus.gif";
 }
 this.icon.src = this.closeImg;
 this.opened=false;
}

function treeBranchExpandOrClose()
{
 if(this.opened==false)
 {
 this.expand();
 }
 else
 {
 this.close();
 }
 if(this.onExpandOrClose!=null)
 {
 eval(this.onExpandOrClose);
 }
}

function treeUnselect(p)
{
 if( (typeof(p.textSP)!="undefined") && (p.textSP!=null) )
 {
  p.onUnselect();
 }
 if( (typeof(p.nodes)!="undefined") && (p.nodes!=null) )
 {
  var i=0;
  for(i=0;i<p.nodes.length;i++)
  {
   treeUnselect(p.nodes[i]);
  }
 }
}

function treeBranchTextSPClicked()
{
 var p = null;
 p = this.parent;
 while((p.parent!=null)&&(typeof(p.parent)!="undefined"))
 {
  p = p.parent;
 }

 treeUnselect(p);

 this.textSP.parentNode.style.border="1px dotted #808080";

 this.selected = true;

 if(this.onTextSPClick!=null)
 {
  eval(this.onTextSPClick);
 }
}

function treeBranchSetClass(cnspan)
{
 this.subTree.cells[1].onmouseover = null;
 this.subTree.cells[1].onmouseout = null;
 this.subTree.cells[1].className = "";

 this.textSP.onmouseover = new Function("this.className='"+cnspan+"MouseOver';");
 this.textSP.onmouseout = new Function("this.className='"+cnspan+"MouseOut';");
 this.textSP.className = cnspan+"MouseOut";
}

function treeBranchSetText(text)
{
 this.text = text;
 this.textSP.innerHTML = text;
}

function treeBranchSetIcon(openImg , closeImg)
{
 this.openImg = openImg;
 this.closeImg = closeImg;
 if(this.opened == true)
 {
  this.icon.src = this.openImg;
 }
 else
 {
  this.icon.src = this.closeImg;
 }
}

function treeBranchClear()
{
 while(this.nodes.length>0)
 {
  this.delNode(0);
 }
}

function treeBranchOnUnselect()
{
 if( ( typeof(this.textSP)!="undefined" ) && ( this.textSP!=null ) )
 {
  if((typeof(this.textSP.parentNode)!="undefined")&&(this.textSP.parentNode!=null))
  {
   this.textSP.parentNode.style.border="";
   this.selected = false;
  }
 }
}

function treeBranch(text,openImg,closeImg,data,onExpandOrClose,onTextSPClick)
{
 this.text = text;
 this.data = data;
 this.openImg = openImg;
 this.closeImg = closeImg;


 this.opened = false;

 this.nodes = new Array();
 this.addNode = addTreeNode;
 this.addBranch = treeAddBranch;
 this.delNode = delTreeNode;
 this.length = treeGetLength;
 this.toString = treeBranchToString;
 this.expand = treeBranchExpand;
 this.close = treeBranchClose;
 this.ExpandOrClose = treeBranchExpandOrClose;
 this.TextSPClicked = treeBranchTextSPClicked;
 this.onExpandOrClose = onExpandOrClose;
 this.onTextSPClick = onTextSPClick;
 this.setClass = treeBranchSetClass;
 this.setText = treeBranchSetText;
 this.setIcon = treeBranchSetIcon;
 this.clear = treeBranchClear;
 this.getIndex = treeNodeGetIndex;
 this.onUnselect = treeBranchOnUnselect;

 this.tree = "";
 this.subTree = "";
 this.img = "";
 this.textSP = "";
}





调用代码及演示地址:
http://www.bqprog.com/HDOA/Main/Login.aspx
登录名称: admin
登录密码: admin

左栏菜单栏为演示

调用说明正在撰写中

MFC 树形控件与列表控件

初始化区域代码: // TODO: 在此添加额外的初始化代码 srand(time(NULL)); // 添加位图资源,必须要全局变量才行 m_treeImageListRoot.Cr...
  • fulianzhou
  • fulianzhou
  • 2015年10月07日 21:44
  • 2142

java的树形控件(1)

很多应用程序都使用树形分层结构来显示数据视图,用户可以展开或者收缩试图中国单个子树。 JTree的构造函数如下: 1)JTree()          建立一个系统默认的树 2)JTree(Hasht...
  • wintersense
  • wintersense
  • 2014年12月18日 21:01
  • 1282

C#0003--如何使用树状视图控件

C#0003--如何使用树状视图控件
  • u012025054
  • u012025054
  • 2014年05月27日 10:35
  • 1294

Android 打造任意层级树形控件 考验你的数据结构和设计

Android 打造任意层级树形控件 考验你的数据结构和设计
  • u013651026
  • u013651026
  • 2017年08月04日 08:44
  • 402

VS2013/MFC编程入门之三十(常用控件:树形控件Tree Control 下)

前面一节讲了树形控件Tree Control的简介、通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建、CTreeCtrl类的主要成员函数和应用实例。        树形控件的创建 ...
  • zhaoyinhui0802
  • zhaoyinhui0802
  • 2016年12月03日 15:56
  • 2029

基于vue.js 2.0,不使用webpack的nodejs服务,只在浏览器上单独使用在Element UI的Tree树形控件

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还...
  • l741210724
  • l741210724
  • 2017年04月13日 19:17
  • 10855

优秀的树形(tree)控件推荐,都是在网上看到的,大家参考一下

优秀的树形(tree)控件推荐,都是在网上看到的,大家参考一下 ---------------------------------------原文地址------------------...
  • liweiwei0725
  • liweiwei0725
  • 2014年03月10日 13:20
  • 7361

VS2013/MFC编程入门之二十九(常用控件:树形控件Tree Control 上)

树形控件Tree Control是一种特殊的列表,本节我们开始对树形列表做一下基本介绍,下一节通过实例来进行讲解树形列表的使用。        树形控件简介        树形控件在Win...
  • zhaoyinhui0802
  • zhaoyinhui0802
  • 2016年12月03日 15:01
  • 822

MFC树形控件(CTreeCtrl)用法(下)

前面一节讲了树形控件Tree Control的简介、通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建、CTreeCtrl类的主要成员函数和应用实例。        树形控件的...
  • wang15061955806
  • wang15061955806
  • 2016年07月04日 13:51
  • 2328

JS组件系列——Bootstrap 树行控件使用经验分享

前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项。不管怎么样,树控件都是很多项目里面不可或缺的组件之一。今天,...
  • u011370143
  • u011370143
  • 2016年10月08日 15:12
  • 1401
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:BeQ通用树形控件Ver1.0Beta
举报原因:
原因补充:

(最多只允许输入30个字)