none
GridView中处理事件时遇到个问题。请大家帮忙解决下! RRS feed

  • 问题

  • 如下代码:
       <script language="javascript" type="text/javascript">
        function Click(){
            var mydiv = document.getElementById('div2');
            var display = mydiv.style.display;
            (display == 'none') ? display = 'block' : display = 'none';
            mydiv.style.display = display;
        }
        </script>
                     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                                DataSourceID="SqlDataSource1" >
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <table border="1" bordercolor="#FF9900" cellpadding="0" cellspacing="0"
                                                style="width: 100%; height: 100%; text-align:left">
                                                <tr>
                                                    <td>
                                                     <a style="cursor:pointer; color:Blue" onclick="Click()">添加或修改回复</a>
                                                    <div id="div2" style="display:none; color:#FF9900">展开这里
                                                    </div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>

    GridView拥有N行,我需要每次点击<a>标记内‘添加或修改回复’展开自己这行的div。但是我这样写,它每次都展开第一行的div。怎么能让它每次都展开本行的div?
    郭鹏
    2009年2月21日 5:49

答案

  •  这样即可,修改3处

     <script language="javascript" type="text/javascript">  
        function Click(divID){  
            var mydiv = document.getElementById(divID);  
            var display = mydiv.style.display;  
            (display == 'none') ? display = 'block' : display = 'none';  
            mydiv.style.display = display;  
        }  
        </script> 
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
    DataSourceID="SqlDataSource1" > 
    <Columns> 
        <asp:TemplateField> 
            <ItemTemplate> 
                <table border="1" bordercolor="#FF9900" cellpadding="0" cellspacing="0"   
                    style="width: 100%; height: 100%; text-align:left">  
                    <tr> 
                        <td> 
                         <style="cursor:pointer; color:Blue" onclick="Click('div<%#Container.DataItemIndex%>');return false">添加或修改回复</a> 
                        <div id="div<%#Container.DataItemIndex%>" style="display:none; color:#FF9900">展开这里  
                        </div> 
                        </td> 
                    </tr> 
                </table> 
            </ItemTemplate> 
        </asp:TemplateField> 
    </Columns> 
    </asp:GridView> 
     

    孟宪会
    • 已标记为答案 Hugo12345 2009年2月21日 12:04
    2009年2月21日 10:42
    版主

全部回复

  •  在运行后我发现所有的div.id都是div1.我又做了如下修改:
    添加RowDataBound事件:
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
        {  
            if (e.Row.RowType == DataControlRowType.DataRow)  
            {  
                HtmlGenericControl div1 = (HtmlGenericControl)e.Row.FindControl("div1");  
                DataRowView dv = (DataRowView)e.Row.DataItem;  
                div1.ID = "div" + dv["Id"].ToString();  
            }  
        } 
    我修改了没个div的id。
    然后再修改<a>标记为Button并添加click事件: (CommandArgument为Id)
        protected void Button1_Click(object sender, EventArgs e)  
        {  
            Button btn = sender as Button;  
            string index = btn.CommandArgument;  
            string strjs = "var display = div" + index + ".style.display;";  
            strjs += "(display == 'none')?display='block':display='none';";  
            strjs += "div" + index + ".style.display=display;";  
            ClientScriptManager cs = Page.ClientScript;  
            cs.RegisterStartupScript(this.GetType(), "js", strjs, true);  
        } 

    郭鹏
    2009年2月21日 9:05
  •  这样即可,修改3处

     <script language="javascript" type="text/javascript">  
        function Click(divID){  
            var mydiv = document.getElementById(divID);  
            var display = mydiv.style.display;  
            (display == 'none') ? display = 'block' : display = 'none';  
            mydiv.style.display = display;  
        }  
        </script> 
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
    DataSourceID="SqlDataSource1" > 
    <Columns> 
        <asp:TemplateField> 
            <ItemTemplate> 
                <table border="1" bordercolor="#FF9900" cellpadding="0" cellspacing="0"   
                    style="width: 100%; height: 100%; text-align:left">  
                    <tr> 
                        <td> 
                         <style="cursor:pointer; color:Blue" onclick="Click('div<%#Container.DataItemIndex%>');return false">添加或修改回复</a> 
                        <div id="div<%#Container.DataItemIndex%>" style="display:none; color:#FF9900">展开这里  
                        </div> 
                        </td> 
                    </tr> 
                </table> 
            </ItemTemplate> 
        </asp:TemplateField> 
    </Columns> 
    </asp:GridView> 
     

    孟宪会
    • 已标记为答案 Hugo12345 2009年2月21日 12:04
    2009年2月21日 10:42
    版主
  •  实在感谢
    郭鹏
    2009年2月21日 12:03