經(jīng)典的ListView列表框

2012/10/26 12:14:47作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

ListView是C/S開(kāi)發(fā)中的一個(gè)控件，類似于資源管理器中瀏覽文件的效果。本例使用microsoft提供的一個(gè)Object組件，實(shí)現(xiàn)ListView瀏覽效果。

【實(shí)例代碼】

 
<html>
<head>
<title>列表-學(xué)無(wú)憂（wangbatian.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 
//設(shè)置列寬度
    with(theList)
    {
         View = 3                                           
//列表框的樣式
        BorderStyle = 0                                     
//設(shè)置列表的邊框
        GridLines = true                                    
//設(shè)置列表的表格線
        Checkboxes = checkIt                                
//設(shè)置列表的復(fù)選框
        FullRowSelect = true                                
//選擇某單元格時(shí)，是否選中整行
        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 ++)
        {
           //逐列添加列表項(xiàng)
            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 = ""                     
//定義選擇項(xiàng)變量
   theValue = Item.Text + Item.Key       
//設(shè)置選擇項(xiàng)內(nèi)容
   for(i = 1; i <= Item.ListSubItems.Count; i ++) 
   theValue = theValue + "\n" + Item.ListSubItems(i).Text  
//當(dāng)前列表項(xiàng)內(nèi)容
   myValue.value = theValue                                
//在文本框中顯示列表內(nèi)容
</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'>
編號(hào)
</td>
<td id = 'Td1'>
名稱
</td>
<td id = 'Td2'>
價(jià)格
</td>
<td id = 'Td3'>
數(shù)量
</td>
<td id = 'Td4'>
備注
</td>
</tr>
<tr id = 'mytr'>
<td id = 'Td5'>00001
</td>
<td id = 'Td6'>ajax學(xué)習(xí)
</td>
<td id = 'Td7'>13.00
</td>
<td id = 'Td8'>200
</td>
<td id = 'Td9'>新書(shū)第一批
</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;內(nèi)容：</td>
</tr>
<tr>
<td>
&nbsp;
<textarea rows="10" name="myValue" cols = '16'>
</textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

【運(yùn)行效果】

【難點(diǎn)剖析】

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

【源碼下載】

本實(shí)例JS代碼下載

標(biāo)簽： ListView 列表框