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

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

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

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

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

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

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

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

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound"
2 AJAX 类似电子表格的功能实现---（续采购授权系统）

CssClass="myGridView" BorderStyle="None" CellPadding="4" CellSpacing="1" HorizontalAlign="Center"
3 AJAX 类似电子表格的功能实现---（续采购授权系统）

DataKeyNames="ModelID,MaterialID,ModelName,MaterialName,TotalAuthAmt,CurrentMonthQues,NextMonthQues,CurrTracing,task,Person,ReplyID"
4 AJAX 类似电子表格的功能实现---（续采购授权系统）

Width="95%">
5 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:TemplateField HeaderText="機型">
7 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:LinkButton ID="linkModelName" runat="server" CausesValidation="false" OnClick="btnEdit_Click"
9 AJAX 类似电子表格的功能实现---（续采购授权系统）

ToolTip="點击新增材料"><%#Eval("ModelName")%></asp:LinkButton>
10 AJAX 类似电子表格的功能实现---（续采购授权系统）

</ItemTemplate>
11 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle HorizontalAlign="Left" />
12 AJAX 类似电子表格的功能实现---（续采购授权系统）

<HeaderStyle Width="10%" />
13 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:TemplateField>
14 AJAX 类似电子表格的功能实现---（续采购授权系统）

<asp:BoundField DataField="MaterialName" HeaderText="材料" ReadOnly="True">
15 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle Width="8%" />
16 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:BoundField>
17 AJAX 类似电子表格的功能实现---（续采购授权系统）

<asp:TemplateField HeaderText="成套數">
18 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle Width="8%" />
19 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:LinkButton ID="linkTotalAmt" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("TotalAuthAmt")%></asp:LinkButton>
21 AJAX 类似电子表格的功能实现---（续采购授权系统）

</ItemTemplate>
22 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:TemplateField>
23 AJAX 类似电子表格的功能实现---（续采购授权系统）

<asp:TemplateField>
24 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle Width="15%" />
25 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:LinkButton ID="linkCurrQues" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("CurrentMonthQues")%></asp:LinkButton>
27 AJAX 类似电子表格的功能实现---（续采购授权系统）

</ItemTemplate>
28 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:TemplateField>
29 AJAX 类似电子表格的功能实现---（续采购授权系统）

<asp:TemplateField>
30 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle Width="15%" />
31 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:LinkButton ID="linkNextQues" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("NextMonthQues")%></asp:LinkButton>
33 AJAX 类似电子表格的功能实现---（续采购授权系统）

</ItemTemplate>
34 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:TemplateField>
35 AJAX 类似电子表格的功能实现---（续采购授权系统）

<asp:TemplateField HeaderText="方案追蹤">
36 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle Width="15%" />
37 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:LinkButton ID="linkCurrTracing" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("CurrTracing")%></asp:LinkButton>
39 AJAX 类似电子表格的功能实现---（续采购授权系统）

</ItemTemplate>
40 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:TemplateField>
41 AJAX 类似电子表格的功能实现---（续采购授权系统）

<asp:TemplateField HeaderText="交期">
42 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:LinkButton ID="linktask" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("task")%></asp:LinkButton>
44 AJAX 类似电子表格的功能实现---（续采购授权系统）

</ItemTemplate>
45 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle HorizontalAlign="Left" Width="15%" />
46 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:TemplateField>
47 AJAX 类似电子表格的功能实现---（续采购授权系统）

<asp:TemplateField HeaderText="採購">
48 AJAX 类似电子表格的功能实现---（续采购授权系统）

<ItemStyle Width="10%" />
49 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<asp:LinkButton ID="linkPersonDeal" runat="server" CausesValidation="false" OnClick="btnEdit1_Click"><%#Eval("Person")%></asp:LinkButton>
51 AJAX 类似电子表格的功能实现---（续采购授权系统）

</ItemTemplate>
52 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:TemplateField>
53 AJAX 类似电子表格的功能实现---（续采购授权系统）

</Columns>
54 AJAX 类似电子表格的功能实现---（续采购授权系统）

<HeaderStyle BackColor="#EFEFEF" BorderColor="#999999" />
55 AJAX 类似电子表格的功能实现---（续采购授权系统）

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

<font color="red"><b>對不起,該機型沒有數據!</b></font>
57 AJAX 类似电子表格的功能实现---（续采购授权系统）

</EmptyDataTemplate>
58 AJAX 类似电子表格的功能实现---（续采购授权系统）

</asp:GridView>

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

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

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

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

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

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
2 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
3

string currentMonth = DateTime.Now.ToString("yyyy-MM-01", DateTimeFormatInfo.InvariantInfo);
4 AJAX 类似电子表格的功能实现---（续采购授权系统）

if (e.Row.RowType == DataControlRowType.Header)
5 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
6

e.Row.Cells[3].Text = Convert.ToDateTime(currentMonth).Month.ToString() + " 月問題點";
7 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[4].Text = Convert.ToDateTime(currentMonth).AddMonths(1).Month.ToString() + " 月問題點";
8 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
9

int rowindex = e.Row.RowIndex;
10 AJAX 类似电子表格的功能实现---（续采购授权系统）

if (rowindex != -1)
11 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
12

if (e.Row.RowType == DataControlRowType.DataRow)
13 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
14

