DataList是另一种显示数据控件,它与GridView不同的是,它全部使用模板进行设计,并且DataList的模板是对整行设置,而不是像GridView那样只对某一列进行模板设计。 正是由于它使用模板进行设计,所以它的灵活性比GridView更高,但事情总是有两面性的,灵活度提高了,必然带来使用上的复杂。因此DataList在易用性上真的不如GridView好,因此在要求有较高灵活性的时候我们最好使用DataList控件。 (车延禄) DataList控件在页面上的初始外观很简单
在DreamWeaver中的模板如下
项模板
页眉页脚模板
在使用的时间我们一般与DreamWeaver结合使用,在DreamWeaver中做好界面复制到相关模板中使用。 一、用DataList实现简单的二维表格形式的显示 下面是我们在DataList中创建完页眉模板与项模板后的代码,页眉的代码被放在<HeaderTemplate>标记中间,而普通项的代码被放在<ItemTemplate>标记中间。 <asp:DataList ID="DataList1" runat="server" Width="100%"> <HeaderTemplate> <table border="0" width="100%" border=0 cellspacing=0> <tr bgcolor="#339999"> <td width="15%"> <div align="center">编号</div> </td> <td width="20%"> <div align="center">名称</div> </td> <td width="15%"> <div align="center">价格</div> </td> <td width="15%"> <div align="center">产地</div> </td> <td width="15%"> <div align="center">货架</div> </td> <td width="20%"> <div align="center">图片</div> </td> </tr> </table> </HeaderTemplate> <ItemTemplate> <table bgcolor="#F0F6F7" border="0" width="100%" border=0 cellspacing=0> <tr bgcolor="#99FF33"> <td width="15%"> <div align="center"><%# Eval("Ids") %></div> </td> <td width="20%"> <div align="center"><%# Eval("name") %></div> </td> <td width="15%"> <div align="center"><%# Eval("price") %></div> </td> <td width="15%"> <div align="center"><%# Eval("source") %></div> </td> <td width="15%"> <div align="center"><%# Eval("stack") %></div> </td> <td width="20%"> <div align="center"><%# Eval("image") %></div> </td> </tr> </table> </ItemTemplate> </asp:DataList> 由于模板内容是我们复制过来的Table表格,所以在数据绑定的时间系统不知道该把数据源的值显示在哪个td标记里面。为此我们使用<%# Eval("列名")%>来手动指定DataList如何绑定至数据源。 这里需要说明的是DataList只支持单向绑定,所以当你使用<%# Bind()%>进行绑定时也只是一种单向绑定的效果,而不像GridView那样双向绑定。因为DataList使用的是单项绑定,所以它无法像GridView那样自动产生更新与删除的效果,如果想实现更新删除的功能的话则需要我们手动编写代码了。 (车延禄) 运行效果:
如果你对这个页面不太满意的话,那你可以打开源页面对其中的Table表格进行样式设置达到满意的效果。
思考:如何把图片也显示出来? 思考:如何把普通项和交替项实现不同的背景色? 二、用DataList实现不规则的显示 (车延禄) 像上个例子,如果我们把图片显示出来的话,那图片会把我们的数据行撑大,这样的界面很不美观,我们可以把界面设置为如下方式:
这种样式的显示其实很简单,只需要把模板列变一下就可以了
然后再在源代码相应位置处用<%# Eval("")%>绑定到数据源中就可以了。
要想一行显示多个水果的话,请设置RepeatColumns和RepeatDirection两个属性。 RepeatColumns属性:设置一行显示几项 RepeatDirection属性:设置项的布局方式。Virtical-竖排优先,Horizontal-以行优先
三、用DataList实现更新和删除 用DataList修改和更新 第一步:在普通项模板或交替项模板中加入一个按钮,并把该按钮的CommandName设为edit。
第二步:编辑EditTemplate,在其中要执行修改的地方加入文本框或其它控件,并加入“更新”和“取消”两个按钮,分别把这两个按钮的CommandName设为update和cancel
第三步:在EditCommand事件中编写代码,把当前项用编辑模板显示出来
第四步:在UpdateCommand事件中编写代码把修改完的数据更新回数据库,在CancelCommand事件中编写代码,把当前项变回普通项状态
运行效果:
在DataList中常用的事件: ItemCreated:项创建完成时触发,与GridView中的RowCreated事件相似 ItemDataBound:数据绑定完成时触发,与GridView中的RowDataBound事件相似 CancelCommand:当CommandName是cancel的按钮被点击时触发该事件 DeleteCommand:当CommandName是delete的按钮被点击时触发该事件 EditCommand:当CommandName是edit的按钮被点击时触发该事件 UpdateCommand:当CommandName是update的按钮被点击时触发该事件 SelectedIndexChanged:当CommandName是select的按钮被点击时触发该事件 ItemCommand:任何一个按钮被点击时触发该事件,包括CommandName是cancel,delete,edit,update,selected的按钮 四、DataList分页 (车延禄) DataList默认不带分页功能,但可以与PagedDataSource对象结合使用进行分页,但对于页数比较多的情况下,这种分页方式太耗费资源,所以建议使用存储过程分页 分页的存储过程: --取得分页的总页数 create proc UP_CAR_PAGECOUNT @pagesize int AS declare @c int select @c = count(*) from car return ceiling(cast(@c as float)/cast(@pagesize as float)) GO --分页的存储过程 create proc UP_CAR_PAGESELECT @pagesize int, @nowpage int--, AS declare @c int declare @num int select @num = (@nowpage-1) * @pagesize select @c = count(*) from car if @pagesize > 0 begin declare @cmd varchar(1000) select @cmd = 'select top '+ cast(@pagesize as varchar(50))+' * from car as c1 where code not in (select top '+cast(@num as varchar(50))+' code from car as c2 order by c2.code) order by c1.code' exec (@cmd) end GO 数据访问类代码: public int GetPageCount(int pagesize) { SqlCommand cmd = conn.CreateCommand(); cmd.CommandType = CommandType.StoredProcedure; cmd.CommandText = "UP_CAR_PAGECOUNT"; cmd.Parameters.AddWithValue("@pagesize", pagesize); cmd.Parameters.Add("@RETURN_VALUE", SqlDbType.Int).Direction = ParameterDirection.ReturnValue; conn.Open(); cmd.ExecuteNonQuery(); int n = (int)cmd.Parameters["@RETURN_VALUE"].Value; conn.Close(); return n; } public List<CarData> select(int pagesize, int nowpage) { List<CarData> list = new List<CarData>(); CarData data; SqlCommand cmd = conn.CreateCommand(); cmd.CommandType = CommandType.StoredProcedure; cmd.CommandText = "UP_CAR_PAGESELECT"; cmd.Parameters.AddWithValue("@pagesize", pagesize); cmd.Parameters.AddWithValue("@nowpage", nowpage); conn.Open(); SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read()) { data = new CarData(); data.Ids = (int)dr["ids"]; data.Code = (string)dr["code"]; data.Name = (string)dr["name"]; data.Brand = (string)dr["brand"]; data.Time = (DateTime)dr["time"]; data.Oil = (decimal)dr["oil"]; data.Powers = (int)dr["powers"]; data.Exhaust = (int)dr["exhaust"]; data.Price = (decimal)dr["price"]; data.Pic = (string)dr["pic"]; list.Add(data); } conn.Close(); return list; } 页面调用代码: private const int PAGESIZE = 5; protected void Page_Load(object sender, EventArgs e) { int pagecount = new CarDA().GetPageCount(PAGESIZE); for (int i = 0; i < pagecount; i++) { LinkButton lb = new LinkButton(); lb.Text = (i+1).ToString(); lb.Click += new EventHandler(lb_Click); Panel1.Controls.Add(lb); Literal lt = new Literal(); lt.Text = " "; Panel1.Controls.Add(lt); } if (!IsPostBack) { BindList("1"); } } private void BindList(string nowpage) { ObjectDataSource1.TypeName = "CarDA"; ObjectDataSource1.SelectMethod = "select"; ObjectDataSource1.SelectParameters.Clear(); ObjectDataSource1.SelectParameters.Add("pagesize", PAGESIZE.ToString()); ObjectDataSource1.SelectParameters.Add("nowpage", nowpage); DataList1.DataSourceID = ObjectDataSource1.ID; } void lb_Click(object sender, EventArgs e) { LinkButton lb = (LinkButton)sender; BindList(lb.Text); } (车延禄)
|