AJAX 类似电子表格的功能实现（续采购授权系统）

我完成的小系统中存在很多设计疑问，希望大家可以回复我上一篇的几点疑问。

现在我给大家分享的是类似电子表格的实现。其实就是一个小技巧了。小弟也是到处看，才写出的一个小功能。
其实我并不想那么做，但是用户就必须那样，我没有办法，客户，就是那么的要求。

下面我正式介绍：
1：需求背景
怎么说呢？你可以这样想。你的客户以前是用Excel的,那EXCEL其实就是一张总情况报告。现在BOSS不干了，说你们怎么就给我一张报表呢？你们历史记录我怎么看呢。张三，你1月做了什么？（张三： 啊，我不记得了。干得事情太多了）这样这个系统需求就产生了。我就是说了一个方面，其实好处还不是这样的......

2：用户要求的操作界面
用户A:我以前就是用EXCEL操作的，我现在还要和EXCEL一样。其它的我不干。你不能让我选来选去的。我很忙的。
用户B:我的记录其实和用户A有一定的逻辑关系在里面的，但是情况又不一定，有时间开会来决定。
BOSS： 你进去就给我看到所有的东西，我想点哪里就哪里，我想修改就修改，我想增加就增加，你不要让我到处跑，到处选，我不干。不允许你分页，那样我看得不方便，不要你给我查询，我不想选。选来选去多麻烦。
开发人员：我答应你们（），老板慢你不要怪我哦。以后不能扩展你不能怪我哦。你的手下，用起来不舒服你不要怪我哦。总之你不能怪我哦。

开始工作，开发人员争取到30天时间，来开始系统。BOSS说，其实你这个5天就可以完成了。

不说废话了，对不起，下面正式
效果描述
1：点击GridView中任何地方都可以新增修改效果和EXCEL操作一样

GridView1
 1  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound"
 2                    CssClass="myGridView" BorderStyle="None" CellPadding="4" CellSpacing="1" HorizontalAlign="Center"
 3                    DataKeyNames="ModelID,MaterialID,ModelName,MaterialName,TotalAuthAmt,CurrentMonthQues,NextMonthQues,CurrTracing,task,Person,ReplyID"
 4                    Width="95%">
 5                    <Columns>
 6                        <asp:TemplateField HeaderText="機型">
 7                            <ItemTemplate>
 8                                <asp:LinkButton ID="linkModelName" runat="server" CausesValidation="false" OnClick="btnEdit_Click"
 9                                    ToolTip="點击新增材料"><%#Eval("ModelName")%></asp:LinkButton>
10                            </ItemTemplate>
11                            <ItemStyle HorizontalAlign="Left" />
12                            <HeaderStyle Width="10%" />
13                        </asp:TemplateField>
14                        <asp:BoundField DataField="MaterialName" HeaderText="材料" ReadOnly="True">
15                            <ItemStyle Width="8%" />
16                        </asp:BoundField>
17                        <asp:TemplateField HeaderText="成套數">
18                            <ItemStyle Width="8%" />
19                            <ItemTemplate>
20                                <asp:LinkButton ID="linkTotalAmt" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("TotalAuthAmt")%></asp:LinkButton>
21                            </ItemTemplate>
22                        </asp:TemplateField>
23                        <asp:TemplateField>
24                            <ItemStyle Width="15%" />
25                            <ItemTemplate>
26                                <asp:LinkButton ID="linkCurrQues" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("CurrentMonthQues")%></asp:LinkButton>
27                            </ItemTemplate>
28                        </asp:TemplateField>
29                        <asp:TemplateField>
30                            <ItemStyle Width="15%" />
31                            <ItemTemplate>
32                                <asp:LinkButton ID="linkNextQues" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("NextMonthQues")%></asp:LinkButton>
33                            </ItemTemplate>
34                        </asp:TemplateField>
35                        <asp:TemplateField HeaderText="方案追蹤">
36                            <ItemStyle Width="15%" />
37                            <ItemTemplate>
38                                <asp:LinkButton ID="linkCurrTracing" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("CurrTracing")%></asp:LinkButton>
39                            </ItemTemplate>
40                        </asp:TemplateField>
41                        <asp:TemplateField HeaderText="交期">
42                            <ItemTemplate>
43                                <asp:LinkButton ID="linktask" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("task")%></asp:LinkButton>
44                            </ItemTemplate>
45                            <ItemStyle HorizontalAlign="Left" Width="15%" />
46                        </asp:TemplateField>
47                        <asp:TemplateField HeaderText="採購">
48                            <ItemStyle Width="10%" />
49                            <ItemTemplate>
50                                <asp:LinkButton ID="linkPersonDeal" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("Person")%></asp:LinkButton>
51                            </ItemTemplate>
52                        </asp:TemplateField>
53                    </Columns>
54                    <HeaderStyle BackColor="#EFEFEF" BorderColor="#999999" />
55                    <EmptyDataTemplate>
56                        <font color="red"><b>對不起,該機型沒有數據!</b></font>
57                    </EmptyDataTemplate>
58                </asp:GridView>

