0

我的 Gridview 在面板中折叠了。Footable.js 不是第一次重新调整我的 gridview 的大小。这是我的头部部分。

<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;
4

1 回答 1

0

我在 jQuery Tabs 中遇到了与此类似的问题。以下解决方案对我有帮助，您应该能够对其进行调整以满足您的需求。

调整脚注大小

于 2015-10-22T13:00:20.440 回答