FooTable + ASP.NET 网格视图答案

【问题标题】：FooTable + ASP.NET GridviewFooTable + ASP.NET 网格视图
【发布时间】：2015-06-06 12:41:03
【问题描述】：

我正在尝试使用我的 asp.net gridview 进行工作。我已经按照互联网上的每个 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";

<script type="text/javascript">
$(function () {
    $('[id*=GridView1]').footable();
});

如果有人有任何想法，那就太棒了。

【问题讨论】：

你能显示css吗？
我正在使用的唯一应该影响它的 CSS 是 footable.min.css 可在此处获得：github.com/fooplugins/FooTable/blob/V2/css/…

标签： c# asp.net gridview footable

【解决方案1】：

为可脚注名称创建 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);

}

试试这个，它对我有用。

【讨论】：

【解决方案2】：

在这里，我用一个例子解释了如何使用 C# 使 ASP.Net GridView 响应 jQuery Footable。

响应式 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";

试试这个，对我很有帮助。

【讨论】：