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

本文介绍了一个仿Excel的表格编辑功能实现方法，通过设置GridView控件使得用户即使在数据为空的情况下也能进行编辑操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

下面我正式介绍：
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

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

}
29

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

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

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

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