[ActiveX]Web中使用ListView 完全示例

<P><BR><BR>&nbsp;</P>
<STYLE>
<!--
body     { font-size: 10px }
table    { font-size: 12px }
-->
</STYLE>

<SCRIPT language=javascript>
function InitList(theList, theTable, iEnd, iId, checkIt)
{
var colWidth = (document.body.clientWidth - 200) / iEnd
with(theList)
{
View = 3
BorderStyle = 0
GridLines = true
Checkboxes = checkIt
FullRowSelect = true
LabelEdit = 1
for(var i = 0; i < iEnd; i ++)
{
ColumnHeaders.Add(i + 1, 'Col' + i, theTable.rows[0].cells[i].innerText, colWidth) //, 100, myAlign)
}
for(var i = 1; i < theTable.rows.length; i ++)
{
myList.ListItems.Add( i, 'Key' + theTable.rows[i].cells[iId -1].innerText.replace(" ", ""), theTable.rows[i].cells[0].innerText.replace(" ", ""))
for(var j = 1; j < iEnd; j ++)
{
  ListItems(i).SubItems(j) = theTable.rows[i].cells[j].innerText.replace(" ", "")
}
}
Sorted = true
}
}
</SCRIPT>

<SCRIPT language=javascript event=ColumnClick(ColumnHeader) for=myList>
if(ColumnHeader.SubItemIndex == myList.SortKey)
{
    if(myList.SortOrder == 0) myList.SortOrder = 1
    else myList.SortOrder = 0
    }
else
{
    myList.SortKey = ColumnHeader.SubItemIndex
    if(myList.SortOrder == 0) myList.SortOrder = 1
else myList.SortOrder == 0
    }
</SCRIPT>

<SCRIPT language=javascript event=ItemClick(Item) for=myList>
var theValue = ""
 
   theValue = Item.Text + Item.Key
   for(i = 1; i <= Item.ListSubItems.Count; i ++) theValue = theValue + "/n" + Item.ListSubItems(i).Text
   myValue.value = theValue
   //显示共选择了多少条
   if (myList.MultiSelect){
    lblCount.innerHTML = getSelectedCount() + "条"
   }else{
    lblCount.innerHTML = "1条"
   }
</SCRIPT>

<SCRIPT language=javascript event=DblClick for=myList>
var theValue = ""
 
   theValue = SelectedItem.Text + SelectedItem.Key
   for(i = 1; i <= SelectedItem.ListSubItems.Count; i ++) theValue = theValue + "/n" + SelectedItem.ListSubItems(i).Text
   myValue.value = theValue
   alert(theValue);
</SCRIPT>

<SCRIPT language=javascript>
function getSelectedCount(){
 var cnt=0;
 for (var i=1;i<=myList.ListItems.Count;i ++){
  if (myList.ListItems(i).Selected){
   cnt++;
  }
 }
 return cnt;
}
function deleteSelectedItem(){
 var cnt=0;
 for (var i=1;i<=myList.ListItems.Count;i ++){
  if (myList.ListItems(i).Selected){
   myList.ListItems.Remove(i);
   //myList.ListItems(i).Delete();
   cnt++;
  }
 }
 return cnt;
}
</SCRIPT>

<TABLE style="BORDER-COLLAPSE: collapse" height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>
<SCRIPT language=javascript>
document.write( "<object classid='clsid:BDD1F04B-858B-11D1-B16A-00C0F0283628' style = 'width:" + (document.body.clientWidth - 250) + ";height:" + document.body.clientHeight + "' id='myList'></object> ")
</SCRIPT>

