当很多都在追求各式各样的目录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>

|