如果折叠选项卡被折叠,则无法调整Asp.net gridView的大小

本文关键字:折叠 net Asp gridView 调整 选项 如果 | 更新日期: 2023-09-27 18:18:42

我有Gridview在panel collapsed.Footable.js不是第一次重新调整我的Gridview的大小。这是我的Head部分。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />

       <link href="responsivegrid/css/footable.core.min.css" rel="stylesheet" />
    <link href="responsivegrid/css/footable.metro.min.css" rel="stylesheet" />
 <script src="js/bootstrap-tab.js"></script>
    <script src="responsivegrid/js/footable.js">
    </script>
    <script src="responsivegrid/js/footable.sort.js">
    </script>
     <script type="text/javascript">
     $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
    $(function () {
        $('.footable').footable();
    });
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        //fire initialize of footable because the footable plugin only processes tables that are visible
        $('.footable').trigger('footable_initialize');
    });
     </script>
<%--    <script type="text/javascript">
        $(function () {
            $('#<%=GrdShow.ClientID %>').footable({
                delay: 100,
                breakpoints: {
                    phone: 300,
                    tablet: 1300
                }
            });
        });
    </script>--%>
</asp:Content>

正文部分

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne"  style="text-align: center;">
            
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                    aria-controls="collapseOne">Machines</a>
            
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
           <div class="panel-body">
             <div class="row">
                    <asp:GridView ID="GrdShow" CssClass="footable" OnRowDataBound="GrdShow_RowDataBound" runat="server" AutoGenerateColumns="false">
                        <Columns>
                            <asp:TemplateField HeaderText="Model">
                                <ItemTemplate>
                                    <asp:HiddenField ID="hfid2" runat="server" Value='<%# Eval("id") %>' />
                                    <asp:Label ID="lblmodal" Text='<%# Eval("Modal") %>' runat="server"></asp:Label>
                                    <asp:HiddenField ID="hfrenew" runat="server" Value='<%# Eval("Renew") %>' />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="DOC">
                                <ItemTemplate>
                                    <asp:Label ID="lbldoc" Text='<%# Eval("Srno") %>' runat="server"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                               </Columns>
                    </asp:GridView>
                </div>

  TableCellCollection cells = GrdShow.HeaderRow.Cells;
  cells[0].Attributes.Add("data-class", "expand");
    cells[1].Attributes["data-hide"] = "phone";
    cells[4].Attributes["data-hide"] = "phone";
    cells[5].Attributes.Add("data-hide", "phone,tablet");
    cells[6].Attributes.Add("data-hide", "phone,tablet");
    cells[7].Attributes.Add("data-hide", "phone,tablet");
    cells[8].Attributes.Add("data-hide", "phone,tablet");
    cells[9].Attributes.Add("data-hide", "phone,tablet");
    cells[10].Attributes.Add("data-hide", "phone,tablet");
    cells[11].Attributes.Add("data-hide", "phone,tablet");
    cells[12].Attributes.Add("data-hide", "phone,tablet");
    cells[13].Attributes.Add("data-hide", "phone,tablet");
    cells[14].Attributes.Add("data-hide", "phone,tablet");
    cells[15].Attributes.Add("data-hide", "phone");
    cells[16].Attributes.Add("data-hide", "phone,tablet");
    cells[17].Attributes.Add("data-hide", "phone,tablet");
    cells[18].Attributes.Add("data-hide", "phone,tablet");
    cells[19].Attributes.Add("data-hide", "phone,tablet");
    cells[20].Attributes.Add("data-hide", "phone,tablet");
    cells[21].Attributes.Add("data-hide", "phone,tablet");
    GrdShow.HeaderRow.TableSection = TableRowSection.TableHeader;

如果折叠选项卡被折叠,则无法调整Asp.net gridView的大小

我在jQuery标签页中有过类似的问题。下面的解决方案对我很有帮助,您应该能够调整它以满足您的需求。

调整Footable