我正在使用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>
输出