ListView详解

ListView 详解 在 VS2008 中新增了两个非常好用的两个数据控件 ListViewListView 和和 DataPagerDataPager 使 用这两个控件可以很灵活地实现数据的显示 分组 分页 排序 编辑 插入 删除等功能 在 VS2008 之前 要显示集合型数据 我们一般会采用 Repeater DataList 或 GridView 等控件来实现 GridView 为我们提供了强大的数据显示功能 但是它 把界面限制在一个标准的行列 Table 表格中 比如难以实现在一行显示多条数 据的功能 DataList 的界面灵活度比 GridView 要强一些 但使用起来远没有 GridView 那样简单方便 而 Repeater 一般是用来显示数据 它内存的事件与模 板太少 功能不如 DataList 强大 ListViewListView 兼有兼有 GridViewGridView 的易用性 又拥有的易用性 又拥有 DataListDataList 的灵活性 是我们的灵活性 是我们 DotNewDotNew 开发的好工具 开发的好工具 签于网上介绍此控件的中文文章太少 太肤浅 在这篇文章中我们来深入研究 一下 ListView DataPager 的强大功能 一 一 ListViewListView 初登场初登场 像 GridView 和 DataList 等控件都会在显示数据的时候 会自动我们添加一些 额外的标记 如 GridView 会在未经我们同意的情况下 自动生成 等元素 并把数据绑定显示在中 虽然可以使用模板列来 自定义列的显示 但模板列仍逃不出 GridView 强行加入的标记 所以 GridView 做出来的办面往往是规规正正的二维表格 要应对企业开发中的各种 表格化界面显得为不从心 虽然 GridView 也可以实现单元格的合并 GridView 的嵌套 但工作量很大 自由度也很受限制 而 ListViewListView 在显示数据的时候不会为我们强行添加任何额外的在显示数据的时候不会为我们强行添加任何额外的 HTMLHTML 标记 标记 ListViewListView 界面的界面的 HTMLHTML 代码完全由开发人员通过以下代码完全由开发人员通过以下 1111 个模板来自行控制个模板来自行控制的 AlternatingItemTemplate EditItemTemplate EmptyDataTemplate EmptyItemTemplate GroupSeparatorTemplate GroupTemplate InsertItemTemplate ItemSeparatorTemplate ItemTemplate LayoutTemplate SeletedItemTemplate 其中比较常用的模板有 LayoutTemplateLayoutTemplate 和和 ItemTemplateItemTemplate 两个模板 LayoutTemplateLayoutTemplate 用来设置用来设置 ListViewListView 外围的标记 而外围的标记 而 ItemTemplateItemTemplate 是用来生成是用来生成 ListViewListView 绑定项的内容 绑定项的内容 如 使用 ListView 显示列表项时 模板代码如下 图 1 从上图我们看出 LayoutTemplate 和 ItemTemplate 分别独立定义 那怎么来把 二者进行组合形成一个显示界面呢 我们只需要在在 LayoutTemplateLayoutTemplate 模板中定义模板中定义 一个一个 runat server runat server 的元素 并把这个元素的的元素 并把这个元素的 IDID 设为设为 ListVieiwListVieiw 控件的控件的 ItemPlaceholderIDItemPlaceholderID 属性所指定的值即可属性所指定的值即可 ListView 控件的 ItemPlaceholderID 属性的默认值为 itemPlaceholder 如上图中我们定义 PlaceHolder 的 ID 就是 itemPlaceholder 当然我也可以把 PlaceHolder 的 ID 指定为另一个 值 aaa 但需要同时把 ListView 控件的 ItemPlaceholderID 的属性设为 aaa 在 ListView 呈显的时候 就会把 LayoutTemplate 和 ItemTemplate 结合起来一 起呈现 首先 用首先 用 ItemTemplateItemTemplate 定义的数据项模板来生成记录项集合定义的数据项模板来生成记录项集合 图 2 然后 再把生成的记录项集合内容替代然后 再把生成的记录项集合内容替代 LayoutTemplateLayoutTemplate 中中 ID itemPlacehoderID itemPlacehoder 的元素的元素 图 3 下面我们来试着做个例子显示数据 在这里我们还是使用 汽车表 作为示例数据 ListView 代码如下图所示 图 4 在这个例子中 我们把我们把 ListViewListView 控件的控件的 ItemPlaceholderIDItemPlaceholderID 属性修改为属性修改为 placeForItem placeForItem 并在 并在 LayoutTemplateLayoutTemplate 模板中把第二模板中把第二设置为设置为 runat server runat server 并且把该 并且把该的的 IDID 也设置为也设置为 placeForItem placeForItem 在 在 ItemTemplateItemTemplate 模板中我们从模板中我们从开始设置模板 在运行的时候会用开始设置模板 在运行的时候会用 ItemTemplateItemTemplate 生成的数据项 生成的数据项 去替换 去替换 LayoutTemplateLayoutTemplate 中的中的 trID placeForItem 运行结果 图 5 图 6 二 分组显示数据二 分组显示数据 上面我们使用 LayoutTemplate 和 ItemTemplate 实现数据的显示 就是在 LayoutTemplate 中把要引用 ItemTemplate 数据项的服务端元素的 ID 设置为 ListView 控件的 ItemPlaceholderID 的值 这种显示方式直接把 ItemTemplate 生成的内容嵌入到 LayoutTemplate 中 有的时候这种显示方式不能满足需求 比如 想在一行中显示两项或多项数据的话 上面的方式就无能为力了 图 7 要实现上面这种效果就需要使用要实现上面这种效果就需要使用 GroupTemplateGroupTemplate 模板 模板 它的实现思想不再是在 LayoutTemplate 中直接引用 ItemTemplate 了 而是在在 LayoutTemplateLayoutTemplate 中引用中引用 GroupTempateGroupTempate 在 在 GroupTemplateGroupTemplate 中再引用中再引用 ItemTemplateItemTemplate 然后再设置 然后再设置 ListViewListView 控件的控件的 GroupItemCountGroupItemCount 属性 属性 在运行的时候 先把 ItemTemplate 和 GroupTemplate 整合在一起 然后再根据 ListView 控件的 GroupItemCount 属性值 决定每个 GroupTemplate 中放置几个 ItemTemplate 这样我们就可以在 LayoutTemplate 一行中显示多组数据了 图 8 从上面的代码中我们看出 就是在 LayoutTemplate 和 ItemTemplate 中间加了 一个 GroupTemplate 在每个在每个 GroupTemplateGroupTemplate 中显示三个中显示三个 ItemTemplateItemTemplate 然后 然后 再把所有再把所有 GroupTemplateGroupTemplate 生成的内容嵌入到生成的内容嵌入到 LayoutTemplateLayoutTemplate 中去 中去 图 9 上面的例子我们使用列表项实现分组数据显示 下面我们使用表格实现 分组数据的显示 还是以汽车表为例 我要实现一行显示两辆车的信息 因此我们可以把显示表 格设计成这个样子 外层控制总体部局 外层控制一行显示几项信息 内层的 显示汽车详细信息 1 ListView1 ListView 控件的控件的 GroupItemCountGroupItemCount 属性设置为属性设置为 2 2 这就意思着在一个 GroupTemplate 中显示两个 ItemTemplate 2 ItemTemplate2 ItemTemplate 中设置如下 中设置如下 3 GroupTemplate3 GroupTemplate 设置如下 设置如下 4 LayoutTemplate4 LayoutTemplate 设置如下 设置如下 完整代码如下 图 10 运行结果 图 11 原创 灰灰虫的家 图 12 三 排序数据三 排序数据 有的时候需要我们对数据进行排序显示 比如 论坛中按发表时间排序 按最 后回复时间排序 按阅读次数排序 按回复数量排序等 ListView 也像 GridView 一样为我们提供了免编码的排序功能 下面我们来看看 在这里我们使用 SqlDataSource 为数据源 还是访问汽车表的数据 关于如何 配置 SqlDataSource 数据源 在这里不再赘述 我们要实现对两个字段的排序 价格 和 油耗 首选来看我们 ListView 模板的实现 图 13 从上图中我们看出 在汽车表格的上面我们加入了两个按钮 这两个按钮都设 置了 CommandName 和 CommandArgument CommandName Sort 代表这是个排序按 钮 当它被点击的时候就会执行 Sort 方法进行排序 并触发 Sording 和 Sorted 事件 CommandArgument 用来指定按哪列排序 在这里我们指定列名 这样就可以排序了 并且是升序 降序轮流执行的 图 14 这种排序功能实用性不大 主要原因是 这种排序功能实用性不大 主要原因是 1 自动排序只能与 DataSource 控件结合使用 由 DataSource 控件排序后再绑 定显示在 List 中 并且 ListView 排序对 DataSource 控件返回的数据类型有要 求 即 它只能对 DataSource 控件返回的 DataSet DataTable 和 DataView 进 行自动排序 对理一般的泛型集合是不支持的 2 需要把所有数据都读取到服务器内存 DataSet DataTable DataView 中 才能进行排序 资源利用效率不高 如果要对泛型集合进行排序的话 那需要我们编写如果要对泛型集合进行排序的话 那需要我们编写 SortingSorting 代码 把集合手动代码 把集合手动 排序后再绑定到排序后再绑定到 ListViewListView 中显示 同时要通过中显示 同时要通过 e Cancel truee Cancel true 来阻止来阻止 DataSourceDataSource 控件自动排序 控件自动排序 四 根据字段进行分组显示四 根据字段进行分组显示 上面我们介绍了如何对 ListView 进行分组 实现一行显示多条数据 但有的时 候需要我们进行下面这种分组方式 图 15 即即 根据某个字段的值不同 对数据分组显示 根据某个字段的值不同 对数据分组显示 ListView 默认没有这个功能 但我们可以通过一系列的技巧来实现出来 实现思路 实现思路 第一步 根据需要分组的字段把数据排序 这样就可以把该字段值相同的数据显示为相临的数第一步 根据需要分组的字段把数据排序 这样就可以把该字段值相同的数据显示为相临的数 据行 为我们以后分组提供方便 据行 为我们以后分组提供方便 这一步我们可以在 BLL 层中使用 LinQ 来实现 public class MyDBBF private MyDBDataContext Context new MyDBDataContext public List GetCars return Context Car OrderBy p p Brand1 Prod Code ToList 第二步 添加分组头 第二步 添加分组头 我们可以在 ItemTemplate 中 在每次绑定数据行显示之前判断是否需要添加分 组头 图 16 从上图中我们看到这样一段代码 这是我在 aspx cs 中定义的一个方法 此方法决定分组头的显示 该方法的代 码如下 图 17 这个方法在每行绑定的时候都会被调用到 变量 headerText 代表上一行分组头的文字 即汽车厂商 变量 currentHeader 代表当前分组字段值 如果二者相等 说明这一行和上一行属于 同一个分组 不需要加分组头 就返回空字符串 如果二者不等 说明这一行 与上一行不属同一个分组 就添加一个表头 第三步 运行 第三步 运行 运行效果如下 图 18 五 分页五 分页 在 GridView 中 分页一般有两种方式 一种是利用 GridView 自身带有的分页 功能与 DataSource 控件配合使用实现分页 这种分页方式几乎不用编写代码 实现简单 但它是把所有数据读取到内存中进行分页 对于大数据量的操作销 耗内存较大 即使使用缓存技术 其性能也是很低 并且这种分页的导航与 GridView 集成在一起 导般模式太单调 另一种分页方式就是使用子查询或 LInQ 实现自定义分页 仅从数据库中检索当前页的数据返回 并自己制作分页 导航界面实现分页功能 这种方式性能很高 界面也可以做得比较人性化 但 复杂度较高 实现起来比较麻烦 在 Repeater 和 DataList 中我们一般使用这 种方式进行分页 当然你还可以使用 PagedDataSource 组件 它的实现原理与 GridView 一样 这里不单独列出来 在 VS2008 中为我们提供了一个分页工具 DataPagerDataPager 控件控件 它把分页功能单独封 装起来 我们把数据显示控件 Repeater DataList GridView ListView 数据源控件 SqlDataSource ObjectDataSource 等 和 DataPager 结合起使用 就可以很简单地实现高效的分页功能 两个常用的属性 两个常用的属性 PagedControlIDPagedControlID 要分页显示数据的控件 一般是 Repeater DataList GridView ListView 等 PageSizePageSize 每页的记录数 1 DataPager1 DataPager 与与 SqlDataSourceSqlDataSource 控件一起使用 控件一起使用 这种模式实现的分页仍然是把所有的数据都读取到内存中然后进行分页这种模式实现的分页仍然是把所有的数据都读取到内存中然后进行分页 对于 数据总量不大 并可以预计情况 如 显示一个班的成绩 使用这种方式是可 以的 但对于数据量庞大 并且不知道数据总量将膨胀到什么地步的情况下 千万不能使用这种方式 这种方式实现起来很简单 第一步 设计第一步 设计 ListViewListView 模板 并把它与模板 并把它与 SqlDataSourceSqlDataSource 控件一起绑定显示数据控件一起绑定显示数据 第二步 把第二步 把 DataPagerDataPager 控件放在页面上 可以放在控件放在页面上 可以放在 ListViewListView 的外面 也可以放的外面 也可以放 在在 ListViewListView 的的 LayoutTemplateLayoutTemplate 模板中 模板中 第三步 设置第三步 设置 DataPagerDataPager 控件的两个属性 控件的两个属性 PagedControlIDPagedControlID 和和 PageSizePageSize 第四步 设计第四步 设计 DataPagerDataPager 的导航模式 一般的导航模式 一般 DataPagerDataPager 有两种常用的导航模式有两种常用的导航模式 上一页上一页 下一页下一页 和和 数字页号数字页号 另外还有一种模板导航模式 另外还有一种模板导航模式 图 19 这几种导航模式可以同时混合使用如下图 图 20 这样就可以实现分页功能了 图 21 2 DataPager2 DataPager 与与 ObjectDataSourceObjectDataSource 控件一起使用控件一起使用 这种使用方式可出现两种分页情况 一种情况就是像 DataPager 与 SqlDataSource 控件配合使用一样 把所有数据检索到内存中再进行分页 这种 方式我们不再做讲解了 另一种情况就是每次换页的时候 只检索出要显示的 数据 下面重点讲述这种方式 要实现自定义分页 关键是如何配置要实现自定义分页 关键是如何配置 ObjectDataSourceObjectDataSource 控件向界面提供当前页控件向界面提供当前页 的数据 的数据 大家都知道 ObjectDataSource 控件不直接访问数据库 而是通过调用业务对象 中的方法实现对数据库的操作 要实现自定义分页 那要实现自定义分页 那 ObjectDataSourceObjectDataSource 控件控件 的这个业务对象必须要包含两个方法 的这个业务对象必须要包含两个方法 a a 一个方法接收两个整型输入参数 返回集合类型 这两个参数分别是 一个方法接收两个整型输入参数 返回集合类型 这两个参数分别是 本本 页首行数据的索引号 从页首行数据的索引号 从 0 0 开始 开始 和和 每页最多显示的数据条数每页最多显示的数据条数 返回的 返回的 是当前页的数据集合 是当前页的数据集合 b b 另一个方法也接收上面两个整型输入参数 参数意义与上面方法一样 返另一个方法也接收上面两个整型输入参数 参数意义与上面方法一样 返 回整型值 该整型值就是当前数据集的总记录条数 回整型值 该整型值就是当前数据集的总记录条数 代码如下 图 22 需要注意的是 上面方法中的两个参数的名子不能随便命名 这两个参数的名需要注意的是 上面方法中的两个参数的名子不能随便命名 这两个参数的名 子必须与子必须与 ObjectDataSourceObjectDataSource 控件的控件的 StartRowIndexParameterNameStartRowIndexParameterName 属性值和属性值和 MaximumRowsParameterNameMaximumRowsParameterName 属性值相对应 属性值相对应 图 23 看懂了这些后 下面我们一步一步来实现自定义分页 a a 定义定义 ObjectDataSourceObjectDataSource 要调用的业务对象要调用的业务对象 CarBllCarBll 如图 如图 2222 b b 设置设置 ObejctDataSourceObejctDataSource 控件的控件的 EnablePaging True EnablePaging True c c 设置设置 ObjectDataSourceObjectDataSource 控件的控件的 TypeNameTypeName 为业务对象的类名为业务对象的类名 CallBllCallBll d d 设置设置 ObjectDataSourceObjectDataSource 控件的控件的 SelectMethodSelectMethod 属性为业务对象的两个方法属性为业务对象的两个方法 中的第一个方法名 即返回结果集的那个方法 中的第一个方法名 即返回结果集的那个方法 e e 设置设置 ObjectDataSourceObjectDataSource 控件的控件的 SelectCountMethodSelectCountMethod 属性为业务对象的两属性为业务对象的两 个方法中的第二个方法名 即返回整型值的那个方法 个方法中的第二个方法名 即返回整型值的那个方法 f f 检查检查 StartRowIndexParameterNameStartRowIndexParameterName 属性值是否与业务对象方法的第一个属性值是否与业务对象方法的第一个 参数名一致 参数名一致 MaximumRowsParameterNameMaximumRowsParameterName 属性值是否与业务对象方法的第二个属性值是否与业务对象方法的第二个 参数名一致参数名一致 g g 制作制作 ListViewListView 的模板 并设置其的模板 并设置其 DataSourceIDDataSourceID 属性为属性为 ObjectDataSourceObjectDataSource 控件的控件的 IDID h h 把把 DataPagerDataPager 控件拖到页面上控件拖到页面上 i i 设置设置 DataPagerDataPager 控件的导航外观控件的导航外观 j j 设置设置 DataPagerDataPager 控件的控件的 PagedControlIDPagedControlID 为为 ListViewListView 控件的控件的 IDID PageSizePageSize 数性为页的大小 数性为页的大小 k k 运行页面出现我们的运行结果 运行页面出现我们的运行结果 上面就是我们使用 ListView ObjectDataSource DataPager 控件来实现自定义 分页 六 增 删 改六 增 删 改 在这个例子中我在业务逻辑层使用 Linq To Sql 来实现数据库的增 删 改操 作 代码如下 图 30 原创 灰灰虫的家 一 新增数据 一 新增数据 与 GridView 不同的是 ListView 为我们提供了添加数据的功能 通过 InsertItemTemplateInsertItemTemplate 来定义添加数据的界面 在运行的时候就可以在 ListView 的顶端或底端出现添加 InsertItemTemplate 的界面 要在要在 ListViewListView 中实现新增数据 需要实现两个关键的步骤 中实现新增数据 需要实现两个关键的步骤 1 1 定义定义 InsertItemTemplateInsertItemTemplate 模板模板 2 2 为为 ListViewListView 的的 InsertItemPositionInsertItemPosition 属性赋值 指定新增模板显示的位置 属性赋值 指定新增模板显示的位置 FistItem FistItem 顶端 顶端 LastItem LastItem 底端 底端 None None 不显示不显示 首先 我们来看如何定义首先 我们来看如何定义 InsertItemTemplateInsertItemTemplate 图 24 为了简单起见 插入模板中的输入界面全都使用文本框做 文本框的 Text 属性 双向绑定至 DataSource 控件 Insert Insert 按钮的按钮的 CommandName Insert CommandName Insert Cancel Cancel 按钮的按钮的 CommandName Cancel CommandName Cancel 当输入内容后点击当输入内容后点击 Insert Insert 按钮时 会产生以下操作按钮时 会产生以下操作 1 ListView1 ListView 控件触发控件触发 ItemInsertingItemInserting 事件事件 2 ListView2 ListView 的新增输入界面中的数据传递给的新增输入界面中的数据传递给 DataSourceDataSource 控件的对应参数 控件的对应参数 3 ListView3 ListView 调用对应调用对应 DataSourceDataSource 控件的插入方法 执行插入操作 控件的插入方法 执行插入操作 4 ListView4 ListView 触发触发 ItemInsertedItemInserted 事件事件 5 ListView5 ListView 重新绑数据源重新绑数据源 6 6 输入界面中文本框重置输入界面中文本框重置 然后 设置然后 设置 ListViewListView 的的 InsertItemPositionInsertItemPosition 属性为属性为 LastLast 让添加模板显示在 让添加模板显示在 列表的最下面 列表的最下面 运行界面如图 图 25 上面虽然能够实现添加功能 但是输入界面不合理 比如 没有非空验证 日 期格式没加验证 性别应当使用单选按钮形式 民族应当使用下拉列表形式表 现 下面我们对添加界面做一个修改 第一步 对代号 姓名和生日加入非空验证 第一步 对代号 姓名和生日加入非空验证 第二步 对生日加入范围验证 第二步 对生日加入范围验证 第三步 对性别输入界面修改为单选按钮形式第三步 对性别输入界面修改为单选按钮形式 asp RadioButtonList ID SexRadioButton runat server RepeatDirection Horizontal RepeatLayout Flow SelectedValue SelectedValue 第四步 把民族修改为下拉列表形式 第四步 把民族修改为下拉列表形式 asp DropDownList ID NationDropDownList runat server AppendDataBoundItems True DataSourceID ObjectDataSource2 DataTextField Name DataValueField Code SelectedValue SelectedValue 对于民族下拉列表有点复杂 我们首先使用对于民族下拉列表有点复杂 我们首先使用 ObjectDataSource2ObjectDataSource2 控件向下拉列控件向下拉列 表中加载民族的数据 然后又把民族下拉列表的表中加载民族的数据 然后又把民族下拉列表的 SelectedValueSelectedValue 绑定到绑定到 ObjectDataSource1ObjectDataSource1 的的 InsertParameterInsertParameter 上 上 如果你使用的 NET Framework3 5 的话 会产生错误信息 System InvalidOperationException DatabindingSystem InvalidOperationException Databinding methodsmethods suchsuch asas Eval XPath andEval XPath and Bind Bind cancan onlyonly bebe usedused inin thethe contextcontext ofof a a databounddatabound controlcontrol 这是这是 NET NET Framework3 5Framework3 5 中的一个中的一个 BugBug 并不是我们代码的问题 微软已经在 并不是我们代码的问题 微软已经在 NETNET Framework4 0Framework4 0 中修改了此错误 本例子我是使用中修改了此错误 本例子我是使用 NET NET Framework4 0Framework4 0 实现实现 的 所以能够正常运行 的 所以能够正常运行 如果你正在使用的 NET Framework3 5 的话 那就不能 直接在中使用 SelectedValue Bind Nation 来绑定数 据了 需要你在 ItemInserting 事件中手动为 e Values Nation 进行赋值 修改后的运行效果 图 26 二 修改数据 二 修改数据 ListView 像 GridView 一样为我们提供了修改数据的功能 对于修改数据一共涉 及到两个模板 两个模板 ItemTemplateItemTemplate 和和 EditItemTemplateEditItemTemplate 三个按钮 编辑 更 三个按钮 编辑 更 新 取消 新 取消 编辑 按钮应当放在 ItemTemplate 中 更新 取消 按钮 就非常好放在 EditItemTemplate 中 当点击当点击 编辑编辑 按钮时 按钮时 ListViewListView 会产生以下操作 会产生以下操作 1 ListView1 ListView 触发触发 ItemEditingItemEditing 事件 事件 2 ListView2 ListView 把被点击的把被点击的 编辑编辑 按钮所在行的索引号赋给按钮所在行的索引号赋给 ListView EditIndexListView EditIndex 3 ListView3 ListView 重新绑定数据源重新绑定数据源 4 4 索引号等于索引号等于 ListView EditIndexListView EditIndex 的行 用的行 用 EditItemTemplateEditItemTemplate 模板替换模板替换 ItemTemplateItemTemplate 呈显出来 出现修改界面呈显出来 出现修改界面 当点击当点击 更新更新 按钮时 按钮时 ListViewListView 会产生以下操作 会产生以下操作 1 ListView1 ListView 触发触发 ItemUpdati