[英]Footable.js is Not resizing Asp.net gridView if accordion Tab is collapsed
[英]FooTable + ASP.NET Gridview
我試圖與我的asp.net gridview站穩腳跟。 我一直在跟蹤Internet上的所有ASP.NET指南,但似乎沒有任何效果。
Gridview ASP標記
<asp:GridView ID="GridView1" runat="server" CssClass="footable" AutoGenerateColumns="false" OnRowCommand="GridView1_RowCommand" DataKeyNames="ClientID" DataSourceID="SqlDataSource1" Style="max-width: 1024px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ClientID" HeaderText="Client ID" InsertVisible="False" ReadOnly="True" SortExpression="ClientID" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="Suburb" HeaderText="Suburb" SortExpression="Suburb" />
<asp:BoundField DataField="MobileNumber" HeaderText="Mobile Number" SortExpression="MobileNumber" />
</Columns>
</asp:GridView>
文件后面的代碼
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone, tablet";
JS
<script type="text/javascript">
$(function () {
$('[id*=GridView1]').footable();
});
如果有人有什么好主意。
將適用於腳的名稱的Java腳本函數創建為“ applyFootable”,並在從Java腳本加載頁面時調用此腳本,如下所示:
<script type="text/javascript">
$(function () {
applyFootable();
});
function applyFootable() {
$('[id*=GridView1]').footable();
}
要么
function applyFootable(){
$('.footable').footable();
}
同樣,您需要使用ScriptManager.RegisterStartupScript從頁面后面的代碼(頁面加載事件)中調用,如下所示:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "applyFootable", "applyFootable();", true);
}
試試這個,對我有用。
在這里,我以一個示例說明了如何使用C#使jQuery Footable響應ASP.Net GridView。
響應式GridView會進行自我調整以在ASP.Net中的手機,平板電腦和台式機顯示器中顯示。
.aspx頁面
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=DataGridView]').footable();
});
</script>
<asp:GridView ID="DataGridView" CssClass="footable" runat="server" AutoGenerateColumns="false" Style="max-width: 500px">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Customer Id" />
<asp:BoundField DataField="Name" HeaderText="Customer Name" />
<asp:BoundField DataField="City" HeaderText="City" />
</Columns>
</asp:GridView>
.aspx.cs頁面
Bind.BindGridView(DataGridView, actionResult.dtResult);
if (DataGridView.Rows.Count > 0)
{
DataGridView.HeaderRow.TableSection = TableRowSection.TableHeader;
}
DataGridView.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
DataGridView.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
DataGridView.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
試試這個,那真的幫助了我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.