[原创][ActiveX]TreeView完全实例

当很多都在追求各式各样的目录Tree的时候，我却搬出那个我觉得是功能和性能都最好的TreeView，但就是不够美！


<object id=TreeView1 width=50% height=50%
   classid="clsid:C74190B6-8589-11D1-B16A-00C0F0283628"
>
</object>

<script language = "javascript">
function Init(){
with(TreeView1){
 LineStyle=1;
 DragMode=0;
 BorderStyle=0;
 ToolTipText="[ActiveX Control]TreeView 完全演示";
 var node=null;
 node = Nodes.Add(null,0,"R","Root");
 //node.
 Nodes.Add("R",4,"P1","Item1");
 Nodes.Add("R",4,"P2","Item2");
 Nodes.Add("R",4,"P3","Item0");
 Nodes.Add("P1", 4,"C1","Child 2");
 Nodes.Add("P1", 4,"C2","Child 1");
 Nodes.Add("C1", 4,"C3","Child 3");
 Nodes.Add("C2", 4,"C4","10");
 Nodes.Add("C2", 4,"C5","01");
 Nodes.Add("C2", 4,"C6","03");
 Nodes.Add("C2", 4,"C7","02");
 }
}
Init();

function Sort(flag){
 for (var i=1;i<=TreeView1.Nodes.Count;i++){
  TreeView1.Nodes(i).Sorted=flag;
 
 }
}

function DeleteNode(){
 var iIndex;
 iIndex=TreeView1.SelectedItem.Index;
 TreeView1.Nodes.Remove(iIndex);
}

function DeleteTree(){
 TreeView1.Nodes.Clear();
}

function CheckNode(Node){
 var iIndex=0;
 with(TreeView1){
  if (Node.Children>0){
   iIndex=Node.Child.Index;
  
   while (iIndex!=(Node.Child.LastSibling.Index)){
    Nodes(iIndex).Checked=Node.Checked;
    if (Nodes(iIndex).Children>0){
     CheckNode(Nodes(iIndex));
    }
    iIndex=Nodes(iIndex).Next.Index;
   }
   iIndex=Node.Child.LastSibling.Index;
   Nodes(iIndex).Checked=Node.Checked;
   if (Nodes(iIndex).Children>0){
    CheckNode(Nodes(iIndex));
   }
  }
 }
}

function AddNode(level,key,text){
//level:
// 0:第一条
// 1:最后条
// 2:下一条
// 3:上一条
// 4:子节点 
 var vKey;
 vKey=TreeView1.SelectedItem.Key;
 TreeView1.Nodes.Add(vKey,level,key,text); 
}

function AddRootNode(key,text)
{
 TreeView1.Nodes.Add(null,0,key,text);
}

</script>

<script for="TreeView1"  language = "javascript" event="NodeClick(Node)">
var str=""
str+="Index:"+Node.Index+"\n";
str+="Key:"+Node.Key+"\n";
str+="Text:"+Node.Text+"\n";
myValue.value=str; 
</script>

<script for="TreeView1"  language = "javascript" event="DragDrop(Control,X,Y)">
//首先应该判断是不是Node型的，可是javascript类型不好判断
alert(".");
</script>

<script for="TreeView1"  language = "javascript" event="DblClick">
if (SelectedItem.Children<1){
 with(SelectedItem){
  var str=""
  str+="Index:"+Index+"\n";
  str+="Key:"+Key+"\n";
  str+="Text:"+Text+"\n";
 }
 alert(str);
} 
</script>

<script for="TreeView1"  language = "javascript" event="NodeCheck(Node)">
 CheckNode(Node); 
</script>

<br>
<textarea rows="5" name="myValue" cols = '16'></textarea>
<button onclick="Sort(true)">排序</button>
<button onclick="DeleteNode()">删除当前节点</button>
<button onclick="DeleteTree();this.disabled=true;">删除整个树</button>
<button onclick="AddRootNode('R1','Root1');this.disabled=true;">添加根节点</button>
<button onclick="AddNode(4,'D1','Demo1');this.disabled=true;">添加子节点</button>
<button onclick="AddNode(3,'D2','Demo2');this.disabled=true;">添加同级节点，上面</button>
<button onclick="AddNode(2,'D3','Demo3');this.disabled=true;">添加同级节点，下面</button>
<input type=checkbox onclick="TreeView1.CheckBoxes=!TreeView1.CheckBoxes;">复选框

<p>
主要功能演示:<br>
 1.添加
 2.删除
 3.排序
 4.单击，双击事件
 5.复选框属性及事件的应用
</p>

 

本文地址：http://com.8s8s.com/it/it31347.htm