当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

经典的ListView下文框

经典的ListView下文框

更新时间:2023-06-21 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

经典的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代码下载

 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html