2012-02-07 93 views
0

我正在考虑使用jQuery UI主题到我的ASP.NET网站的可行性。使用jQuery UI主题与ASP.Net控件

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

  1. 的Internet Explorer(IE 8) - >网格线是不是底部 可见(当不存在多页)
  2. 的Mozilla - >网格线不能用于报头
  3. 铬 - - >正常工作

它是否与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> 

--Code背后

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; 
     } 
     } 
    } 
} 
+0

有人能够重现此问题吗? – Lijo 2012-02-08 04:10:34

+0

您使用的是什么版本的.Net? – pete 2012-02-10 16:06:41

+0

我正在使用.Net 4.0 – Lijo 2012-02-23 12:39:08

回答

2

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

<meta http-equiv="x-ua-compatible" content="IE=8" /> 
+0

或更好,'content =“IE = edge”';见[这里](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge)。 – Hossein 2013-07-20 07:04:11