不用说LinkButton是有记录的时候用户可以直接编辑。但是当没有数据的时候呢，那么就是一片空白。你怎么编辑呢？

（开始时，开发人员：老板我放一个图片还可以啊？不行，那么我放个白图片呢？不行，我不想看到任何东西！还好万能的google救了我）

解决方案:给单元格数据为空的一段JS代码。
注意：  string js1 = this.Page.ClientScript.GetPostBackClientHyperlink(linkCurrQues, "");
可以取到原来LinkButton PostBack的JS

代码不好看，大家不要批评
后台代码：

GridView1_RowDataBound
  1  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  2    {
  3        string currentMonth = DateTime.Now.ToString("yyyy-MM-01", DateTimeFormatInfo.InvariantInfo);
  4        if (e.Row.RowType == DataControlRowType.Header)
  5        {
  6            e.Row.Cells[3].Text = Convert.ToDateTime(currentMonth).Month.ToString() + " 月問題點";
  7            e.Row.Cells[4].Text = Convert.ToDateTime(currentMonth).AddMonths(1).Month.ToString() + " 月問題點";
  8        }
  9        int rowindex = e.Row.RowIndex;
 10        if (rowindex != -1)
 11        {
 12            if (e.Row.RowType == DataControlRowType.DataRow)
 13            {
 14                LinkButton linktask = (LinkButton)e.Row.FindControl("linktask");
 15                LinkButton linkCurrQues = (LinkButton)e.Row.FindControl("linkCurrQues");
 16                LinkButton linkNextQues = (LinkButton)e.Row.FindControl("linkNextQues");
 17                LinkButton linkCurrTracing = (LinkButton)e.Row.FindControl("linkCurrTracing");
 18                LinkButton linkPersonDeal = (LinkButton)e.Row.FindControl("linkPersonDeal");
 19                if ((GridView1.DataKeys[e.Row.RowIndex]["CurrentMonthQues"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
 20                {
 21
 22                    string js1 = this.Page.ClientScript.GetPostBackClientHyperlink(linkCurrQues, "");
 23                    e.Row.Cells[3].Attributes.Add("onClick", "Javascript:" + js1 + ";");
 24                    e.Row.Cells[3].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
 25                    e.Row.Cells[3].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
 26                    e.Row.Cells[3].ToolTip = "點击單元格對" + Convert.ToDateTime(currentMonth).Month.ToString() + " 月問題點進行修改";
 27
 28                }
 29
 30                if ((GridView1.DataKeys[e.Row.RowIndex]["NextMonthQues"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
 31                {
 32                    string js2 = this.Page.ClientScript.GetPostBackClientHyperlink(linkNextQues, "");
 33                    e.Row.Cells[4].Attributes.Add("onClick", "Javascript:" + js2 + ";");
 34                    e.Row.Cells[4].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
 35                    e.Row.Cells[4].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
 36                    e.Row.Cells[4].ToolTip = "點击單元格對" + Convert.ToDateTime(currentMonth).AddMonths(1).Month.ToString() + " 月問題點進行修改";
 37                }
 38
 39                if ((GridView1.DataKeys[e.Row.RowIndex]["CurrTracing"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
 40                {
 41                    string js3 = this.Page.ClientScript.GetPostBackClientHyperlink(linkCurrTracing, "");
 42                    e.Row.Cells[5].Attributes.Add("onClick", "Javascript:" + js3 + ";");
 43                    e.Row.Cells[5].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
 44                    e.Row.Cells[5].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
 45                    e.Row.Cells[5].ToolTip = "點击單元格對方案追蹤進行修改";
 46                }
 47
 48                if ((GridView1.DataKeys[e.Row.RowIndex]["task"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
 49                {
 50                    string js4 = this.Page.ClientScript.GetPostBackClientHyperlink(linktask, "");
 51                    e.Row.Cells[6].Attributes.Add("onClick", "Javascript:" + js4 + ";");
 52                    e.Row.Cells[6].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
 53                    e.Row.Cells[6].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
 54                    e.Row.Cells[6].ToolTip = "點击單元格對交期進行修改";
 55                }
 56
 57                if ((GridView1.DataKeys[e.Row.RowIndex]["Person"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
 58                {
 59                    string js5 = this.Page.ClientScript.GetPostBackClientHyperlink(linkPersonDeal, "");
 60                    e.Row.Cells[7].Attributes.Add("onClick", "Javascript:" + js5 + ";");
 61                    e.Row.Cells[7].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
 62                    e.Row.Cells[7].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
 63                    e.Row.Cells[7].ToolTip = "點击單元格對採購進行修改";
 64                }
 65            }
 66        }
 67
 68        if (rowindex - 1 < 0)
 69        {
 70            if (rowindex == 0)
 71            {
 72                if (GridView1.DataKeys[e.Row.RowIndex][3].ToString() == string.Empty)
 73                {
 74                    e.Row.Cells[2].Text = string.Empty;
 75                    e.Row.Cells[3].Text = string.Empty;
 76                    e.Row.Cells[4].Text = string.Empty;
 77                    e.Row.Cells[5].Text = string.Empty;
 78                    e.Row.Cells[6].Text = string.Empty;
 79                    e.Row.Cells[7].Text = string.Empty;
 80                }
 81                return;
 82            }
 83            return;
 84        }
 85
 86        if (GridView1.DataKeys[e.Row.RowIndex][3].ToString() == string.Empty)
 87        {
 88            e.Row.Cells[2].Text = string.Empty;
 89            e.Row.Cells[3].Text = string.Empty;
 90            e.Row.Cells[4].Text = string.Empty;
 91            e.Row.Cells[5].Text = string.Empty;
 92            e.Row.Cells[6].Text = string.Empty;
 93            e.Row.Cells[7].Text = string.Empty;
 94        }
 95
 96        if (GridView1.DataKeys[e.Row.RowIndex][0].ToString() == GridView1.DataKeys[e.Row.RowIndex - 1][0].ToString())
 97        {
 98            if (GridView1.Rows[row].Cells[0].RowSpan == 0)
 99                GridView1.Rows[row].Cells[0].RowSpan++;
100            GridView1.Rows[row].Cells[0].RowSpan++;
101            e.Row.Cells[0].Visible = false;
102        }
103        else
104        {
105            row = rowindex;
106        }
107    }

这样就完成了！
效果：




其实是很简单的东西，只不过我花了很多几天才完成。大家碰到这样的问题。可以和我讨论。


转自:http://www.cnblogs.com/szbaby1221/archive/2008/01/14/1037933.html