ナレッジベース

SpreadJS 9J

修正済み

SpreadJSとjQuery UIを併用した場合にフィルターダイアログのUIが崩れる現象が発生します。

【現象再現手順】
--------------------------------------------------
1. 以下の再現コードを実行します
2. SpreadJS上のフィルタボタンを押下し、フィルタダイアログを表示します

-ダイアログが崩れた状態で表示されます
--------------------------------------------------

【現象再現コード】
--------------------------------------------------
以下のようにHTMLファイルでjQueryUIを参照し、下記のJavascriptコードを実行します
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://cdn.grapecity.com/spreadjs/32015219/css/spread.3.20152.19.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.grapecity.com/spreadjs/32015219/scripts/spread.all.3.20152.19.min.js" type="text/javascript"></script>

■Javascript
//下記のコードはHTML上のDOM要素、"#ss"に対し、
//SPREADを展開することを前提としたコードです。
$(function () {
　　$(document).ready(function () {
　　　　$("#ss").wijspread();
　　　　var spread = $("#ss").wijspread("spread");
　　　　var sheet = spread.getSheet(0);

　　　　var filter = new $.wijmo.wijspread.HideRowFilter(new $.wijmo.wijspread.Range(0, 0, sheet.getRowCount(), 1));
　　　　filter.filterButtonVisible(true);
　　　　sheet.rowFilter(filter);

　　　　sheet.getCell(0, 0).text("a");
　　　　sheet.getCell(1, 0).text("b");
　　　　sheet.getCell(2, 0).text("c");
　　});
});
--------------------------------------------------

SpreadJS 9J SP1(Ver.3.20152.21)で修正済み
SpreadJS 9J SP1(Ver.3.20152.21)より前のバージョンでは次の回避方法が有効です。
------------------------------------------

以下のようにフィルタダイアログの表示を直接修正することで現象の回避が可能です。

【回避コード】
--------------------------------------------------
$(function () {
　　$(document).ready(function () {
　　　　//init
　　　　$("#ss").wijspread();
　　　　var spread = $("#ss").wijspread("spread");
　　　　var sheet = spread.getSheet(0);

　　　　var filter = new $.wijmo.wijspread.HideRowFilter(new $.wijmo.wijspread.Range(0, 0, sheet.getRowCount(), 1));
　　　　filter.filterButtonVisible(true);
　　　　sheet.rowFilter(filter);

　　　　sheet.getCell(0, 0).text("a");
　　　　sheet.getCell(1, 0).text("b");
　　　　sheet.getCell(2, 0).text("c");

　　　　//【現象回避コード】 フィルタダイアログの表示を修正します
　　　　var oldFun = $.wijmo.wijspread.HideRowFilter.prototype.openFilterDialog;
　　　　$.wijmo.wijspread.HideRowFilter.prototype.openFilterDialog = function(filterButtonHitInfo){
　　　　　　oldFun.apply(this,arguments);
　　　　　　var table = $(".filter-dialog-style").children();
　　　　　　table.removeClass("ui-menu");
　　　　};
　　});
});
--------------------------------------------------