<TABLE id=myTale style="DISPLAY: none" border=1>
<TBODY>
<TR id=tablehead>
<TD id=mytd>编号 </TD>
<TD id=mytd>名称 </TD>
<TD id=mytd>价格 </TD>
<TD id=mytd>备注 </TD>
<TD id=mytd>编号 </TD></TR>
<TR id=mytr>
<TD id=mytd>101 </TD>
<TD id=mytd>53度特酿 </TD>
<TD id=mytd>186 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>16 </TD></TR>
<TR id=mytr>
<TD id=mytd>102 </TD>
<TD id=mytd>52趵突泉特酿 </TD>
<TD id=mytd>128 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>17 </TD></TR>
<TR id=mytr>
<TD id=mytd>103 </TD>
<TD id=mytd>39度精品趵突泉特酿 </TD>
<TD id=mytd>60 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>18 </TD></TR>
<TR id=mytr>
<TD id=mytd>104 </TD>
<TD id=mytd>34度趵突泉特酿 </TD>
<TD id=mytd>45.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>19 </TD></TR>
<TR id=mytr>
<TD id=mytd>105 </TD>
<TD id=mytd>36度趵突泉特酿 </TD>
<TD id=mytd>25.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>20 </TD></TR>
<TR id=mytr>
<TD id=mytd>106 </TD>
<TD id=mytd>38度趵突泉特酿 </TD>
<TD id=mytd>15.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>21 </TD></TR>
<TR id=mytr>
<TD id=mytd>107 </TD>
<TD id=mytd>39度趵突泉特酿 </TD>
<TD id=mytd>10.58 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>22 </TD></TR>
<TR id=mytr>
<TD id=mytd>108 </TD>
<TD id=mytd>39度五年趵突泉陈酿 </TD>
<TD id=mytd>19.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>23 </TD></TR>
<TR id=mytr>
<TD id=mytd>109 </TD>
<TD id=mytd>39度八年趵突泉陈酿 </TD>
<TD id=mytd>29.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>24 </TD></TR>
<TR id=mytr>
<TD id=mytd>110 </TD>
<TD id=mytd>58度珍品趵突泉特酿 </TD>
<TD id=mytd>288 </TD>
<TD id=mytd>1*4 </TD>
<TD id=mytd>25 </TD></TR>
<TR id=mytr>
<TD id=mytd>111 </TD>
<TD id=mytd>52度250ml趵突泉特酿 </TD>
<TD id=mytd>64 </TD>
<TD id=mytd>1*8 </TD>
<TD id=mytd>26 </TD></TR>
<TR id=mytr>
<TD id=mytd>123 </TD>
<TD id=mytd>38度趵突泉特酿（金） </TD>
<TD id=mytd>78 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>27 </TD></TR>
<TR id=mytr>
<TD id=mytd>124 </TD>
<TD id=mytd>38度趵突泉特酿（银） </TD>
<TD id=mytd>58 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>28 </TD></TR>
<TR id=mytr>
<TD id=mytd>114 </TD>
<TD id=mytd>32度趵突泉特酿 </TD>
<TD id=mytd>48 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>29 </TD></TR>
<TR id=mytr>
<TD id=mytd>120 </TD>
<TD id=mytd>39度锦绣川特酿（瓷） </TD>
<TD id=mytd>19.8 </TD>
<TD id=mytd>1*12 </TD>
<TD id=mytd>30 </TD></TR>
<TR id=mytr>
<TD id=mytd>121 </TD>
<TD id=mytd>36度趵突泉特酿（瓷瓶） </TD>
<TD id=mytd>48 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>31 </TD></TR>
<TR id=mytr>
<TD id=mytd>122 </TD>
<TD id=mytd>34度趵突泉特酿（瓷瓶） </TD>
<TD id=mytd>88 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>32 </TD></TR>
<TR id=mytr>
<TD id=mytd>207 </TD>
<TD id=mytd>48度趵突泉特曲 </TD>
<TD id=mytd>5 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>33 </TD></TR>
<TR id=mytr>
<TD id=mytd>210 </TD>
<TD id=mytd>44度趵突泉特曲 </TD>
<TD id=mytd>3.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>34 </TD></TR>
<TR id=mytr>
<TD id=mytd>211 </TD>
<TD id=mytd>44度新趵突泉特曲 </TD>
<TD id=mytd>4.2 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>35 </TD></TR>
<TR id=mytr>
<TD id=mytd>214 </TD>
<TD id=mytd>44度趵突泉白酒 </TD>
<TD id=mytd>1.5 </TD>
<TD id=mytd>1*10 </TD>
<TD id=mytd>36 </TD></TR>
<TR id=mytr>
<TD id=mytd>216 </TD>
<TD id=mytd>44度趵突泉二曲 </TD>
<TD id=mytd>1.4 </TD>
<TD id=mytd>1*10 </TD>
<TD id=mytd>37 </TD></TR>
<TR id=mytr>
<TD id=mytd>218 </TD>
<TD id=mytd>39度万竹园特酿 </TD>
<TD id=mytd>5 </TD>
<TD id=mytd>1*20 </TD>
<TD id=mytd>38 </TD></TR>
<TR id=mytr>
<TD id=mytd>218 </TD>
<TD id=mytd>39度万竹园特酿 </TD>
<TD id=mytd>5 </TD>
<TD id=mytd>1*12 </TD>
<TD id=mytd>40 </TD></TR>
<TR id=mytr>
<TD id=mytd>219 </TD>
<TD id=mytd>46度趵突泉桶装酒 </TD>
<TD id=mytd>15.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>41 </TD></TR>
<TR id=mytr>
<TD id=mytd>220 </TD>
<TD id=mytd>54度锦绣川桶装酒 </TD>
<TD id=mytd>16 </TD>
<TD id=mytd>1*4 </TD>
<TD id=mytd>42 </TD></TR>
<TR id=mytr>
<TD id=mytd>232 </TD>
<TD id=mytd>50趵突泉大曲 </TD>
<TD id=mytd>2.5 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>43 </TD></TR>
<TR id=mytr>
<TD id=mytd>235 </TD>
<TD id=mytd>50趵突泉老窖 </TD>
<TD id=mytd>4 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>44 </TD></TR>
<TR id=mytr>
<TD id=mytd>236 </TD>
<TD id=mytd>42度趵突泉陈酿 </TD>
<TD id=mytd>4.5 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>45 </TD></TR>
<TR id=mytr>
<TD id=mytd>245 </TD>
<TD id=mytd>42度趵突泉酒 </TD>
<TD id=mytd>4 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>46 </TD></TR>
<TR id=mytr>
<TD id=mytd>333 </TD>
<TD id=mytd>42度趵突泉佳酿 </TD>
<TD id=mytd>5.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>47 </TD></TR>
<TR id=mytr>
<TD id=mytd>336 </TD>
<TD id=mytd>38度趵突泉特酿 </TD>
<TD id=mytd>8.1 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>48 </TD></TR>
<TR id=mytr>
<TD id=mytd>339 </TD>
<TD id=mytd>38度趵突泉特酿 </TD>
<TD id=mytd>8.3 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>49 </TD></TR>
<TR id=mytr>
<TD id=mytd>125 </TD>
<TD id=mytd>38度礼品特酿（2瓶装） </TD>
<TD id=mytd>158 </TD>
<TD id=mytd>1*2*4 </TD>
<TD id=mytd>50 </TD></TR>
<TR id=mytr>
<TD id=mytd>238 </TD>
<TD id=mytd>40度趵突泉酒 </TD>
<TD id=mytd>3.6 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>51 </TD></TR>
<TR id=mytr>
<TD id=mytd>262 </TD>
<TD id=mytd>46度趵突泉特酿 </TD>
<TD id=mytd>9 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>52 </TD></TR>
<TR id=mytr>
<TD id=mytd>263 </TD>
<TD id=mytd>46度趵突泉特酿 </TD>
<TD id=mytd>9 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>53 </TD></TR>
<TR id=mytr>
<TD id=mytd>242 </TD>
<TD id=mytd>44度趵突泉老窖 </TD>
<TD id=mytd>1.8 </TD>
<TD id=mytd>1*10 </TD>
<TD id=mytd>54 </TD></TR>
<TR id=mytr>
<TD id=mytd>117 </TD>
<TD id=mytd>38度礼品特酿 </TD>
<TD id=mytd>88 </TD>
<TD id=mytd>1*4 </TD>
<TD id=mytd>55 </TD></TR>
<TR id=mytr>
<TD id=mytd>244 </TD>
<TD id=mytd>42度趵突泉酒 </TD>
<TD id=mytd>4 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>56 </TD></TR>
<TR id=mytr>
<TD id=mytd>247 </TD>
<TD id=mytd>40度趵突泉酒 </TD>
<TD id=mytd>6 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>57 </TD></TR>
<TR id=mytr>
<TD id=mytd>126 </TD>
<TD id=mytd>54度礼品特酿（2瓶装） </TD>
<TD id=mytd>488 </TD>
<TD id=mytd>1*2*4 </TD>
<TD id=mytd>58 </TD></TR>
<TR id=mytr>
<TD id=mytd>249 </TD>
<TD id=mytd>44度趵突泉特曲 </TD>
<TD id=mytd>4.53 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>59 </TD></TR>
<TR id=mytr>
<TD id=mytd>264 </TD>
<TD id=mytd>54度锦绣川佳酿 </TD>
<TD id=mytd>3.8 </TD>
<TD id=mytd>1*8 </TD>
<TD id=mytd>60 </TD></TR>
<TR id=mytr>
<TD id=mytd>265 </TD>
<TD id=mytd>44度锦绣川白酒 </TD>
<TD id=mytd>8 </TD>
<TD id=mytd>1*4 </TD>
<TD id=mytd>61 </TD></TR>
<TR id=mytr>
<TD id=mytd>252 </TD>
<TD id=mytd>44度卧虎山白酒 </TD>
<TD id=mytd>2.6 </TD>
<TD id=mytd>1*12 </TD>
<TD id=mytd>62 </TD></TR>
<TR id=mytr>
<TD id=mytd>253 </TD>
<TD id=mytd>38度趵突泉特酿（实惠型） </TD>
<TD id=mytd>3.6 </TD>
<TD id=mytd>1*8 </TD>
<TD id=mytd>63 </TD></TR>
<TR id=mytr>
<TD id=mytd>253 </TD>
<TD id=mytd>38度趵突泉特酿（实惠型） </TD>
<TD id=mytd>3.6 </TD>
<TD id=mytd>1*12 </TD>
<TD id=mytd>64 </TD></TR>
<TR id=mytr>
<TD id=mytd>254 </TD>
<TD id=mytd>38度125ml趵突泉特酿 </TD>
<TD id=mytd>2 </TD>
<TD id=mytd>1*24 </TD>
<TD id=mytd>65 </TD></TR>
<TR id=mytr>
<TD id=mytd>255 </TD>
<TD id=mytd>38度趵突泉酒 </TD>
<TD id=mytd>6.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>66 </TD></TR>
<TR id=mytr>
<TD id=mytd>256 </TD>
<TD id=mytd>35度趵突泉特曲 </TD>
<TD id=mytd>5.6 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>67 </TD></TR>
<TR id=mytr>
<TD id=mytd>258 </TD>
<TD id=mytd>46度趵突泉酒 </TD>
<TD id=mytd>4.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>68 </TD></TR>
<TR id=mytr>
<TD id=mytd>259 </TD>
<TD id=mytd>44度趵突泉特曲 </TD>
<TD id=mytd>3.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>69 </TD></TR>
<TR id=mytr>
<TD id=mytd>260 </TD>
<TD id=mytd>42度趵突泉特曲（简装） </TD>
<TD id=mytd>3.18 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>70 </TD></TR>
<TR id=mytr>
<TD id=mytd>261 </TD>
<TD id=mytd>50度趵突泉特曲（捆扎） </TD>
<TD id=mytd>2 </TD>
<TD id=mytd>1*10 </TD>
<TD id=mytd>71 </TD></TR>
<TR id=mytr>
<TD id=mytd>315 </TD>
<TD id=mytd>38度趵突泉特酿（招财进宝） </TD>
<TD id=mytd>6.5 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>72 </TD></TR>
<TR id=mytr>
<TD id=mytd>318 </TD>
<TD id=mytd>42度趵突泉醇香 </TD>
<TD id=mytd>3.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>73 </TD></TR>
<TR id=mytr>
<TD id=mytd>321 </TD>
<TD id=mytd>42度趵突泉特曲 </TD>
<TD id=mytd>3.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>74 </TD></TR>
<TR id=mytr>
<TD id=mytd>323 </TD>
<TD id=mytd>38度趵突泉特酿 </TD>
<TD id=mytd>8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>75 </TD></TR>
<TR id=mytr>
<TD id=mytd>326 </TD>
<TD id=mytd>39度趵突泉特酿（一级） </TD>
<TD id=mytd>3.5 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>76 </TD></TR>
<TR id=mytr>
<TD id=mytd>329 </TD>
<TD id=mytd>44度趵突泉特酿 </TD>
<TD id=mytd>5.4 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>77 </TD></TR>
<TR id=mytr>
<TD id=mytd>331 </TD>
<TD id=mytd>44度趵突泉特酿 </TD>
<TD id=mytd>5.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>78 </TD></TR>
<TR id=mytr>
<TD id=mytd>332 </TD>
<TD id=mytd>44度趵突泉酒 </TD>
<TD id=mytd>5.5 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>79 </TD></TR>
<TR id=mytr>
<TD id=mytd>339 </TD>
<TD id=mytd>38度趵突泉特酿 </TD>
<TD id=mytd>8.3 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>80 </TD></TR>
<TR id=mytr>
<TD id=mytd>259 </TD>
<TD id=mytd>44度趵突泉特曲 </TD>
<TD id=mytd>3.8 </TD>
<TD id=mytd>1*6 </TD>
<TD id=mytd>83 </TD></TR></TBODY></TABLE></TD>
<TD vAlign=top noWrap align=middle width=250>
<TABLE id=AutoNumber1 style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD>　</TD></TR>
<TR>
<TD>内容11：</TD></TR>
<TR>
<TD><TEXTAREA name=myValue rows=10 cols=16></TEXTAREA> </TD></TR>
<TR>
<TD><BUTTON onclick=myList.MultiSelect=true width="40">允许多选</BUTTON><BUTTON onclick=myList.MultiSelect=false width="40">取消多选</BUTTON><BR><BR><LABEL>共选择了</LABEL><LABEL id=lblCount></LABEL><BR><BR><BUTTON onclick=deleteSelectedItem()>删除当前选择的Item</BUTTON><BR><BUTTON onclick=myList.FlatScrollBar=true width="40">滚动条扁平</BUTTON><BUTTON onclick=myList.FlatScrollBar=false width="40">取消扁平</BUTTON><BR><BUTTON onclick=myList.BackColor=11986122 width="40">背景色</BUTTON><BUTTON onclick=myList.ForeColor=4093255 width="40">前景色</BUTTON><BR><BUTTON onclick=myList.FullRowSelect=true width="40">行选中</BUTTON><BUTTON onclick=myList.FullRowSelect=false width="40">单元格选中</BUTTON><BR><BUTTON onclick=myList.GridLines=true width="40">显示虚线</BUTTON><BUTTON onclick=myList.GridLines=false width="40">去掉虚线</BUTTON><BR><BUTTON onclick=myList.HidecolumnHeaders=false width="40">显示标题栏</BUTTON><BUTTON onclick=myList.HidecolumnHeaders=true width="40">隐藏标题栏</BUTTON><BR><BUTTON onclick=myList.HideSelection=false width="40">显示选择(焦点失去时)</BUTTON><BR><BUTTON onclick=myList.HideSelection=true width="40">不显示选择(焦点失去时)</BUTTON><BR><BUTTON onclick=myList.HotTracking=true width="40">鼠标选择1</BUTTON><BUTTON onclick=myList.HotTracking=false width="40">取消鼠标选择1</BUTTON><BR><BUTTON onclick=myList.HoverSelection=true width="40">鼠标选择2</BUTTON><BUTTON onclick=myList.HoverSelection=false width="40">取消鼠标选择2</BUTTON><BR><BUTTON onclick=myList.LabelWrap=true width="40">省略显示</BUTTON><BUTTON onclick=myList.LabelWrap=false width="40">取消省略显示</BUTTON><BR><BUTTON onclick=myList.LabelEdit=0 width="40">可编辑</BUTTON><BUTTON onclick=myList.LabelEdit=1 width="40">不可编辑</BUTTON><BR><BUTTON onclick=myList.View=1 width="40">显示效果1</BUTTON><BUTTON onclick=myList.View=2 width="40">显示效果2</BUTTON><BR><BUTTON onclick=myList.View=3 width="40">显示效果3</BUTTON><BUTTON onclick=myList.View=0 width="40">显示效果4</BUTTON> <BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<OBJECT id=imageList1 classid=clsid:2C247F23-8591-11D1-B16A-00C0F0283628><PARAM NAME="_ExtentX" VALUE="1005"><PARAM NAME="_ExtentY" VALUE="1005"><PARAM NAME="BackColor" VALUE="-2147483643"><PARAM NAME="ImageWidth" VALUE="0"><PARAM NAME="ImageHeight" VALUE="0"><PARAM NAME="MaskColor" VALUE="12632256"><PARAM NAME="UseMaskColor" VALUE="-1"><PARAM NAME="_Version" VALUE="393216"></OBJECT>
<SCRIPT language=javascript>
//function chageSize()
//{
//myList.width = document.body.clientWidth - 150
//myList.height = document.body.clientHeight
//alert(document.body.clientWidth - 150)
//setTimeout("chageSize()", 10)
//}
//chageSize()
</SCRIPT>