我怎样才能将这个jquery插件用于gridview而不是table

时间:2011-11-16 11:46:07

标签: asp.net gridview

大家好我想为grdiveiw而不是桌子制定这个功能,任何人都可以指导我。

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>

我试过的另一个对我来说很好但是因为我在我的应用程序中使用工具提示我包括一些相关的脚本,当我包括我无法查看网格视图的滚动条

  

      Untitled Page       

<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的滚动条

2 个答案:

答案 0 :(得分:1)

首先需要包含jQuery,然后是jQuery插件(ScrollableGridPlugin)。此外,我不明白为什么你有多个不同版本的jQuery包括(1.4.2,1.4.4,1.3.2)?

jQuery ScrollableGridPlugin是否与ASP GridView一起使用而不是普通表依赖于GridView生成的HTML。

(此外,根据文档you provided?,该来电不应该是$('selector').fixedHeaderTable({ footer: false, cloneHeadToFoot: true, fixedColumn: false });

答案 1 :(得分:0)

对于FixedHeaderTable插件的使用,您需要向grdidview添加thead元素并将第一个gridview的行移入其中:

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

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