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;
 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");
 }
TreeView1.CheckBoxes = true
}
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 checkNodeStatus(Node){
 CheckNode(Node)
 checkParentNode(Node)
}
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 checkParentNode(Node){
 with(TreeView1){
  var checkParent = Node.checked
  var currNode = Node
  while(checkParent&&currNode.Next!=null){
   currNode = currNode.Next
   if(!currNode.checked){
    checkParent = false
    break
   }
  }
  while(checkParent&&currNode.Previous!=null){
   currNode = currNode.Previous
   if(!currNode.checked){
    checkParent = false
    break
   }
  }
  if(Node.parent!=null){
   Nodes(Node.parent.Index).checked = checkParent
   checkParentNode(Nodes(Node.parent.Index))
  }
 }
}

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)">
 checkNodeStatus(Node)
</script>

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

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