none
关于带模板列的GridView增删行及刷新问题 RRS feed

  • 问题

  • 有个带了各种模板的GridView,现在增加一行和删除一行是在后台进行的,结果就是每次增删都要刷一次表格,而表格的显示也每次都回到开头,能不能把加行和减行放在前台做?
    2009年11月27日 9:13

答案

  • 那你直接改用table操作就行了。
    参考下面代码试试。
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System" %>
    <%@ Import Namespace="System.Configuration" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Linq" %>
    <%@ Import Namespace="System.Web" %>
    <%@ Import Namespace="System.Web.Security" %>
    <%@ Import Namespace="System.Web.UI" %>
    <%@ Import Namespace="System.Web.UI.HtmlControls" %>
    <%@ Import Namespace="System.Web.UI.WebControls" %>
    <%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>
    <%@ Import Namespace="System.Web.Services" %>
    <%@ Import Namespace="System.ComponentModel" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        public DataTable GenerateDT
        {
            get
            {
                if (ViewState["ds"] != null)
                {
                    return (ViewState["ds"] as DataSet).Tables[0];
    
                }
                else
                {
                    DataTable dt = new DataTable();
                    dt.Columns.Add("Id", typeof(int));
                    dt.Columns.Add("Test1", typeof(string));
                    dt.Columns.Add("Test2", typeof(string));
                    dt.Columns.Add("Test3", typeof(string));
                    dt.Columns.Add("UserName", typeof(string));
                    dt.Columns.Add("Password", typeof(string));
                    dt.Columns.Add("Bool", typeof(System.Boolean));
                    dt.PrimaryKey = new DataColumn[] { dt.Columns[0] };
                    DataRow dr1 = dt.NewRow();
                    dr1[0] = "1";
                    dr1[1] = "red";
                    dr1[2] = "test3";
                    dr1[3] = "test3";
                    dr1[4] = "Name1";
                    dr1[5] = "";
                    dr1[6] = true;
                    dt.Rows.Add(dr1);
                    DataRow dr2 = dt.NewRow();
                    dr2[0] = "2";
                    dr2[1] = "blue";
                    dr2[2] = "test3";
                    dr2[3] = "test3";
                    dr2[4] = "Name2";
                    dr2[5] = "2";
                    dr2[6] = true;
                    dt.Rows.Add(dr2);
                    DataRow dr3 = dt.NewRow();
                    dr3[0] = "3";
                    dr3[1] = "yellow";
                    dr3[2] = "test3";
                    dr3[3] = "test3";
                    dr3[4] = "Name2";
                    dr3[5] = "";
                    dr3[6] = true;
                    dt.Rows.Add(dr3);
                    DataSet ds = new DataSet();
                    ds.Tables.Add(dt);
                    ViewState["ds"] = ds;
                    return dt;
    
                }
            }
            set { ViewState["ds"] = value; }
        }
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
       
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table cellspacing="0"  border="1" id="table1" style="border-collapse:collapse;">
    <thead>
    
    
    		<tr>
    			<th scope="col">&nbsp;</th><th scope="col">Id</th><th scope="col">Test1</th><th scope="col">Test2</th><th scope="col">Test3</th><th scope="col">UserName</th><th scope="col">Password</th>
    		</tr>
    		</thead>
    <tbody id="testBody">
    		<%int rows =0;
        string indexCollection =",";	
    		        %>
            <% foreach (DataRow item in GenerateDT.Rows)
               {
                   indexCollection += rows.ToString()+",";%>
               <tr id='<%="tr"+rows.ToString() %>'>
                   <td><input  type="button" onclick="addRow(<%=rows %>)" value="Add Row" id="<%="row"+rows.ToString()+"Button0" %>"/><input  type="button" onclick="deleteRow(<%=rows %>)" value="Delete Row" id="<%="row"+rows.ToString()+"Button1" %>"/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text0" %>" type="text"  value='<%=item[0] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text1" %>" type="text"  value='<%=item[1] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text2" %>" type="text"  value='<%=item[2] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text3" %>" type="text"  value='<%=item[3] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text4" %>" type="text"  value='<%=item[4] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text5" %>" type="text"  value='<%=item[5] %>'/></td>
           </tr>
            <% rows++;
               } %>
             
               </tbody>
        </table>
        <input id="Hidden1" type="hidden" />
        <script type="text/javascript" language="javascript">
        var indexCollection=<%="\""+indexCollection.ToString()+"\"" %>;
        setHiddenField();
        var rows=<%=rows %>;
            function addRow(index) {
         
            rows=rows+1;
            var newTr="<tr id=\"tr"+rows+"\"><td><input type=\"button\" onclick=\"addRow('"+rows+"')\""+" value=\"Add Row\" id=\""+"row"+rows+"Button0"+"\"/>"
            +"<input type=\"button\" onclick=\"deleteRow('"+rows+"')\""+" value=\"Delete Row\" id=\""+"row"+rows+"Button1"+"\"/>"
            +"<td><input id=\""+"row"+rows+"Text0"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text1"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text2"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text3"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text4"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text5"+"\" type=\"text\"/></td></tr>";        
    indexCollection=indexCollection+rows+",";
                  $("#testBody").html($("#testBody").html()+newTr);
                  
                  setHiddenField();
            }
        function deleteRow(index)
        {
        var reg=new RegExp("\\,"+index+"\\,");
        indexCollection=indexCollection.replace(reg,",");
        var row=document.getElementById("tr"+index);
        document.getElementById("table1").deleteRow(row.rowIndex);
        setHiddenField();
        }
        function setHiddenField()
        {
         document.getElementById("Hidden1").value=indexCollection.toString();
        }
        </script>
        </div>
       
        
        </form>
    </body>
    </html>
    

    Microsoft Online Community Support
    2009年11月30日 6:56

