【转贴】ListView使用技巧
本文介绍了ListView的一些经常使用的小技巧。
【转贴】ListView使用技巧
作者:方明
原贴地址:http://www.cnblogs.com/nuaalfm/archive/2008/09/03/1282468.html
目录:
ListView控件学习系列3-ListView选择,排序,分页
1、鼠标移到ListView某一行时改变该行的背景色方法
前端代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<asp:ListView ID="ListView1" runat="server"
onitemdatabound="ListView1_ItemDataBound">
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server" id="Tr">
<td>
<%#Eval("ID") %>
</td>
<td>
<%# Eval("name") %>
</td>
<td>
<%# Eval("age") %>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
后台代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType==ListViewItemType.DataItem)
{
(e.Item.FindControl("Tr") as HtmlTableRow).Attributes.
Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'");
(e.Item.FindControl("Tr") as HtmlTableRow).Attributes.
Add("onmouseout", "this.style.backgroundColor=c");
}
}
2、ListView和和下拉菜单DropDownList结合(其他控件其实也差不多):
前端代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server" id="Tr">
<td>
<asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
</td>
<td>
<%# Eval("name") %>
</td>
<td>
<%# Eval("age") %>
</td>
<td>
<asp:DropDownList ID="SexDropDownList" runat="server">
</asp:DropDownList>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
模拟数据提供代码:
后台代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
DropDownList SexDropDownList = e.Item.FindControl("SexDropDownList") as DropDownList;
int sex = da.Find(Convert.ToInt32((e.Item.FindControl("ID") as Label).Text)).Sex;
ListItem listItem;
if (sex == 0)
{
listItem = new ListItem("男", sex.ToString());
}
else
{
listItem = new ListItem("女", sex.ToString());
}
SexDropDownList.Items.Add(listItem);
SexDropDownList.Enabled = false;
}
3、ListView实现删除时弹出确认对话框:
前端代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server" id="Tr">
<td>
<asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
</td>
<td>
<%# Eval("name") %>
</td>
<td>
<%# Eval("age") %>
</td>
<td>
<asp:Button ID="Delete" runat="server" Text="Delete" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
后台代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
(e.Item.FindControl("Delete") as Button).Attributes.Add
("onclick", "javascript:return confirm('你确认要删除:\""
+ (e.Item.FindControl("id") as Label).Text + "\"吗?')");
}
}
4、ListView实现自动编号
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server" id="Tr">
<td>
<asp:Label ID="Num" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="ID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
</td>
<td>
<%# Eval("name") %>
</td>
<td>
<%# Eval("age") %>
</td>
<td>
<asp:Button ID="Delete" runat="server" Text="Delete" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
后台代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
int Num = 1;
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
(e.Item.FindControl("Num") as Label).Text = Num.ToString();
Num++;
}
}
5、将ListView中的内容以Excel导出
前端代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<div>
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<tr>
<td id="Td1" runat="server" style="">
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
</td>
<td>
<asp:Label ID="xLabel" runat="server" Text='<%# Eval("Age") %>' />
<br />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
</asp:ListView>
</div><asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" />
后台代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
public partial class ListView技巧_Code13 : System.Web.UI.Page
{
DataAccess da;
protected void Page_Load(object sender, EventArgs e)
{
if (Session["da"] == null)
{
da = new DataAccess();
Session["da"] = da;
}
else
{
da = Session["da"] as DataAccess;
}
if (!IsPostBack)
{
Bind();
}
}
private void Bind()
{
ListView1.DataSource = da.List;
ListView1.DataBind();
}
private void Export(string FileType, string FileName)
{
Response.Charset = "GB2312";
Response.ContentEncoding = System.Text.Encoding.UTF7;
Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(FileName, Encoding.UTF8).ToString());
Response.ContentType = FileType;
this.EnableViewState = false;
StringWriter tw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(tw);
ListView1.RenderControl(hw);
Response.Write(tw.ToString());
Response.End();
}
protected void Button1_Click(object sender, EventArgs e)
{
Export("application/ms-excel", "employee.xls");
}
}
6、高级分页
使用DataPager分页虽然简单但是对于大数据量时性能会成问题,因为这种分页仍然是一次性将数据载入到控件中的,暂时没找到使用DataPager好的解决方案,这里使用一个网上比较流行的开源的.net分页控件AspNetPager,下载地址为: http://www.webdiyer.com/
前端代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<%#Eval("ID") %>
</td>
<td>
<%# Eval("name") %>
</td>
<td>
<%# Eval("age") %>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<webdiyer:AspNetPager ID="AspNetPager1" runat="server" UrlPaging="false" ShowPageIndexBox="Always"
PageIndexBoxType="DropDownList" ShowCustomInfoSection="Left" PageIndexBoxStyle="width:19px"
CustomInfoHTML="共%PageCount%页,%RecordCount%条记录,当前第%CurrentPageIndex%页,每页显示%PageSize%条"
HorizontalAlign="Center" PageSize="2" FirstPageText="首页" LastPageText="末页" NextPageText="下一页"
PrevPageText="前一页" TextAfterPageIndexBox="页" TextBeforePageIndexBox="转到第" EnableTheming="true"
OnPageChanging="AspNetPager1_PageChanging">
</webdiyer:AspNetPager>
后台代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
public partial class ListView技巧_Code14 : System.Web.UI.Page
{
DataAccess da;
protected void Page_Load(object sender, EventArgs e)
{
if (Session["da"] == null)
{
da = new DataAccess();
Session["da"] = da;
}
else
{
da = Session["da"] as DataAccess;
}
if (!IsPostBack)
{
Bind();
}
}
private void Bind()
{
ListView1.DataSource = da.GetEmployee(1,2);
AspNetPager1.RecordCount = da.List.Count;
ListView1.DataBind();
}
protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
{
ListView1.DataSource = da.GetEmployee(e.NewPageIndex*2-1, 2);
ListView1.DataBind();
}
}
模拟数据提供代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
public class DataAccess
{
public List<Employee> List;
public DataAccess()
{
List = new List<Employee>();
List = new List<Employee>();
Employee e1 = new Employee { ID = 1, Name = "A", Age = 10, Sex = 1 };
Employee e2 = new Employee { ID = 3, Name = "M", Age = 30, Sex = 0 };
Employee e3 = new Employee { ID = 2, Name = "B", Age = 40, Sex = 1 };
Employee e4 = new Employee { ID = 4, Name = "S", Age = 19, Sex = 0 };
Employee e5 = new Employee { ID = 6, Name = "X", Age = 18, Sex = 1 };
Employee e6 = new Employee { ID = 5, Name = "W", Age = 20, Sex = 0 };
List.Add(e1);
List.Add(e2);
List.Add(e3);
List.Add(e4);
List.Add(e5);
List.Add(e6);
}
public List<Employee> GetEmployee(int startIndex, int rowsCount)
{
List<Employee> listTemp = new List<Employee>();
for (int i = startIndex; i < startIndex+rowsCount; i++)
{
listTemp.Add(List[i-1]);
}
return listTemp;
}
}
7、内嵌DetailsView控件
前端代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<asp:ListView ID="ListView1" runat="server" OnSelectedIndexChanging="ListView1_SelectedIndexChanging">
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:LinkButton ID="SelectButton" CommandName="Select" runat="server" Text="Details" />
</td>
<td>
<%#Eval("ID") %>
</td>
<td>
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
</td>
<td>
<asp:Label ID="xLabel" runat="server" Text='<%# Eval("age") %>' />
</td>
</tr>
</ItemTemplate>
<SelectedItemTemplate>
<tr><td>
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px">
</asp:DetailsView></td></tr>
</SelectedItemTemplate>
</asp:ListView>
后台代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
public partial class ListView技巧_Code15 : System.Web.UI.Page
{
DataAccess da;
protected void Page_Load(object sender, EventArgs e)
{
if (Session["da"] == null)
{
da = new DataAccess();
Session["da"] = da;
}
else
{
da = Session["da"] as DataAccess;
}
if (!IsPostBack)
{
Bind();
}
}
private void Bind()
{
ListView1.DataSource = da.List;
ListView1.DataBind();
}
protected void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
{
ListView1.SelectedIndex = e.NewSelectedIndex;
Bind();
DetailsView dv = ListView1.Items[e.NewSelectedIndex].FindControl("DetailsView1") as DetailsView;
dv.DataSource = da.List;
dv.DataBind();
}
}
8、内嵌GridView带修改
前端代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<asp:ListView ID="ListView1" runat="server"
onselectedindexchanging="ListView1_SelectedIndexChanging">
<LayoutTemplate>
<table id="Table1" runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:LinkButton ID="SelectButton" CommandName="Select" runat="server" Text="选择" />
</td>
<td>
<%#Eval("ID") %>
</td>
<td>
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
</td>
<td>
<asp:Label ID="xLabel" runat="server" Text='<%# Eval("age") %>' />
</td>
</tr>
</ItemTemplate>
<SelectedItemTemplate>
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateEditButton="true"
OnRowEditing="GridView1_Editing" OnRowUpdating="GridView1_Updating"
OnRowCancelingEdit="GridView1_CancelingEdit" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ID" ReadOnly="true" />
<asp:BoundField DataField="name" />
<asp:BoundField DataField="Age" />
</Columns>
</asp:GridView>
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
后台代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
DataAccess da;
protected void Page_Load(object sender, EventArgs e)
{
if (Session["da"] == null)
{
da = new DataAccess();
Session["da"] = da;
}
else
{
da = Session["da"] as DataAccess;
}
if (!IsPostBack)
{
Bind();
}
}
private void Bind()
{
ListView1.DataSource = da.List;
ListView1.DataBind();
}
protected void ListView1_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
{
ListView1.SelectedIndex = e.NewSelectedIndex;
Bind();
ViewState["SelectedIndex"] = e.NewSelectedIndex;
int selectIndex = (int)ViewState["SelectedIndex"];
GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
gv.DataSource = da.List;
gv.DataBind();
}
protected void GridView1_Editing(object sender, GridViewEditEventArgs e)
{
int selectIndex = (int)ViewState["SelectedIndex"];
GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
gv.EditIndex = e.NewEditIndex;
gv.DataSource = da.List;
gv.DataBind();
}
protected void GridView1_Updating(object sender, GridViewUpdateEventArgs e)
{
int selectIndex = (int)ViewState["SelectedIndex"];
GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
string id=gv.Rows[e.RowIndex].Cells[1].Text;
string name= ((TextBox)gv.Rows[e.RowIndex].Cells[2].Controls[0]).Text;
string Age= ((TextBox)gv.Rows[e.RowIndex].Cells[3].Controls[0]).Text;
Employee employee = da.Find(Convert.ToInt32(id));
employee.Name = name;
employee.Age = Convert.ToInt32(Age);
gv.EditIndex = -1;
gv.DataSource = da.List;
gv.DataBind();
}
protected void GridView1_CancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
int selectIndex = (int)ViewState["SelectedIndex"];
GridView gv = (GridView)ListView1.Items[selectIndex].FindControl("GridView1");
gv.EditIndex = -1;
gv.DataSource = da.List;
gv.DataBind();
}
模拟数据提供和前边一样这里就不贴了
未完待续... ...