LinkButton linktask = (LinkButton)e.Row.FindControl("linktask");
15 AJAX 类似电子表格的功能实现---（续采购授权系统）

LinkButton linkCurrQues = (LinkButton)e.Row.FindControl("linkCurrQues");
16 AJAX 类似电子表格的功能实现---（续采购授权系统）

LinkButton linkNextQues = (LinkButton)e.Row.FindControl("linkNextQues");
17 AJAX 类似电子表格的功能实现---（续采购授权系统）

LinkButton linkCurrTracing = (LinkButton)e.Row.FindControl("linkCurrTracing");
18 AJAX 类似电子表格的功能实现---（续采购授权系统）

LinkButton linkPersonDeal = (LinkButton)e.Row.FindControl("linkPersonDeal");
19 AJAX 类似电子表格的功能实现---（续采购授权系统）

if ((GridView1.DataKeys[e.Row.RowIndex]["CurrentMonthQues"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
20 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
21

string js1 = this.Page.ClientScript.GetPostBackClientHyperlink(linkCurrQues, "");
23 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[3].Attributes.Add("onClick", "Javascript:" + js1 + ";");
24 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[3].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
25 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[3].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
26 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[3].ToolTip = "點击單元格對" + Convert.ToDateTime(currentMonth).Month.ToString() + " 月問題點進行修改";
27 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
29

if ((GridView1.DataKeys[e.Row.RowIndex]["NextMonthQues"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
31 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
32

string js2 = this.Page.ClientScript.GetPostBackClientHyperlink(linkNextQues, "");
33 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[4].Attributes.Add("onClick", "Javascript:" + js2 + ";");
34 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[4].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
35 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[4].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
36 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[4].ToolTip = "點击單元格對" + Convert.ToDateTime(currentMonth).AddMonths(1).Month.ToString() + " 月問題點進行修改";
37 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
38

if ((GridView1.DataKeys[e.Row.RowIndex]["CurrTracing"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
40 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
41

string js3 = this.Page.ClientScript.GetPostBackClientHyperlink(linkCurrTracing, "");
42 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[5].Attributes.Add("onClick", "Javascript:" + js3 + ";");
43 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[5].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
44 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[5].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
45 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[5].ToolTip = "點击單元格對方案追蹤進行修改";
46 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
47

if ((GridView1.DataKeys[e.Row.RowIndex]["task"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
49 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
50

string js4 = this.Page.ClientScript.GetPostBackClientHyperlink(linktask, "");
51 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[6].Attributes.Add("onClick", "Javascript:" + js4 + ";");
52 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[6].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
53 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[6].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
54 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[6].ToolTip = "點击單元格對交期進行修改";
55 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
56

if ((GridView1.DataKeys[e.Row.RowIndex]["Person"].ToString().Trim() == string.Empty) && (GridView1.DataKeys[e.Row.RowIndex][3].ToString().Trim() != string.Empty))
58 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
59

string js5 = this.Page.ClientScript.GetPostBackClientHyperlink(linkPersonDeal, "");
60 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[7].Attributes.Add("onClick", "Javascript:" + js5 + ";");
61 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[7].Attributes.Add("onmouseover", "javerscript:this.style.cursor='hand';this.style.backgroundColor='#c8e3ff';");
62 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[7].Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
63 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[7].ToolTip = "點击單元格對採購進行修改";
64 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
65

}
66

}
67

if (rowindex - 1 < 0)
69 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
70

if (rowindex == 0)
71 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
72

if (GridView1.DataKeys[e.Row.RowIndex][3].ToString() == string.Empty)
73 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
74

e.Row.Cells[2].Text = string.Empty;
75 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[3].Text = string.Empty;
76 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[4].Text = string.Empty;
77 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[5].Text = string.Empty;
78 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[6].Text = string.Empty;
79 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[7].Text = string.Empty;
80 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
81

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

}
83

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

}
85

if (GridView1.DataKeys[e.Row.RowIndex][3].ToString() == string.Empty)
87 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
88

e.Row.Cells[2].Text = string.Empty;
89 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[3].Text = string.Empty;
90 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[4].Text = string.Empty;
91 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[5].Text = string.Empty;
92 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[6].Text = string.Empty;
93 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[7].Text = string.Empty;
94 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
95

if (GridView1.DataKeys[e.Row.RowIndex][0].ToString() == GridView1.DataKeys[e.Row.RowIndex - 1][0].ToString())
97 AJAX 类似电子表格的功能实现---（续采购授权系统）

{
98

if (GridView1.Rows[row].Cells[0].RowSpan == 0)
99 AJAX 类似电子表格的功能实现---（续采购授权系统）

GridView1.Rows[row].Cells[0].RowSpan++;
100 AJAX 类似电子表格的功能实现---（续采购授权系统）

GridView1.Rows[row].Cells[0].RowSpan++;
101 AJAX 类似电子表格的功能实现---（续采购授权系统）

e.Row.Cells[0].Visible = false;
102 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
103

else
104

{
105

row = rowindex;
106 AJAX 类似电子表格的功能实现---（续采购授权系统）

}
107

}

这样就完成了！
效果：
AJAX 类似电子表格的功能实现---（续采购授权系统）

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

转载于:https://www.cnblogs.com/szbaby1221/archive/2008/01/14/1037933.html

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

相关推荐