全部回复

  • 你这是开发控件 还是使用gridview?
    最简单是用个asp.net ajax控件
    努力学习wpf
    2009年11月27日 9:17
  • 使用gridview,用updatepanel包起来就可以了吗?
    2009年11月27日 9:43
  • 是的!


    努力学习wpf
    2009年11月27日 10:42
  • 可以放在前台做,
    表格的显示也每次都回到开头?
    也可以使用cookie控制位置,很简单
    【孟子E章】
    2009年11月28日 2:26
    版主
  • 求在前台增删行的例子,带模板列的 m(_ _)m

    2009年11月30日 1:05

  • 前台增删是否会有相应的数据的增删?

    比如说你在前端删除一行后,那数据库是否也要删除一条数据?
    Microsoft Online Community Support
    2009年11月30日 1:27
  • 数据库不改变,操作上是所有内容输入完毕后一起保存的,在按下指定的SAVE按钮之前,任何操作都和数据库无关

    2009年11月30日 2:08
  • 那你直接改用table操作就行了。
    参考下面代码试试。
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System" %>
    <%@ Import Namespace="System.Configuration" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Linq" %>
    <%@ Import Namespace="System.Web" %>
    <%@ Import Namespace="System.Web.Security" %>
    <%@ Import Namespace="System.Web.UI" %>
    <%@ Import Namespace="System.Web.UI.HtmlControls" %>
    <%@ Import Namespace="System.Web.UI.WebControls" %>
    <%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>
    <%@ Import Namespace="System.Web.Services" %>
    <%@ Import Namespace="System.ComponentModel" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        public DataTable GenerateDT
        {
            get
            {
                if (ViewState["ds"] != null)
                {
                    return (ViewState["ds"] as DataSet).Tables[0];
    
                }
                else
                {
                    DataTable dt = new DataTable();
                    dt.Columns.Add("Id", typeof(int));
                    dt.Columns.Add("Test1", typeof(string));
                    dt.Columns.Add("Test2", typeof(string));
                    dt.Columns.Add("Test3", typeof(string));
                    dt.Columns.Add("UserName", typeof(string));
                    dt.Columns.Add("Password", typeof(string));
                    dt.Columns.Add("Bool", typeof(System.Boolean));
                    dt.PrimaryKey = new DataColumn[] { dt.Columns[0] };
                    DataRow dr1 = dt.NewRow();
                    dr1[0] = "1";
                    dr1[1] = "red";
                    dr1[2] = "test3";
                    dr1[3] = "test3";
                    dr1[4] = "Name1";
                    dr1[5] = "";
                    dr1[6] = true;
                    dt.Rows.Add(dr1);
                    DataRow dr2 = dt.NewRow();
                    dr2[0] = "2";
                    dr2[1] = "blue";
                    dr2[2] = "test3";
                    dr2[3] = "test3";
                    dr2[4] = "Name2";
                    dr2[5] = "2";
                    dr2[6] = true;
                    dt.Rows.Add(dr2);
                    DataRow dr3 = dt.NewRow();
                    dr3[0] = "3";
                    dr3[1] = "yellow";
                    dr3[2] = "test3";
                    dr3[3] = "test3";
                    dr3[4] = "Name2";
                    dr3[5] = "";
                    dr3[6] = true;
                    dt.Rows.Add(dr3);
                    DataSet ds = new DataSet();
                    ds.Tables.Add(dt);
                    ViewState["ds"] = ds;
                    return dt;
    
                }
            }
            set { ViewState["ds"] = value; }
        }
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
       
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table cellspacing="0"  border="1" id="table1" style="border-collapse:collapse;">
    <thead>
    
    
    		<tr>
    			<th scope="col">&nbsp;</th><th scope="col">Id</th><th scope="col">Test1</th><th scope="col">Test2</th><th scope="col">Test3</th><th scope="col">UserName</th><th scope="col">Password</th>
    		</tr>
    		</thead>
    <tbody id="testBody">
    		<%int rows =0;
        string indexCollection =",";	
    		        %>
            <% foreach (DataRow item in GenerateDT.Rows)
               {
                   indexCollection += rows.ToString()+",";%>
               <tr id='<%="tr"+rows.ToString() %>'>
                   <td><input  type="button" onclick="addRow(<%=rows %>)" value="Add Row" id="<%="row"+rows.ToString()+"Button0" %>"/><input  type="button" onclick="deleteRow(<%=rows %>)" value="Delete Row" id="<%="row"+rows.ToString()+"Button1" %>"/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text0" %>" type="text"  value='<%=item[0] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text1" %>" type="text"  value='<%=item[1] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text2" %>" type="text"  value='<%=item[2] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text3" %>" type="text"  value='<%=item[3] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text4" %>" type="text"  value='<%=item[4] %>'/></td>
                   <td><input id="<%="row"+rows.ToString()+"Text5" %>" type="text"  value='<%=item[5] %>'/></td>
           </tr>
            <% rows++;
               } %>
             
               </tbody>
        </table>
        <input id="Hidden1" type="hidden" />
        <script type="text/javascript" language="javascript">
        var indexCollection=<%="\""+indexCollection.ToString()+"\"" %>;
        setHiddenField();
        var rows=<%=rows %>;
            function addRow(index) {
         
            rows=rows+1;
            var newTr="<tr id=\"tr"+rows+"\"><td><input type=\"button\" onclick=\"addRow('"+rows+"')\""+" value=\"Add Row\" id=\""+"row"+rows+"Button0"+"\"/>"
            +"<input type=\"button\" onclick=\"deleteRow('"+rows+"')\""+" value=\"Delete Row\" id=\""+"row"+rows+"Button1"+"\"/>"
            +"<td><input id=\""+"row"+rows+"Text0"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text1"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text2"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text3"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text4"+"\" type=\"text\"/></td>"
            +"<td><input id=\""+"row"+rows+"Text5"+"\" type=\"text\"/></td></tr>";        
    indexCollection=indexCollection+rows+",";
                  $("#testBody").html($("#testBody").html()+newTr);
                  
                  setHiddenField();
            }
        function deleteRow(index)
        {
        var reg=new RegExp("\\,"+index+"\\,");
        indexCollection=indexCollection.replace(reg,",");
        var row=document.getElementById("tr"+index);
        document.getElementById("table1").deleteRow(row.rowIndex);
        setHiddenField();
        }
        function setHiddenField()
        {
         document.getElementById("Hidden1").value=indexCollection.toString();
        }
        </script>
        </div>
       
        
        </form>
    </body>
    </html>
    

    Microsoft Online Community Support
    2009年11月30日 6:56
  • 很难看懂是怎么回事,那个indexCollection 是怎么来的
    2009年11月30日 9:22
  • indexCollection 是用来访问行以及每行的text等。
    比如说indexCollection=“,1,2,4,9,”;
    那对应的tr的id就是"tr1","tr2"等。
    每行对应的textbox的id:
    row0Text0,row0Text1,row0Text2,row0Text3,row0Text4,row0Text5,
    row1Text0,row1Text1,row1Text2,row1Text3,row1Text4,row1Text5,
    .............................................................................................
    也就是方便你在后台用Request.Form来获取控件值的。

    Microsoft Online Community Support
    2009年11月30日 9:50
  • 如果说用户准备删哪一行我已经知道的话,是不是就不用indexCollection 了?

    2009年11月30日 10:22
  • 还是要的,这个是用来方便你在服务器端访问相应的textbox的。

    indexCollection会首先被用来设置hiddenfield的value,然后你通过hiddenfield的value通过上面的规则来得到客户端textbox的值。
    Microsoft Online Community Support
    2009年12月1日 1:25
  • 我打算用表格外部的按钮来增删行,在删除一行时,如果我已经知道要删除行的索引,也不需要textbox的值了吧

    2009年12月1日 2:01
  • 你都删掉了当然不需要了。

    这时indexCollection会自动删除对应的行的行号,如你现在删除的是"tr5",那么"5"会被删掉的。
    Microsoft Online Community Support
    2009年12月1日 2:04
  • 上面那个indexCollection没看懂是怎么赋初始值。
    表格有数据后再把整个表格以字符串形式赋值?
    2009年12月1日 2:51

  • 在脚本的开始我就调用
     var indexCollection=<%="\""+indexCollection.ToString()+"\"" %>;//得到服务器端的某个属性的值
    setHiddenField();//给hiddenfield赋初值

    Microsoft Online Community Support
    2009年12月1日 2:59
  • tbody id="testBody" 下面那段的遍历是干嘛的

    2009年12月1日 3:07
  • 如果你想根据数据源产生table的行,那就得用上那段遍历,否则你删掉也可。
    Microsoft Online Community Support
    2009年12月1日 3:16
  • var indexCollection=<%="\""+indexCollection.ToString()+"\"" %>;//
    这句就报错了,上下文中不存在indexCollection

    我是数据库绑定出来的数据,没有用遍历那段
    2009年12月2日 1:17
  • 你删除遍历可以,但是 下面这句不能删啊。

    <%int rows =0;    string indexCollection =","; %>


    你如果是从数据库绑定出来的数据,你可以直接用你的datatable代替我上面代码中的GenerateDT就可以了。不用遍历你直接用gridview效果就不一样的了。


    Microsoft Online Community Support
    2009年12月2日 1:58
  • 上面那句应该放在哪儿,我放了几个地方都是报错“此上下文不支持代码块”
    2009年12月2日 2:35
  • 放在哪你可以看我上面给的那个完整的例子,你把它拷贝下来运行下,仔细体会下就好了。
    Microsoft Online Community Support
    2009年12月2日 2:38
  • 我这儿打了尖括号就出错,直接
         var indexCollection = ",";
           var rows = 0;

    就没有报错了,现在删行可以了,上面那个例子增加行报js错误
    2009年12月2日 3:09
  • 请注意我的代码开头引入了一个jquery的脚本文件。

    如果你没有用过,你可以到下面这个地址下载,然后直接拽到你的页面上。
    http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js




    Microsoft Online Community Support
    2009年12月2日 3:24
  • 我这儿GridView在源码页是这样的

    <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
                Height ="90%"
                onrowdatabound="gv2_bound">
              
                <Columns>
                    <asp:BoundField DataField="code" HeaderText="code" HtmlEncode="False" />
                    <asp:TemplateField HeaderText="ename">
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("ename") %>'
                                BorderStyle="None" ontextchanged="TextBox3_TextChanged" ></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="sname" >
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("sname") %>'
                                BorderStyle="None" ></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
             </Columns>
            </asp:GridView>

    var newTr 那段该怎么写?

    2009年12月2日 6:48
  • 楼主,你好

     我上面是以table为例子,不是用gridview做的。gridview最后在页面呈现的时候还是以table实现的。
    你现在理解我上面的代码后实现你的需求应该没有什么问题了。


    Microsoft Online Community Support
    2009年12月3日 2:07
  • gridview在最后执行的页源码也是以table形式表现的,那还是插入table?或者是直接把上面那段插进去?
    2009年12月3日 3:36

  • 你直接按照我上面的代码直接用table就行了,不用gridview。
    这样方便你操作。


    Microsoft Online Community Support
    2009年12月3日 3:40
  • 一个衍生问题,在最后保存时怎么让服务器端以当前客户端的表格为准

    2009年12月3日 3:47
  • 以当前客户端的表格为准?

    意思是说根据当前表格的情况保存相应的信息对吧。

    我那个hiddenfield里面保存的字符串就是用来解决这个问题的啊。

    你首先在后台获得里面的数据,然后调用stirng.split方法获得一个数组。
    然后跟我上面给你说的的规则,遍历调用Request.Form["textbox name"]来得到值。

    上面代码中每个textbox,你得给它赋个name属性,怎么给它name赋值可以参考id是怎么赋值的。如果没有name属性,后台用request.form无法获得的。

      


    Microsoft Online Community Support
    2009年12月3日 4:03