当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > 经典的ListView列表框

经典的ListView列表框

2012/10/26 12:14:47作者:佚名来源:网络

移动端

【实例名称】

经典的ListView列表框

【实例描述】

ListView是C/S开发中的一个控件,类似于资源管理器中浏览文件的效果。本例使用microsoft提供的一个Object组件,实现ListView浏览效果。

【实例代码】

 

<html> <head> <title>列表-学无忧(www.xue51.com)</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代码下载

 

标签: 列表框