如何创建可编辑的ListView控件

要使用ListView控件，需要加入组件：

Microsoft Windows Common Controls 6.0

Windows资源管理器的右半部分，就是一个ListView控件。

作用

列出并列关系的对象及对象属性。

ListView控件的对象层次结构

ListView -整个控件

ColumnHeaders -标题行

ColumnHeader -标题列

ListItems -对象行集合

ListItem -对象行

ListSubItems -对象属性集合

ListSubItem -对象属性

注意：SubItems和ListSubItems的区别：SubItems是一个String数组；ListSubItems是一个集合。

属性

View：设置ListView的外观

Sorted：设置ListView中的对象集合是否排序。

SortKey：设置以第几项排序。从零开始。

SelectedItem：返回选中的对象的引用。

事件

AfterLabelEdit：编辑ListItem对象的标签时被触发。

BeforeLabelEdit：编辑ListItem对象的标签后出发。

ColumnClick：单击列标题时触发。参数中可以获得被单击的列对象。通常用于排序。

ItemClick：单击某行或某ListItem时触发。参数中可以获得被单击的ListItem对象。

方法

FindItem：搜索ListItem对象。

参数：

string：搜索字符串。

value：在ListItem的哪部分中搜索（LvwText、LvwSubItem、LvwTag）；index：开始搜索的位置。

match：匹配方式。

HitTest：检索位于特定坐标处的ListItem对象。

ListView控件比前面几种控件要复杂一些，通过此控件，可将项目组成带有或不带有列标头的列，并显示伴随的图标和文本。ListView控件是由ColumnHeader和ListItem对象所组成的，其中ColumnHeader对象的个数决定了控件的列数，而ListItem对象的个数则决定了控件的行数。(图7)

ColumnHeader对象是ListView控件中包含标头文字的项目。利用ColumnHeader对象，用户可以：

▲单击对象触发ColumnClick事件并根据数据项目将项目排序。

▲拖动对象的右边框来调整列宽度。

▲在报表视图中隐藏ColumnHeader对象。

ColumnHeader对象的数目决定每个ListItem对象可包含的子项目数目。删除ColumnHeader对象后所有与列关联的子项目也将被删除，并且每个ListItem对象的子项目数组将平移以更新ColumnHeader的索引，而这将导致剩余的列标头SubItemIndex属性的改变。

ColumnHeader对象的SubItemIndex属性

该属性返回与ListView控件中ColumnHeader对象关联的子项目的索引。子项目是字符串数组，代表显示在报表视图中的ListItem对象的数据。第一列的列标头SubItemIndex属性设置为0，这是因为小图标和ListItem对象的文字总出现在第一列中，而且它们被当作ListItem对象而不是子项目。列标头数目取决于子项目数目。列标头数目总是比子项目数目多1。

在设计时可以利用属性页的“列首”选项卡将ColumnHeader对象添加到ListView控件中，在运行时则用Add方法添加。

ColumnHeader对象的Add方法

该方法的使用与前面那些控件基本相似，就不再介绍了。

ListView1.ColumnHeader.Add(index,key,text,width,alignment)

ListItem对象是指控件中的一行（不包含标头行）的所有内容。它也可包含文本和图片，但是要使用图片则必须通过Icons和SmallIcons属性引用ImageList控件。

ListItem对象的SubItems属性

返回或设置一个字符串（子项目）数组，它代表ListView控件中ListItem对象的数据。

ListItem对象可包含任意多个的关联项目数据字符串（子项目），但每个ListItem对象子项目数目必须相同。每个子项目都对应于相关的列标头，无法直接向子项目数组添加元素，只有通过ColumnHeaders的Add方法添加列标头的方法来添加子项目。

ListItem对象的Add方法

该方法添加ListItem对象到ListView控件的ListItems集合中并返回对新创建对象的引用。

它的语法如下：

ListItem1.Add(index,key,text,icon,smallIcon)

ListView控件的View属性

ListView控件可使用四种不同视图显示项目，这可以用View属性来确定。该属性返回或设置ListView控件中ListItem对象的外观。

ListView控件的SortOrder，SortKey和Sorted属性

控件中的ListItem对象可以按要求进行排序，与排序有关的属性是SortOrder，Sorted和SortKey属性。

SortOrder属性返回或设置一个值，此值决定ListView控件中的ListItem对象以升序或降序排序。

SortKey属性返回或设置一个值，此值决定ListView控件中的ListItem对象如何排序。

Sorted属性返回或设置确定ListView控件中的ListItem对象是否排序的值。

下面的代码说明了如何创建ColumnHeaders和ListItem对象，SubItemIndex和SubItem属性的使用方法以及如何排序。

Private Sub Form_load()

'确保ListView控件的view属性为报表视图。

ListView1.View=lvwReport

'添加三列。

ListView1.ColumnHeaders.Add,"Name","姓名"

ListView1.ColumnHeaders.Add,"Sex","性别"

ListView1.ColumnHeaders.Add,"Age","年龄"

'向控件添加ListItem对象。

Dim itmX As ListItem

'添加column1的名称。

Set itmX=ListView1.ListItems.Add(1,"ZL","张力")

'使用SubItemIndex将SubItem与正确的ColumnHeader关联。使用关键字("Sex")指定正确的ColumnHeader。

itmX.SubItems(ListView1.ColumnHeaders("Sex").SubItemIndex)="男"

'使用ColumnHeader关键字将SubItems字符串与

'正确的ColumnHeader关联。

itmX.SubItems(ListView1.ColumnHeaders("Age").SubItemIndex)="19"

Set itmX=ListView1.ListItems.Add(1,"LF","李芳")

itmX.SubItems(ListView1.ColumnHeaders("Sex").SubItemIndex)="男"

itmX.SubItems(ListView1.ColumnHeaders("Age").SubItemIndex)="22"

Set itmX=ListView1.ListItems.Add(1,"WW","王伟")

itmX.SubItems(ListView1.ColumnHeaders("Sex").SubItemIndex)="男"

itmX.SubItems(ListView1.ColumnHeaders("Age").SubItemIndex)="24"

End Sub

Private Sub ListView1_ColumnClick(ByVal ColumnHeader As ComctlLib.ColumnHeader)

Select Case ColumnHeader.Key

Case "Sex":ListView1.SortKey=1

ListView1.SortOrder=lvwAscending

ListView1.Sorted=True

Case "Age":ListView1.SortKey=2

ListView1.SortOrder=lvwAscending

ListView1.Sorted=True

End Select

End Sub

javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：

1、var objSelect = document.getElementById(select_id)。

2、var new_opt = new Option(objItemText, objItemValue)。

3、objSelect.options.add(new_opt)。

实例演示如下：

1、HTML结构，包括一个select项，含有三个options。另外，设置input和button,通过自由父子，实现给select增加自定义option。

此时的显示效果如下，其中option中有三项。

2、JS的函数设计如下：

现有的options如下：

3、在页面上输入新的数据，点击添加。

此时的select效果显示如下，自由添加功能实现。

这是使用js增加li的示例，供您参考：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js增添li元素</title>

</head>

<body>

<ul id='ul1' onClick="add()">

  <li>点击这里增加一个li行</li>

</ul>

<script>

    var cnt = 1 // 用于行计数

    function add() {

        var elem_li = document.createElement('li') // 生成一个 li元素

        elem_li.innerHTML = '这是增加的一行' + cnt ++ // 设置元素的内容

        document.getElementById('ul1').appendChild(elem_li) // 添加到UL中去

    }

</script>

</body>

</html>

运行结果：

---