ASP.NET做一个下拉式表格选择

1/定义一个DIV

代码:

   <div id="divParent" style="overflow: auto; position: absolute"></div>

2/再定义一个DIV 和一个GridView ,此时这个DIV的CSS属性设置了display: none

 代码:

<div style="display: none">
                        <asp:GridView ID="grdContent" runat="server" AllowPaging="True" AllowSorting="True"
                            OnPageIndexChanging="grdContent_PageIndexChanging" OnRowDataBound="grdContent_RowDataBound"
                            PageSize="10" AutoGenerateColumns="False" BackColor="White" BorderColor="#DEDFDE"
                            BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical">
                            <RowStyle BackColor="#F7F7DE" />
                            <Columns>
                                <asp:BoundField DataField="AttributeNo" AccessibleHeaderText="AttributeNo" HeaderText="编码" />
                                <asp:BoundField DataField="DESCRIPTION" AccessibleHeaderText="DESCRIPTION" HeaderText="描述" />
                                <asp:BoundField DataField="display" AccessibleHeaderText="display" ItemStyle-HorizontalAlign="Center"
                                    HeaderText="描述显示(Y/N)" />
                            </Columns>
                            <FooterStyle BackColor="#CCCC99" />
                            <PagerTemplate>
                                <div style="text-align: center">
                                    <asp:Label ID="Label22" runat="server" Text=""></asp:Label>
                                    <asp:Label ID="lbl_count" runat="server" Text='<%# "总记录数:"+((System.Data.DataTable)((GridView)Container.NamingContainer).DataSource).Rows.Count+ "  "%>'></asp:Label>
                                    <asp:Label ID="lbl_page_size2" runat="server" Text='<%# "每页"+grdContent.PageSize+"条" %>'></asp:Label>
                                    <asp:Label ID="lblPage0" runat="server" Text='<%# "第" + (((GridView)Container.NamingContainer).PageIndex + 1)  + "页/共" + (((GridView)Container.NamingContainer).PageCount) + "页" %> '></asp:Label>
                                    <asp:LinkButton ID="lbnFirst0" runat="Server" CommandArgument="First" CommandName="Page"
                                        Enabled="<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>" Text="首页"></asp:LinkButton>
                                    <asp:LinkButton ID="lbnPrev0" runat="server" CommandArgument="Prev" CommandName="Page"
                                        Enabled="<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>" Text="上一页"></asp:LinkButton>
                                    <asp:LinkButton ID="lbnNext0" runat="Server" CommandArgument="Next" CommandName="Page"
                                        Enabled="<%# ((GridView)Container.NamingContainer).PageIndex != (((GridView)Container.NamingContainer).PageCount - 1) %>"
                                        Text="下一页"></asp:LinkButton>
                                    <asp:LinkButton ID="lbnLast0" runat="Server" CommandArgument="Last" CommandName="Page"
                                        Enabled="<%# ((GridView)Container.NamingContainer).PageIndex != (((GridView)Container.NamingContainer).PageCount - 1) %>"
                                        Text="尾页"></asp:LinkButton>
                                </div>
                            </PagerTemplate>
                            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                            <AlternatingRowStyle BackColor="White" />
                        </asp:GridView>
                    </div>

3/在要使用下拉列表的地方,放一个 TextBox 与一个 Button  其中注意这个Button 的Text,(btn.Text = "6";   btn.CssClass = "isDDL";  ),因为这个是动态生成测试的所以写成这样

 按钮的Text 输入6 它的字体设置为 marlett

  CSS 代码

        .isDDL
        {
            font-family: marlett;
            margin-left: -4px;
            font-size: 12px;
            height: 20px;
        }

  .cs 代码: 

  protected void btn_Click(object sender, EventArgs e)
    {
       //绑定一个查询给上面的GridView
        hid_value.Value = (((Button)sender).ID).Replace("btn", "txt");
        Pan_control.Attributes["parameterValue"] =((Button)sender).Attributes["parameterValue"];
        grdContent.DataSource = Bll.GetMaterialAttributeList(Convert.ToInt32(((Button)sender).Attributes["parameterValue"]));
        grdContent.DataBind();  

       //  然后显示步骤2的这个Div

      ScriptManager.RegisterClientScriptBlock(this, this.Page.GetType(), "show", "<script>ShowDetail('" + hid_value.Value+ "','" + grdContent.ClientID + "')</script>", false);

    }

//GridView.的行定义了行点击事件调用JavaScript

   protected void grdContent_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "oldBG=this.style.backgroundColor; this.style.backgroundColor='#00FFFF';");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=oldBG");
            e.Row.Attributes.Add("onclick", "GetRowData('" + hid_value.Value + "',this,0,"+Pan_control.ClientID+","+hid_key.ClientID+")");
            e.Row.Cells[2].Text = e.Row.Cells[2].Text.Equals("True") ? "Y" : "N";
            e.Row.Cells[0].Attributes["parameterValue"] =((DataRowView)e.Row.DataItem).Row[0].ToString().Trim();
        }
    }

 

javascript 代码:

  // 显示GridView提供详细内容
function ShowDetail(txt, grd) {
            var datagridParent = document.getElementById('divParent'); //

            var txtobj = document.getElementById(txt); //找到需要需要显示选择内容的TextBox
            var datagrid = document.getElementById(grd); //找到DataGrid呈现的客户端表格
            // 下面就是显示datagrid和隐藏datagrid时候做的显示开关
            if (datagridParent.innerHTML == '' && datagrid != null) {
                document.getElementById('divParent').innerHTML = datagrid.outerHTML;
            }
            else {
                HideLayer();
            }
            // 定位要显示的层的位置
            document.getElementById('divParent').style.pixelLeft = txtobj.offsetLeft; //txtobj.offsetParent.offsetLeft
            document.getElementById('divParent').style.pixelTop = txtobj.offsetTop + txtobj.offsetHeight;
        }

  // 隐藏层
        function HideLayer() {
            document.getElementById('divParent').innerHTML = '';
        }

       // 当选择表格中的行的时候将感兴趣的内容显示到文本框中
        // txt显示内容的目标控件,row用户点击的行对象，colID用户要显示的列的内容
        // 使用row和ColID可以定位一个单元格
        function GetRowData(txt, row, colID, pan, keyValue) {
            var txtobj = document.getElementById(txt);
            txtobj.value = row.cells[colID].innerText;
              HideLayer(); //选择完以后隐藏层            
                }