(自己参加的这个项目中)数据绑定控件除了上节的repeater,另一个常用的就是datagrid了.预实现效果:
一:用到的几个属性,概述.
(1)AutoGenerateColumns(是否自动生成列):默认情况下,属性被设置为 true,为数据源中的每一个字段创建一个列(BoundColumn)对象.列显示顺序与每一字段在数据源中出现的顺序一样。 通常情况下,将其设为false,而只选择你要显示的列,将其包含在<columns></columns>标记之间列,显示顺序与添加顺序一致。
(2)AlternatingItemStyle(交替项样式) :指定 控件中交替项的样式,为了美观,常把相邻两行定义为不同的样式.
(3)ItemStyle(项样式):指定控件中项的样式。
(4)HeaderStyle(头样式): 指定控件中页眉部分的样式。
(5)PagerStyle:指定控件中页选择部分的样式,可用于对所绑定数据分页,
(6)Columns:列集合,当自动生成列设为false时,添加自定义列.
(7)BoundColumn:显示绑定到数据源中的字段的列。它以文本形式显示字段中的每个项。这是 DataGrid 控件的默认列类型。
(8)TemplateColumn:按照指定的模板显示列中的各项。这使您可以在列中提供自定义控件。
(9)DataField:指定所绑定数据源对应的列名称
(10)HeaderText:指定头部显示名称
(11)Wrap:是否换行
(12)HorizontalAlign:水平停靠位置
二:datagrid用到的事件概述:
(1)先调用ItemCreated创建每一项,然后调用ItemDataBound绑定每一项数据,当点击一行时会调用Itemcommand事件.
所以若要对每一行中的空间添加属性,则应在ItemCreated中,若与所绑定的数据有关则在ItemDataBound中,为每一行的某些项添加CommandName则可以再ItemCommand中获取对应事件.
代码如下:
.aspx中代码:
CssClass = " DataGrid " AllowPaging = " True " >
< AlternatingItemStyle CssClass = " DataGridAlter " ></ AlternatingItemStyle >
< ItemStyle CssClass = " DataGridItem " ></ ItemStyle >
< HeaderStyle Wrap = " False " CssClass = " DataGridHeader " ></ HeaderStyle >
< PagerStyle Visible = " False " ></ PagerStyle >
< Columns >
< asp:BoundColumn Visible = " False " DataField = " newsId " HeaderText = " newsId " >
< HeaderStyle Wrap = " False " ></ HeaderStyle >
</ asp:BoundColumn >
< asp:TemplateColumn HeaderText = " 选择 " >
< HeaderStyle Wrap = " False " HorizontalAlign = " Center " Width = " 50px " VerticalAlign = " Middle " ></ HeaderStyle >
< ItemStyle HorizontalAlign = " Center " VerticalAlign = " Middle " ></ ItemStyle >
< HeaderTemplate >
< asp:checkbox id = " chkAll " runat = " server " Text = " 删除 " ></ asp:checkbox >
</ HeaderTemplate >
< ItemTemplate >
< asp:checkbox id = " chkSingle " runat = " server " ></ asp:checkbox >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:BoundColumn DataField = " newsTitle " HeaderText = " 名称 " >
< HeaderStyle Wrap = " False " ></ HeaderStyle >
</ asp:BoundColumn >
< asp:BoundColumn DataField = " keywords " HeaderText = " 关键字 " >
< HeaderStyle Wrap = " False " ></ HeaderStyle >
</ asp:BoundColumn >
< asp:TemplateColumn HeaderText = " 来源 " >
< ItemTemplate >
< asp:Label id = " Label1 " runat = " server " Text = " dd " ></ asp:Label >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:BoundColumn DataField = " inDate " HeaderText = " 添加日期 " DataFormatString = " {0:yyyy-MM-dd} " >
< HeaderStyle Wrap = " False " Width = " 70px " ></ HeaderStyle >
< ItemStyle HorizontalAlign = " Center " ></ ItemStyle >
</ asp:BoundColumn >
< asp:BoundColumn DataField = " editDate " HeaderText = " 修改日期 " DataFormatString = " {0:yyyy-MM-dd} " >
< HeaderStyle Wrap = " False " Width = " 70px " ></ HeaderStyle >
< ItemStyle HorizontalAlign = " Center " ></ ItemStyle >
</ asp:BoundColumn >
< asp:BoundColumn DataField = " hits " HeaderText = " 点击率 " >
< HeaderStyle Wrap = " False " Width = " 40px " ></ HeaderStyle >
< ItemStyle Wrap = " False " HorizontalAlign = " Center " ></ ItemStyle >
</ asp:BoundColumn >
< asp:BoundColumn DataField = " orderNo " HeaderText = " 序号 " >
< HeaderStyle Wrap = " False " Width = " 40px " ></ HeaderStyle >
< ItemStyle Wrap = " False " HorizontalAlign = " Center " ></ ItemStyle >
</ asp:BoundColumn >
< asp:TemplateColumn HeaderText = " 审核 " >
< HeaderStyle Wrap = " False " Width = " 55px " ></ HeaderStyle >
< ItemStyle HorizontalAlign = " Center " ></ ItemStyle >
< ItemTemplate >
< asp:CheckBox id = cbIsPass runat = " server " Text = " 通过 " OnCheckedChanged = " CheckBox_CheckedChanged " AutoPostBack = " True " Checked = ' <%# DataBinder.Eval(Container, "DataItem.isPass") %> ' >
</ asp:CheckBox >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:TemplateColumn HeaderText = " 设置 " >
< HeaderStyle Wrap = " False " Width = " 120px " ></ HeaderStyle >
< ItemStyle HorizontalAlign = " Center " ></ ItemStyle >
< ItemTemplate >
< cc1:userlinkbutton id = " btnCommand " runat = " server " ToolTip = " 推荐本新闻 " CommandName = " command " > [我要推荐] </ cc1:userlinkbutton >& nbsp; & nbsp;
< cc1:userlinkbutton id = " btnRemark " runat = " server " ToolTip = " 管理评论 " CommandName = " remark " > [评论] </ cc1:userlinkbutton >& nbsp; & nbsp;
< cc1:userimagebutton id = " imgButtonEdit " runat = " server " ToolTip = " 修改 " CommandName = " Edit " ImageAlign = " AbsMiddle "
ImageUrl = " ../Images/edit.gif " ></ cc1:userimagebutton >
</ ItemTemplate >
</ asp:TemplateColumn >
< asp:BoundColumn Visible = " False " DataField = " isPic " HeaderText = " isPic " ></ asp:BoundColumn >
< asp:BoundColumn Visible = " False " DataField = " picUrl " HeaderText = " picUrl " ></ asp:BoundColumn >
< asp:BoundColumn Visible = " False " DataField = " isCommand " HeaderText = " isCommand " ></ asp:BoundColumn >
</ Columns >
</ asp:datagrid >
aspx.cs中代码:
在ItemCreated中为每一行的checkbox添加点击事件(调用js)
/// 创建datagrid时,,为checkbox添加js事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void DGItem_ItemCreated( object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
((CheckBox)e.Item.Cells[ 1 ].FindControl( " chkAll " )).Attributes.Add( " onclick " , " CheckAll(' " + this .DGItem.ClientID.ToString() + " ','chkAll','chkSingle'); " );
}
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
((CheckBox)e.Item.Cells[ 1 ].FindControl( " chkSingle " )).Attributes.Add( " onclick " , " CheckSingle(' " + this .DGItem.ClientID.ToString() + " ','chkAll','chkSingle'); " );
}
}
在ItemDataBound中为需要根据数据源显示的项进行判断(如若对应新闻项目已推荐,则显示取消推荐,否则显示我要推荐)
/// 绑定数据时调用事件,设置是否推荐
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void DGItem_ItemDataBound( object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
bool command = System.Boolean.Parse(e.Item.Cells[ 13 ].Text.ToString());
if (command)
{
((LinkButton) e.Item.FindControl( " btnCommand " )).Text = " [取消推荐] " ;
}
else
{
((LinkButton) e.Item.FindControl( " btnCommand " )).Text = " [我要推荐] " ;
}
}
}
根据aspx中设置的CommanName在ItemCommand事件中判断下一步的操作(推荐,评论还是修改?)
/// 检测(评论,推荐,编辑事件 )
/// </summary>
/// <param name="source"></param>
/// <param name="e"></param>
private void DGItem_ItemCommand( object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
e.Item.Cells[ 0 ].Text.ToString();
// this.Response.Write(e.CommandArgument+" name: "+e.CommandName+ e.Item.Cells[0].Text.ToString());
string command = "" + e.CommandName;
string strId = "" + e.Item.Cells[ 0 ].Text.ToString();
int newsId = System.Int32.Parse(strId);
tNewsFac = new DevSec.DH.Ums.DH.Fac.DCtNews();
if (command.Equals( " command " ))
{
string str = ((LinkButton) e.Item.FindControl( " btnCommand " )).Text.ToString() ;
if (str.Equals( " [我要推荐] " ))
{
// 如果设为推荐
tNewsFac.SetCommand(newsId, 1 );
((LinkButton) e.Item.FindControl( " btnCommand " )).Text = " [取消推荐] " ;
}
else
{
// 取消推荐
tNewsFac.SetCommand(newsId, 0 );
((LinkButton) e.Item.FindControl( " btnCommand " )).Text = " [我要推荐] " ;
}
}
else if (command.Equals( " remark " ))
{
this .Response.Redirect( " remark.aspx?newsId= " + newsId);
}
else if (command.Equals( " Edit " ))
{
this .Response.Redirect( " schoolAddEdit.aspx?action=edit&newsId= " + newsId);
}
}
也可以为datagrid上的checkbox绑定后台事件(如对于通过列)
aspx中为:
< HeaderStyle Wrap = " False " Width = " 55px " ></ HeaderStyle >
< ItemStyle HorizontalAlign = " Center " ></ ItemStyle >
< ItemTemplate >
< asp:CheckBox id = cbIsPass runat = " server " Text = " 通过 " OnCheckedChanged = " CheckBox_CheckedChanged " AutoPostBack = " True " Checked = ' <%# DataBinder.Eval(Container, "DataItem.isPass") %> ' >
</ asp:CheckBox >
</ ItemTemplate >
</ asp:TemplateColumn >
.aspx.cs
/// 设置是否通过
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
public void CheckBox_CheckedChanged( object sender, System.EventArgs e)
{
for ( int index = 0 ;index < this .DGItem.Items.Count;index ++ )
{
CheckBox MyCheckBox = (CheckBox)DGItem.Items[index].FindControl( " cbIsPass " );
if (sender.Equals(MyCheckBox))
{
int newsId = System.Int32.Parse(DGItem.Items[index].Cells[ 0 ].Text.ToString());
tNewsFac = new DevSec.DH.Ums.DH.Fac.DCtNews();
tNewsFac.SetPass(newsId);
}
}
// 绑定数据
this .bindData( where );
}
当然还需要定义该控件,且在页面初次调用时绑定数据源(略)
protected System.Web.UI.WebControls.DataGrid DGItem;
this.DGItem.DataSource = dt;
this.DGItem.DataBind();
其中js代码(实现全选以及单选):
参数说明:
prefix:前缀;chkAll:全选框;chkSingle:单选框ID
使用方法:
if(e.Item.ItemType == ListItemType.Header)
{
((CheckBox)e.Item.Cells[1].FindControl("chkAll")).Attributes.Add("onclick","CheckAll('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
}
*/
function CheckAll(prefix,chkAll,chkSingle)
{
var indexChkAll;
if (prefix.length != 0 )
{
indexChkAll = prefix + " __ctl2_ " + chkAll;
}
else
{
indexChkAll = chkAll;
}
var objChkAll = document.getElementById(indexChkAll);
var tempObj;
for ( var i = 0 ;i < document.forms[ 0 ].elements.length;i ++ )
{
tempObj = document.forms[ 0 ].elements[i];
if (tempObj.type == " checkbox " && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != - 1 )
{
tempObj.checked = objChkAll.checked;
}
}
}
/* 分页
参数说明:
prefix:前缀;chkAll:全选框;chkSingle:单选框ID
使用方法:
if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
((CheckBox)e.Item.Cells[1].FindControl("chkSingle")).Attributes.Add("onclick","CheckSingle('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
}
*/
function CheckSingle(prefix,chkAll,chkSingle)
{
var indexChkAll;
if (prefix.length != 0 )
{
indexChkAll = prefix + " __ctl2_ " + chkAll;
}
else
{
indexChkAll = chkAll;
}
var objChkAll = document.getElementById(indexChkAll);
var tempObj;
var allCount = 0 ;
var checkCount = 0 ;
for ( var i = 0 ;i < document.forms[ 0 ].elements.length;i ++ )
{
tempObj = document.forms[ 0 ].elements[i];
if (tempObj.type == " checkbox " && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != - 1 )
{
if (tempObj.checked)
{
checkCount ++ ;
}
else
{
objChkAll.checked = false ;
// break;
}
allCount ++ ;
}
}
if (checkCount != allCount)
{
objChkAll.checked = false ;
}
else
{
if (allCount != 0 )
{
objChkAll.checked = true ;
}
}
}