搬家第五天-121.Wincc V7.3 TreeView控件初步使用11-为控件加上图标

前面的博客记录了位ListView加上图标的方法，本文介绍如何给TreeView加上图标，使外观看起来漂亮一点，图标是网上随意选取的，和控件内节点的内容没有关系，这里重点是脚本介绍。

      假设画面上有一个TreeView控件，用于显示sql表中的数据，在装入数据的时候就添加图标。画面上添加一个microsoft image list control，放4个图标进去，做成这样子：

 

放一个按钮，用于装入数据，按钮的鼠标点击事件中添加以下vbs脚本：

Sub OnClick(ByVal Item)                                                                       
Dim TV,IL,NodeIndex,Count,DateCount,DateText(),TimeText()
Dim Children1Count
Dim DBName,ssql,rs,ssql1,rs1
Dim RsCount,RsCount1
Dim NodeTxt
Dim i,j,k
Set TV=ScreenItems("TV")
Set IL=ScreenItems("IL")
TV.Nodes.Clear '先清空
TV.Style=7 '5.直线、+/-和文本、图片;
TV.LineStyle =1
TV.ImageList=IL.ObjectName
Set DBName=HMIRuntime.Tags("@DatasourceNameRT")
Set rs=Createobject("ADODB.RecordSet")
ssql="select Curdate from UA#UA Group by CurDate"
'获取记录集
getSqlData rs,DBName.Read ,ssql
RsCount=rs.RecordCount
'添加第一级节点，按照日期
Set NodeIndex=TV.Nodes.Add(,,"Class0","用户归档数据",1,1)
For i=1 To RsCount
  Set NodeIndex=TV.Nodes.Add("Class0",4,"Class" & CStr(i),Rs.Fields(0).value,2,2)
  NodeIndex.Sorted=True
  Rs.moveNext
Next
'获取所有的日期字符串，存入DateText数组
DateCount=0
count=TV.nodes.count
'统计日期型节点的数量
For i=1 To count
   If IsDate(TV.nodes.item(i).text) Then
    DateCount=DateCount+1
   End If
Next
'定义数组
Redim DateText(DateCount)
j=0
'把日期数据放到数组中
For i=1 To count
   If IsDate(TV.nodes.item(i).text) Then
    j=j+1
    DateText(j)=TV.nodes.item(i).text 
   End If
Next
'添加第二级节点，按照时间
For i=1 To DateCount
    ssql="select top 50 CurTime from UA#UA Where CurDate='" & CStr(DateText(i)) & "'"
    getSqlData rs,DBName.Read ,ssql
   RsCount=rs.RecordCount   
    Redim TimeText(RsCount)
    For j=1 To RsCount
      Set NodeIndex=TV.Nodes.Add("Class" & CStr(i),4,"Class" & CStr(i) & CStr(j),"时间:" & Rs.Fields(0).value,3,3)
      TimeText(j)=Rs.Fields(0).value
      NodeIndex.Sorted=False
      '插入第三级数据：流量1、流量2、流量3
      ssql1="select FT101,FT102,FT103 from UA#UA Where CurDate='" & DateText(i) & "' and CurTime='" & TimeText(j) & "'"
      getSqlData Rs1,DBName.Read ,ssql1      
      Set NodeIndex=TV.Nodes.Add("Class" & CStr(i) & CStr(j),4,"Class_" & CStr(i) & CStr(j) & "1","流量1:" & Rs1.Fields(0).value,4,4)
      NodeIndex.Sorted=False
      Set NodeIndex=TV.Nodes.Add("Class" & CStr(i) & CStr(j),4,"Class_" & CStr(i) & CStr(j) & "2","流量2:" & Rs1.Fields(1).value,4,4)
      NodeIndex.Sorted=False
      Set NodeIndex=TV.Nodes.Add("Class" & CStr(i) & CStr(j),4,"Class_" & CStr(i) & CStr(j) & "3","流量3:" & Rs1.Fields(2).value,4,4)
      NodeIndex.Sorted=False
      Rs.moveNext
   Next   
Next
For i=1 To TV.nodes.count
   If TV.nodes.item(i).Children>0 Then
     TV.Nodes(i).Expanded=True
   End If
Next
TV.Nodes(1).Selected= True  
TV.Nodes(1).EnsureVisible
TV.OLEDragMode=1
TV.OLEDropMode =1

End Sub

 

脚本中先指定TreeView控件关联的imagelist控件名称，TreeView控件的style必须是带图片的放个，.node.add方法最后两个参数就是表示收缩/展开状态节点图标在imagelist控件中的序号（从1开始）和选中状态下节点图标在imagelist控件中的序号。保存运行后是这个效果：