當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 經典的ListView列表框

經典的ListView列表框

2012/10/26 12:14:47作者：佚名來源：網絡

移動端

【實例名稱】

經典的ListView列表框

【實例描述】

ListView是C/S開發中的一個控件，類似于資源管理器中瀏覽文件的效果。本例使用microsoft提供的一個Object組件，實現ListView瀏覽效果。

【實例代碼】

 
<html>
<head>
<title>列表-學無憂（www.yzddtk.cn）</title>
<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                                
//選擇某單元格時，是否選中整行
        for(var i = 0; i < iEnd; i ++)
        {
            //逐列添加表頭
            ColumnHeaders.Add(i + 1, 'Col' + i, 
theTable.rows[0].cells[i].innerText, colWidth)
        }
        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(" ", "")
            }
        }
    }
}
</script>
<script language = 'javascript' for = 
'myList' event = 'ItemClick(Item)'>
   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                                
//在文本框中顯示列表內容
</script>
</head>
<body onload = 'InitList(myList, myTale, 4, 5, false)' 
scroll = 'no' bgcolor = 'buttonface' topmargin='0' leftmargin='0'>
<table border='0' cellpadding='0' cellspacing='0' 
style='border-collapse: collapse' width='100%' height='100%'>
<tr>
<td nowrap>
<script language = 'javascript'>
document.write( "<object classid='clsid:BDD1F04B-858B-11D1
-B16A-00C0F0283628' style = 'width:" + (document.body.clientWidth - 150)
 + ";height:" + document.body.clientHeight + "' id='myList'></object> ")
</script>
<table border = '1' id = 'myTale' style = 'display:none'>
<tr id = 'tablehead'>
<td id = 'mytd'>
編號
</td>
<td id = 'Td1'>
名稱
</td>
<td id = 'Td2'>
價格
</td>
<td id = 'Td3'>
數量
</td>
<td id = 'Td4'>
備注
</td>
</tr>
<tr id = 'mytr'>
<td id = 'Td5'>00001
</td>
<td id = 'Td6'>ajax學習
</td>
<td id = 'Td7'>13.00
</td>
<td id = 'Td8'>200
</td>
<td id = 'Td9'>新書第一批
</td>
</tr>
</table>
</td>
<td nowrap width='150' align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" 
style="border-collapse: collapse" width="100%" id="AutoNumber1">
<tr>
<td>　</td>
</tr>
<tr>
<td>&nbsp;內容：</td>
</tr>
<tr>
<td>
&nbsp;
<textarea rows="10" name="myValue" cols = '16'>
</textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

【運行效果】

【難點剖析】

本例的重點是ojbect組件的使用。ListView是Microsoft為IE瀏覽器提供的一個復雜列表框控件，可實現列表項的編輯、排序和顯示。要引用此控件，必須在Object元素中指明該控件的“classid”屬性，具體引用方法可參考代碼。

【源碼下載】

本實例JS代碼下載

標簽：列表框

上一篇：如何設計綜合的搜索引擎
下一篇：PS調色技巧：調出植物小清新圖片

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频