2011-11-16 78 views
2

大家好,我想解決grdiveiw而不是表格的這個功能,任何人都可以引導我。我如何使用這個jquery插件的gridview而不是表

http://fixedheadertable.com/

這個我試過通過註冊所需的腳本,但對我沒有工作,所以任何一個可以幫助我

<asp:GridView ID="grdEarnings" runat="server" CssClass="myTable01" AutoGenerateColumns="False" 
     AlternatingRowStyle-BackColor="#DEE6F7" ShowHeader="true" Font-Size="11pt"> 
     <Columns> 
      <asp:TemplateField ItemStyle-Width="150px" ItemStyle-HorizontalAlign="Center" HeaderText="ID"> 
       <EditItemTemplate> 
        <asp:Label ID="lbl" runat="server" Text="<%#ID %>"></asp:Label> 
       </EditItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField ItemStyle-Width="150px" ItemStyle-HorizontalAlign="Center" HeaderText="Name"> 
       <ItemTemplate> 
        <asp:Label ID="lblRegular" runat="server" Text='<%# Eval("Name") %>'></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="150px" HeaderText="Price"> 
       <ItemTemplate> 
        <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price") %>'></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="150px" HeaderText="Description"> 
       <ItemTemplate> 
        <asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 

另外一個我試圖精品工程爲我,但因爲我使用工具提示在我的應用程序包括相關的一些腳本時,我包括我無法查看網格視圖

Untit滾動條LED頁

<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script> 

<script type="text/javascript"> $(document).ready(function() { 
$('#<%=grdEarnings.ClientID %>').Scrollable({ 
    ScrollHeight: 300 
}); 
}); 
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

如果我評論說是腳本的Jquery功能後,該作品不夠好,我。但與這些腳本一起運行時,我無法查看gridview的滾動條

回答

1

您需要先包含jQuery,然後再包含您的jQuery插件(ScrollableGridPlugin)。此外,我不明白爲什麼你有多個jQuery包含不同的版本(1.4.2,1.4.4,1.3.2)?

jQuery ScrollableGridPlugin是否與ASP GridView而不是普通表一起使用取決於GridView生成的HTML。

+0

你好'Juri'感謝烏拉圭回合回覆爲什麼我使用不同版本是按照我從我搜索了按我的要求,我用的是一些對於'tooltip'有的爲'Calendar'像 – Ramakrishna

+0

確保代碼,你應該只引用一個jQuery庫。可能您的工具提示和日曆插件仍然可以使用更新的jQuery庫,因爲它應該向後兼容:) – Juri

0

對於您需要添加一個thead元素grdidview和移動的第一個GridView的一行到它的FixedHeaderTable插件使用(而且,不應該調用根據文檔you provided?$('selector').fixedHeaderTable({ footer: false, cloneHeadToFoot: true, fixedColumn: false });):

$(function() { 
    var gridView = $("#<%= grdEarnings.ClientID %>"); 
    gridView.prepend($("<thead></thead>").append(gridView.find("tr:first"))); 

    gridView.fixedHeaderTable({ height: '300' }); 
}); 
+0

但是,當多個腳本滾動條不顯示時 – Ramakrishna

+0

刪除多餘的jquery腳本引用 - 只留下一個用於最近的jquery庫版本。 –

相關問題