Как я могу использовать этот плагин jquery для gridview вместо таблицы

Question

Привет всем, я хотел бы разработать эту функциональность для 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>

Другой, который я пробовалотлично работает для меня, но так как я использую подсказки в своем приложении, я включил некоторые сценарии, связанные с этим, когда я включаю, что я не могу просмотреть полосу прокрутки для вида сетки

Без названия Страница

<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

Answer 1

Сначала необходимо включить jQuery, а затем ваш плагин jQuery (ScrollableGridPlugin).Более того, я не понимаю, почему у вас есть несколько jQuery-включений с разными версиями (1.4.2, 1.4.4, 1.3.2)?

Работает ли jQuery ScrollableGridPlugin с ASP GridView, а не с обычной таблицейзависит от HTML-кода, сгенерированного GridView.

(Более того, не должен ли вызов быть $('selector').fixedHeaderTable({ footer: false, cloneHeadToFoot: true, fixedColumn: false }); в соответствии с предоставленными вами документами ? )

Answer 2

Для использования плагина FixedHeaderTable вам необходимо добавить элемент thead в grdidview и переместить в него строку самого первого вида сетки:

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

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