将jQuery UI主题与ASP.Net控件结合使用

本文关键字：控件 Net 结合 ASP jQuery UI | 更新日期: 2023-09-27 18:23:49

我正在考虑在我的ASP.NET网站上使用jQuery UI主题的可行性。

我发现以下问题。我们如何纠正它们？

  1. Internet Explorer（IE 8）-->底部的网格线不可见（当没有多个页面时）
  2. Mozilla-->网格线不可用于标头
  3. Chrome-->运行良好

它与asp.net控件兼容吗？你能告诉我一些例子，说明这些jQuery类与asp.net控件的正确使用（没有副作用）吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
    rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        AllowPaging="True"  PageSize="4">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="ProductName" ReadOnly="true"
                SortExpression="ProductName" />
            <asp:BoundField DataField="QuantityPerUnit" HeaderText="Qty" ReadOnly="true" SortExpression="QuantityPerUnit" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="true" SortExpression="CategoryName" />
        </Columns>
    </asp:GridView>
</div>
<br />
</form>
</body>
</html>

--背后的代码

using System;
using System.Web.UI.WebControls;
using System.Data;
public partial class MyGridTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ProductName"), new DataColumn("QuantityPerUnit"), new DataColumn("CategoryName") });
    dt.Rows.Add("Shirt", 200);
    dt.Rows.Add("Football", 30);
    dt.Rows.Add("Bat", 22.5);
    //dt.Rows.Add("Football", 30);
    //dt.Rows.Add("Bat", 22.5);
    //dt.Rows.Add("Football", 30);
    //dt.Rows.Add("Bat", 22.5);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}
protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    GridView1.CssClass = "ui-widget-content";
    if (GridView1.Rows.Count > 0)
    {
        //To render header in accessible format
        GridView1.UseAccessibleHeader = true;
        //Add the <thead> element
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
        GridView1.HeaderRow.CssClass = "ui-widget-header";
        //Add the <tfoot> element
        GridView1.FooterRow.TableSection = TableRowSection.TableFooter;

        if (GridView1.TopPagerRow != null)
        {
            GridView1.TopPagerRow.TableSection = TableRowSection.TableHeader;
        }
        if (GridView1.BottomPagerRow != null)
        {
            GridView1.BottomPagerRow.TableSection = TableRowSection.TableFooter;
        }
        }
    }
}

将jQuery UI主题与ASP.Net控件结合使用

只是出于兴趣。添加此元标记时会发生什么。

<meta http-equiv="x-ua-compatible" content="IE=8" />
相关文章：