合并标头时,jQuery插件到固定标头不起作用

时间:2018-01-04 06:39:39

标签: javascript c# jquery asp.net gridview

我正在使用jQuery插件修复网格视图标题

请参阅此处:http://gridviewscroll.aspcity.idv.tw/

我希望有类似的内容:http://gridviewscroll.aspcity.idv.tw/Demo/Advanced.aspx#HeaderColumnMerge

冻结一个标题工作正常但是当我合并标题并尝试冻结列时,一些列能够修复但标题和其他混乱。

我注意到当我尝试更改网格视图宽度时会发生这种情况。我想修复5个第一栏(So No,工作订单,品牌,包装ETD和缓冲日)

你们能指出我错过了什么吗?任何建议都非常感谢。

js Code

      <script type="text/javascript" src="js/plugins/gridviewscroll.js">
      </script>

       <script type="text/javascript">
       window.onload = function () {
       var gridViewScroll = new GridViewScroll({
        elementID : "<%=this.GridView1.ClientID%>", // Target element id
        width : 1700, // Integer or String(Percentage)
        height : 350, // Integer or String(Percentage)
        freezeColumn : true, // Boolean
        freezeFooter : false, // Boolean
        freezeColumnCssClass: "GridViewScrollItemFreeze", // String
        freezeFooterCssClass: null, // String
        freezeHeaderRowCount : 2, // Integer
        freezeColumnCount :5 // Integer

    });
    gridViewScroll.enhance();
}

ASP.NET代码

            <div style="overflow-x: auto" >
               <asp:GridView ID="GridView1" runat="server" 
                  OnRowDataBound="GridView1_RowDataBound" 
                    OnRowCreated="GridView1_RowCreated">

                            <Columns>
                                <%-- <asp:BoundField DataField="PGID" />--%>

                                <asp:BoundField DataField="SONo" HeaderText="SO No" HeaderStyle-Width="55px">
                                    <ItemStyle Width="55px" />
                                </asp:BoundField>

                                <asp:BoundField DataField="SO_WorkOrder" HeaderText="Work Order" HeaderStyle-Width="55px">
                                   <ItemStyle Width="55px" />
                                </asp:BoundField>

                                <asp:BoundField DataField="Brand" HeaderText="Brand" HeaderStyle-Width="55px">
                                    <ItemStyle Width="55px" />
                                </asp:BoundField>

                                <asp:TemplateField HeaderText="Packing ETD" HeaderStyle-Width="55px">
                                     <ItemStyle Width="55px" />
                                    <ItemTemplate>
                                        <asp:Label ID="PackingETD" runat="server"
                                            DataFormatString="{0:dd/MM/yyyy}"
                                            HtmlEncode="false"
                                            Text='<%# Eval("PackingETD", "{0:dd/MM/yyyy}") %>' />
                                    </ItemTemplate>
                                </asp:TemplateField>

                                <asp:BoundField DataField="BufferDay" HeaderText="Buffer Day" HeaderStyle-Width="55px">
                                <ItemStyle Width="55px" />
                                </asp:BoundField>

                                <%-- order--%>
                                <asp:BoundField DataField="XXS" HeaderText="XXS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XS" HeaderText="XS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="S" HeaderText="S" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                              <%--  <asp:BoundField DataField="SM" HeaderText="SM">
                                    <ItemStyle Width="100px"></ItemStyle>
                                </asp:BoundField>--%>

                                <asp:BoundField DataField="M" HeaderText="M" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="L" HeaderText="L" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XL" HeaderText="XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXL" HeaderText="XXL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXXL" HeaderText="3XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>


                                <%-- balance to pack in ctn--%>
                                <asp:BoundField DataField="XXS_BC" HeaderText="XXS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XS_BC" HeaderText="XS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="S_BC" HeaderText="S" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <%--<asp:BoundField DataField="SM_BC" HeaderText="SM">
                                    <ItemStyle Width="100px"></ItemStyle>
                                </asp:BoundField>--%>

                                <asp:BoundField DataField="M_BC" HeaderText="M" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="L_BC" HeaderText="L" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XL_BC" HeaderText="XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXL_BC" HeaderText="XXL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXXL_BC" HeaderText="3XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>


                                <%-- balance to pack in pcs--%>
                                <asp:BoundField DataField="XXS_B" HeaderText="XXS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XS_B" HeaderText="XS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="S_B" HeaderText="S" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                              <%--  <asp:BoundField DataField="SM_B" HeaderText="SM">
                                    <ItemStyle Width="100px"></ItemStyle>
                                </asp:BoundField>--%>

                                <asp:BoundField DataField="M_B" HeaderText="M" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="L_B" HeaderText="L" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XL_B" HeaderText="XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXL_B" HeaderText="XXL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXXL_B" HeaderText="3XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>



                                <%--  target completion date overall--%>

                                <asp:TemplateField HeaderText="Target Completion Date">
                                    <ItemStyle Width="30px"></ItemStyle>
                                    <ItemTemplate>
                                        <asp:Label ID="TCDate" runat="server"
                                            DataFormatString="{0:dd/MM/yyyy}"
                                            HtmlEncode="false"
                                            Text='<%# Eval("TCDate", "{0:dd/MM/yyyy}") %>' />
                                    </ItemTemplate>
                                </asp:TemplateField>


                                <%--  target completion date by size--%>

                                <%--  start pack date--%>
                                <asp:BoundField DataField="XXS_D" HeaderText="XXS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XS_D" HeaderText="XS" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="S_D" HeaderText="S" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <%--<asp:BoundField DataField="SM_D" HeaderText="SM">
                                    <ItemStyle Width="100px"></ItemStyle>
                                </asp:BoundField>--%>

                                <asp:BoundField DataField="M_D" HeaderText="M" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="L_D" HeaderText="L" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XL_D" HeaderText="XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXL_D" HeaderText="XXL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                                <asp:BoundField DataField="XXXL_D" HeaderText="3XL" HeaderStyle-Width="20px">
                                    <ItemStyle Width="20px"></ItemStyle>
                                </asp:BoundField>

                            </Columns>
                            <HeaderStyle CssClass="GridviewScrollHeader" />
                            <RowStyle CssClass="GridviewScrollItem" />
                            <PagerStyle CssClass="GridviewScrollPager" />
                        </asp:GridView>
                    </div>

输出

Desired Output

0 个答案:

没有答案