.net之 datagrid
(自己参加的这个项目中)数据绑定控件除了上节的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中代码:
代码
<asp:datagrid id="DGItem" runat="server" Width="100%" PageSize="40" AutoGenerateColumns="False"
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>
<cc1:userlinkbutton id="btnRemark" runat="server" ToolTip="管理评论" CommandName="remark">[评论]</cc1:userlinkbutton>
<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>
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>
<cc1:userlinkbutton id="btnRemark" runat="server" ToolTip="管理评论" CommandName="remark">[评论]</cc1:userlinkbutton>
<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)
代码 /// <summary>
/// 创建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');");
}
}
/// 创建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>
/// 绑定数据时调用事件,设置是否推荐
/// </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="[我要推荐]" ;
}
}
}
/// 绑定数据时调用事件,设置是否推荐
/// </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>
/// 检测(评论,推荐,编辑事件 )
/// </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);
}
}
/// 检测(评论,推荐,编辑事件 )
/// </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中为:
代码 <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>
<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>
/// 设置是否通过
/// </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);
}
/// 设置是否通过
/// </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;
}
}
}
参数说明：
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;
}
}
}
