ナレッジベース

SPREAD for ASP.NET 7.0J

固定行を設定した場合に、固定行と非固定行の列幅が若干異なる場合があります。

【再現手順】
1.新規WebフォームにSPREADひとつを配置する
2.Webフォームに下記の再現コードを貼り付け、Web フォームを起動する
--- 固定行以下の縦罫線がずれて表示される

【再現コード】
------------------------------------
Webフォームクラス
------------------------------------
Public Class WebForm1
　　Inherits System.Web.UI.Page
　　Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
　　　　If Page.IsPostBack Then Return

　　　　' 基本設定
　　　　FpSpread1.Width = 1000
　　　　FpSpread1.Height = 600
　　　　FpSpread1.ActiveSheetView.ColumnCount = 20
　　　　FpSpread1.ActiveSheetView.RowCount = 10
　　　　FpSpread1.ActiveSheetView.Columns.Default.Width = 50

　　　　' 固定行の設定
　　　　FpSpread1.ActiveSheetView.FrozenRowCount = 2

　　　　' 現象再現用の設定
　　　　FpSpread1.ActiveSheetView.GridLines = GridLines.None
　　　　FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderColor = Drawing.Color.Black
　　　　FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderSize = 2
　　　　FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Solid
　　　　FpSpread1.ActiveSheetView.Rows(0).Border.BorderStyle = BorderStyle.None
　　End Sub
End Class

下記のスクリプトコードおよびスタイルシート設定を追加で実装することにより、現象の回避が可能です。

------------------------------------
クライアント側
------------------------------------
<style type="text/css">
　#FpSpread1_viewport0 {
　　width: 1px !important;
　}
</style>

<script type="text/javascript">

　　window.onload = function () {
　　　　if ($$.browser.ieversion < 8) return;
　　　　var spread = document.getElementById("FpSpread1");
　　　　var sv = spread.getSpreadView ? spread.getSpreadView() : null;
　　　　if (sv && sv.Viewport) {
　　　　　　syncBorderTable(sv.Viewport0, sv.Viewport2);
　　　　　　syncBorderTable(sv.Viewport1, sv.Viewport);
　　　　}

　　　　if (spread.addEventListener)
　　　　　　spread.addEventListener("Scroll", onSpreadScroll, false);
　　　　else
　　　　　　if (spread.attachEvent)
　　　　　　　　spread.attachEvent("onScroll", onSpreadScroll);
　　};

　　// スクロール動作のオーバーライド
　　function onSpreadScroll(e) {
　　　　var spread = e.spread;
　　　　var sv = spread.getSpreadView ? spread.getSpreadView() : null;
　　　　if (sv) {
　　　　　　var frozenRows = sv.Viewport1;
　　　　　　if (frozenRows) {
　　　　　　　　var mainRows = sv.Viewport;
　　　　　　　　if (mainRows) {
　　　　　　　　　　if (frozenRows.parentNode.scrollLeft != mainRows.parentNode.scrollLeft) {
　　　　　　　　　　　　var minScroll = Math.min(frozenRows.parentNode.scrollLeft, mainRows.parentNode.scrollLeft);
　　　　　　　　　　　　frozenRows.parentNode.scrollLeft = minScroll;
　　　　　　　　　　　　mainRows.parentNode.scrollLeft = minScroll;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　}

　　// 罫線の同期
　　function syncBorderTable(table1, table2) {
　　　　if (table1 == null || table2 == null) return;

　　　　try {
　　　　　　aboveTableFirstCell = table1.rows.length > 0 ? table1.rows[0].cells[0] : null;
　　　　　　if (aboveTableFirstCell) {
　　　　　　　　var belowTableFirstCell = table2.rows.length > 0 ? table2.rows[0].cells[0] : null;
　　　　　　　　if (aboveTableFirstCell.currentStyle) {
　　　　　　　　　　var belowCellBorderLeft = belowTableFirstCell.currentStyle.borderLeftStyle == "none" ? 0 : parseInt(belowTableFirstCell.currentStyle.borderLeftWidth);
　　　　　　　　　　var aboveCellBorderLeft = aboveTableFirstCell.currentStyle.borderLeftStyle == "none" ? 0 : parseInt(aboveTableFirstCell.currentStyle.borderLeftWidth);
　　　　　　　　　　var adj = Math.abs(belowCellBorderLeft - aboveCellBorderLeft) / 2;
　　　　　　　　　　adj = $$.browser.ieversion < 9 ? Math.floor(adj) : Math.round(adj);
　　　　　　　　　　if (!isNaN(adj)) {
　　　　　　　　　　　　if (belowCellBorderLeft > aboveCellBorderLeft)
　　　　　　　　　　　　　　table2.style.marginLeft = -adj + "px";
　　　　　　　　　　　　else
　　　　　　　　　　　　　　table1.style.marginLeft = -adj + "px";
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}

　　　　　　var maxViewWidth = Math.max(table1.parentNode.offsetWidth, table2.parentNode.offsetWidth);
　　　　　　table1.parentNode.style.width = maxViewWidth + "px";
　　　　　　table2.parentNode.style.width = maxViewWidth + "px";
　　　　} catch (e) { }
　　}
</script>