6.14  经典的ListView列表框

【实例描述】

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

【实现代码】

<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>

<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>

【运行效果】

ListView浏览效果如图6-14所示。

图6-14  ListView浏览效果

【难点剖析】

本例的重点是Ojbect组件的使用。ListView是Microsoft为IE浏览器提供的一个复杂列表框控件，可实现列表项的编辑、排序和显示。要引用此控件，必须在Object元素中指明该控件的“classid”属性，具体引用方法可参考代码。