我的 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;