前几天，要求在HR系统中添加一个可以对每月第一个上班日进行登记管理的WEB窗口，哎，一见WEB窗口我就头痛，没有办法，硬着头皮上阵，网上寻找了一些资料，马马虎虎完成了以下窗口界面：
可以在一个窗口上进行记录的添加、修改和删除，当编辑或者删除、修改时也可以先有提示，为了防止用户乱输入，我让用户通过下拉框来选择年、月、日。
下面就是详细的设计过程：
1 在APP_CODE目录下添加一个辅助类，类中实现了3个静态方法，分别是取年、月、日，以作为年、月、日下拉框中的项：
public class FirstWorkDayAssist
{
public static List<suYear> getYear()
{
List<suYear> list = new List<suYear>();
for (int i = 2007; i <= 2020; ++i)
{
suYear temp = new suYear();
temp.FYear = i.ToString();
list.Add(temp);
}
return list;
}
public static List<suMonth> getMonth()
{
List<suMonth> list = new List<suMonth>();
for (int i = 1; i <= 12; ++i)
{
suMonth temp = new suMonth();
temp.FMonth = i.ToString();
list.Add(temp);
}
return list;
}
public static List<suDay> getDay()
{
List<suDay> list = new List<suDay>();
for (int i = 1; i <= 31; ++i)
{
suDay temp = new suDay();
temp.FDay = i.ToString();
list.Add(temp);
}
return list;
}
}
public class suYear
{
private string _fYear;
public string FYear
{
get { return _fYear; }
set { _fYear = value; }
}
}
public class suMonth
{
private string _fMonth;
public string FMonth
{
get { return _fMonth; }
set { _fMonth = value; }
}
}
public class suDay
{
private string _fDay;
public string FDay
{
get { return _fDay; }
set { _fDay = value; }
}
}
2 在ASP窗口中添加一个GRIDVIEW，GRIDVIEW如下：
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit"
OnRowDataBound="GridView1_RowDataBound" OnRowDeleting="GridView1_RowDeleting"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating"
ShowFooter="True" Width="542px" BorderColor="Coral" BorderWidth="1px" Font-Size="10pt" >
<Columns>
<asp:TemplateField HeaderText="年">
<EditItemTemplate>
<asp:DropDownList ID ="ddl1" runat="server" SelectedValue='<%# Bind("FYear") %>' DataSourceID="ObjectDataSource1" DataTextField="FYear" DataValueField="FYear">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="FirstWorkDayAssist" SelectMethod="getYear">
</asp:ObjectDataSource>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID ="ddl2" runat="server" DataSourceID="ObjectDataSource1" DataTextField="FYear" DataValueField="FYear">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="FirstWorkDayAssist" SelectMethod="getYear">
</asp:ObjectDataSource>
</FooterTemplate>
<ItemStyle BorderWidth="2px" />
<HeaderStyle BorderWidth="2px" />
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("FYear") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="月">
<EditItemTemplate>
<asp:DropDownList ID ="ddl3" runat="server" SelectedValue='<%# Bind("FMonth") %>' DataSourceID="ObjectDataSource2" DataTextField="FMonth" DataValueField="FMonth">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" TypeName="FirstWorkDayAssist" SelectMethod="getMonth">
</asp:ObjectDataSource>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID ="ddl4" runat="server" DataSourceID="ObjectDataSource2" DataTextField="FMonth" DataValueField="FMonth">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" TypeName="FirstWorkDayAssist" SelectMethod="getMonth">
</asp:ObjectDataSource>
</FooterTemplate>
<ItemStyle BorderWidth="2px" />
<HeaderStyle BorderWidth="2px" />
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("FMonth") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="第一个工作日">
<EditItemTemplate>
<asp:DropDownList ID ="ddl5" runat="server" SelectedValue='<%# Bind("FDay") %>' DataSourceID="ObjectDataSource3" DataTextField="FDay" DataValueField="FDay">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource3" runat="server" TypeName="FirstWorkDayAssist" SelectMethod="getDay">
</asp:ObjectDataSource>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID ="ddl6" runat="server" DataSourceID="ObjectDataSource3" DataTextField="FDay" DataValueField="FDay">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource3" runat="server" TypeName="FirstWorkDayAssist" SelectMethod="getDay">
</asp:ObjectDataSource>
</FooterTemplate>
<ItemStyle BorderWidth="2px" />
<HeaderStyle BorderWidth="2px" />
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("FDay") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="操作" ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"
Text="更新"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"
Text="取消"></asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" OnClick="Button2_Click"
OnClientClick="return confirm('确认要添加吗？');" Text="添加"></asp:LinkButton>
<%--<asp:Button ID="Button2" runat="server" O Text="添加" />--%>
</FooterTemplate>
<ItemStyle BorderWidth="2px" />
<HeaderStyle BorderWidth="2px" />
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit"
Text="编辑"></asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Delete"
OnClientClick="return confirm('确认要删除吗？');" Text="删除"></asp:LinkButton>
<%--<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Select"
Text="选择"></asp:LinkButton>--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle ForeColor="ForestGreen" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<HeaderStyle BackColor="White" Font-Bold="False" ForeColor="Black" />
<AlternatingRowStyle BackColor="#EFEFFF" />
<FooterStyle BackColor="#C0C0FF" />
</asp:GridView>
注意，所有的项都为TemplateField，里面都定义了ItemTemplate、EditItemTemplate和FooterTemplate，其中ItemTemplate为正常浏览时的显示，EditItemTemplate为处于编辑状态的形式，而FooterTemplate则是为了用来添加记录；定义了3个ObjectDataSource，使下拉框和相应的数据源绑定，如绑定月份：
<asp:DropDownList ID ="ddl3" runat="server" SelectedValue='<%# Bind("FMonth") %>' DataSourceID="ObjectDataSource2" DataTextField="FMonth" DataValueField="FMonth">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" TypeName="FirstWorkDayAssist" SelectMethod="getMonth">
</asp:ObjectDataSource>
3 CS文件中代码实现：
由于平时喜欢在GUI和DB之间添加一些业务逻辑类，所以我针对这个有用定义了一个简单的类：
class suFirstWorkDay
{
private string _fId;
public string FId
{
get { return _fId; }
set { _fId = value; }
}
private string _fYear;
public string FYear
{
get { return _fYear; }
set { _fYear = value; }
}
private string _fMonth;
public string FMonth
{
get { return _fMonth; }
set { _fMonth = value; }
}
private string _fDay;
public string FDay
{
get { return _fDay; }
set { _fDay = value; }
}
public suFirstWorkDay(string id, string year, string month, string day)
{
_fId = id;
_fYear = year;
_fMonth = month;
_fDay = day;
}
}
在数据显示时，用GRIDVIEW来保定数据源List<suFirstWorkDay>来实现。
其它代码如下，请自己认真查看：
public partial class Trace_FirstWorkDay : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//if (userid < 0)
//{
// Mess.Alert("你没有权限查看数据！", Page); return;
//}
if (!this.IsPostBack)
{
GridViewBind();
}
}
/// <summary>
/// 绑定数据到GridView
/// </summary>
private void GridViewBind()
{
string strSql = "select fid, fyear,fmonth,fday from hr_firstworkday order by fyear,fmonth,fday";
DataSet ds = new DataSet();
ds = MyPub.Conn.getDs("a", strSql, 0);
List<suFirstWorkDay> list = new List<suFirstWorkDay>();
for (int i=0; i<ds.Tables[0].Rows.Count; ++i)
{
suFirstWorkDay temp = new suFirstWorkDay(
ds.Tables[0].Rows[i][0].ToString(),
ds.Tables[0].Rows[i][1].ToString(),
ds.Tables[0].Rows[i][2].ToString(),
ds.Tables[0].Rows[i][3].ToString());
list.Add(temp);
}
this.GridView1.DataSource = list;
this.GridView1.DataKeyNames = new string[] { "FId" };
this.GridView1.DataBind();
}
/// <summary>
/// 编辑当前行
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
//当前编辑行背景色高亮
this.GridView1.EditRowStyle.BackColor = System.Drawing.Color.FromName("#F7CE90");
GridViewBind();
}
/// <summary>
/// 取消编辑状态
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
GridViewBind();
}
/// <summary>
/// 删除记录过程
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string id = GridView1.DataKeys[e.RowIndex].Values[0].ToString();
//从数据库中删除
string str = "delete from hr_firstworkday where FID={0}";
str = string.Format(str, id);
try
{
MyPub.Conn.runSql(str, 0);
//重新绑定数据
GridViewBind();
}
catch (Exception ex)
{
Response.Write("数据库错误，错误原因：" + ex.Message);
Response.End();
}
}
/// <summary>
/// 更新记录过程
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string id = GridView1.DataKeys[e.RowIndex].Values[0].ToString();
string year = ((DropDownList)GridView1.Rows[e.RowIndex].FindControl("ddl1")).SelectedItem.Value;
string month = ((DropDownList)GridView1.Rows[e.RowIndex].FindControl("ddl3")).SelectedItem.Value;
string day = ((DropDownList)GridView1.Rows[e.RowIndex].FindControl("ddl5")).SelectedItem.Value;
string strSql = "update hr_firstworkday set fyear={0},fmonth={1},fday={2} where FID={3}";
strSql = string.Format(strSql, year, month, day, id);
try
{
MyPub.Conn.runSql(strSql, 0);
//返回浏览状态
GridView1.EditIndex = -1;
//重新绑定数据
GridViewBind();
}
catch (Exception ex)
{
Response.Write("数据库错误，错误原因：" + ex.Message);
Response.End();
}
}
/// <summary>
/// 分页事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridViewBind();
}
/// <summary>
/// 加入鼠标效果及为DropDownList绑定值
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//加入鼠标滑过的高亮效果
if (e.Row.RowType == DataControlRowType.DataRow)//判定当前的行是否属于datarow类型的行
{
//当鼠标放上去的时候 先保存当前行的背景颜色 并给附一颜色
e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='yellow',this.style.fontWeight='';");
//当鼠标离开的时候 将背景颜色还原的以前的颜色
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor,this.style.fontWeight='';");
}
//单击行改变行背景颜色
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onclick", "this.style.backgroundColor='#99cc00'; this.style.color='buttontext';this.style.cursor='default';");
}
}
protected void Button2_Click(object sender, EventArgs e)
{
string year = (GridView1.FooterRow.FindControl("ddl2") as DropDownList).SelectedValue;
string month = (GridView1.FooterRow.FindControl("ddl4") as DropDownList).SelectedValue;
string day = (GridView1.FooterRow.FindControl("ddl6") as DropDownList).SelectedValue;
string str = "select count(*) from hr_firstworkday where fyear={0} and fmonth={1} and fday={2}";
str = string.Format(str, year, month, day);
string strSql = "insert into hr_firstworkday(fyear,fmonth,fday) values({0},{1},{2})";
strSql = string.Format(strSql, year, month, day);
try
{
MyPub.Conn.runSql(strSql, 0);
//返回浏览状态
GridView1.EditIndex = -1;
//重新绑定数据
GridViewBind();
}
catch (Exception ex)
{
Response.Write("数据库错误，错误原因：" + ex.Message);
Response.End();
}
}
}
希望能够给需要相关功能实现的朋友带来一些帮助，同时也希望大家一起来讨论。