修复了具有排序功能的标题gridview

时间:2012-01-11 16:45:57

标签: jquery asp.net sorting gridview fixed

我一直在尝试在滚动时实现具有固定标题的gridview,但也允许在单击标题列时进行排序。搜索了一段时间后,我在网上找到了一个很好的解决方案,在我的网站上完美运行。如果您有相同的问题,请在此处查看 - http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspx

忽略页面上的示例,当我尝试对其进行排序时它不起作用,但是当我将它放在我自己的页面上时它是有效的。

这是我的问题:我希望能够按多个列进行排序,并且站点上的代码只允许对单个列进行排序。有没有人有关于如何添加第二级排序的建议?

这是我的代码:

    <script type = "text/javascript">
    $(document).ready(function () {
        $("#<%=ChangedUPCs2.ClientID%>").tablesorter();
        SetDefaultSortOrder();
    });

    function Sort(cell, sortOrder) {
        var sorting = [[cell.cellIndex, sortOrder]];
        $("#<%=ChangedUPCs2.ClientID%>").trigger("sorton", [sorting]);
        if (sortOrder == 0) {
            sortOrder = 1;
            cell.className = "sortDesc";
        }
        else {
            sortOrder = 0;
            cell.className = "sortAsc";
        }
        cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")");
        cell.onclick = function () { Sort(this, sortOrder); };
        document.getElementById("container").scrollTop = 0;
    }

    function SetDefaultSortOrder() {
        var gvHeader = document.getElementById("dummyHeader");
        var headers = gvHeader.getElementsByTagName("TH");
        for (var i = 0; i < headers.length; i++) {
            headers[i].setAttribute("onclick", "Sort(this, 1)");
            headers[i].onclick = function () { Sort(this, 1); };
            headers[i].className = "sortDesc";
        }
    }

<table id="dummyHeader" cellspacing="0" rules="all" border="1" style="width: 800px; border-collapse:collapse;" class = "grid">
            <thead>
            <tr>
                <th scope="col" style="width: 30px;">Tier</th>
                <th scope="col" style="width: 75px;">UPC</th>
                <th scope="col" style="width: 50px;">Line Code</th>
                <th scope="col" style="width: 100px;">Brand</th>
                <th scope="col" style="width: 205px;">Product</th>
                <th scope="col" style="width: 70px;">Old Qty / Old Price</th>                    
                <th scope="col" style="width: 70px;">New Qty / New Price</th>

                <th scope="col" style="width: 50px;">Cost</th>
                <th scope="col" style="width: 50px;">Old Margin</th>
                <th scope="col" style="width: 50px;">New Margin</th>
                <th scope="col" style="width: 50px;">Tag Type</th>
                <th scope="col" style="width: 50px;">Effective Date</th>
            </tr>
            </thead>
        </table>

        <div id="container" style="height:200px; overflow: auto; width: 817px;">
                 <asp:GridView ID="ChangedUPCs2" runat="server" AutoGenerateColumns="False" 
                    DataKeyNames="banner,enterprise_zone,UPC,ProductDescriptionLong"
                    DataSourceID="Changes2" class="styleGrid"  ondatabound="ChangedUPCs2GridDataBound" 
                     Width = "800px" ViewStateMode = "Disabled">
                     <Columns>
                        <asp:TemplateField HeaderText="Tier" ItemStyle-Width="30px">
                            <ItemTemplate>
                                <asp:Label ID="Tier" Text='<%# Eval("enterprise_zone") %>' runat="server" class="zn"/>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="UPC" HeaderText="UPC" ItemStyle-Width="75px" >
                        </asp:BoundField>
                        <asp:BoundField DataField="line_code" HeaderText="Line Code" ItemStyle-Width="50px" >
                        </asp:BoundField>
                        <asp:BoundField DataField="BrandName" HeaderText="Brand" 
                            ItemStyle-Width="100px" >
                        </asp:BoundField>
                        <asp:BoundField DataField="ProductDescriptionLong" HeaderText="Product" 
                            ItemStyle-Width="205px">
                        </asp:BoundField>
                        <asp:TemplateField HeaderText="Old Qty / Old Price">
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# Bind("ttlqty", "{0:N0}") %>'></asp:Label>
                                <asp:Label ID="Label2" runat="server" Text=" / "></asp:Label>
                                <asp:Label ID="Label3" runat="server" Text='<%# Bind("ttlretailprice", "{0:c}") %>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("ttlqty") %>'></asp:TextBox>
                                <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("ttlretailprice") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <ItemStyle Width="70px" />
                        </asp:TemplateField>
                       <asp:TemplateField HeaderText="New Qty / New Price">
                            <ItemTemplate>
                                <asp:Label ID="Label7" runat="server" Text='<%# Bind("new_base_qty", "{0:N0}") %>'></asp:Label>
                                <asp:Label ID="Label8" runat="server" Text=" / "></asp:Label>
                                <asp:Label ID="Label9" runat="server" Text='<%# Bind("new_base_retail", "{0:c}") %>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("new_base_qty") %>'></asp:TextBox>
                                <asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("new_base_retail") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <ItemStyle Width="70px" />
                        </asp:TemplateField>
                        <asp:BoundField DataField="new_LC" HeaderText="Cost" SortExpression="new_LC" DataFormatString="{0:c}" ItemStyle-Width="50px"/>
                        <asp:BoundField DataField="margin_current" HeaderText="Current Margin" 
                            SortExpression="margin_current"  ItemStyle-Width="50px" DataFormatString="{0:P1}"/>
                        <asp:BoundField DataField="margin_new" HeaderText="New Margin" 
                            SortExpression="margin_new"  ItemStyle-Width="50px" DataFormatString="{0:P1}"/>
                        <asp:BoundField DataField="tag_type" HeaderText="Tag Type" 
                            ItemStyle-Width="50px" >
                        </asp:BoundField>
                        <asp:BoundField DataField="effective_dt" HeaderText="Effective Date" 
                            DataFormatString="{0:MM/dd/yyyy}" ItemStyle-Width="50px" >
                        </asp:BoundField>
                    </Columns>
                </asp:GridView>
            </div>

在c#中:

protected void ChangedUPCs2GridDataBound(object sender, EventArgs e)
    {
        ChangedUPCs2.HeaderRow.Attributes["style"] = "display:none";
        ChangedUPCs2.UseAccessibleHeader = true;
        ChangedUPCs2.HeaderRow.TableSection = TableRowSection.TableHeader;

    }

2 个答案:

答案 0 :(得分:0)

没有任何内置的ASP.NET允许这样做,这是购买支持它的工具的一部分(如Telerik控件)。但它可以做到,关键是要构建用户可能最终选择的每种可能的排序。并将他们与各自的活动联系起来。使用具有尽可能多列的表格并不是一件容易的事。可能最好的技术是build a stored procedure可以处理个别请求,但我也不会将其描述为简单。遗憾。

答案 1 :(得分:0)

您可以在页面上添加一些按照您想要的内容排序的按钮

使用c#代码,您可以对项目进行排序并填充gridview

我希望有所帮助。