Jquery-Resizable-Columnsでテーブルが読み込めない
Q&A
Closed
解決したいこと
Jquery-Resizable-Columnsを実装し、テーブルの列幅をマウスのドラッグで可変できるようにしたい
ただ、テーブルの中身が0とカウントされてしまいドラッグ出来ない
正常なテーブルの中身の数を取得できるようにしたい。
jqueryの中で、テーブルの数が0となってしまう原因を突き止めたいがなぜか分からない
該当するソースコード
<div class="sub">
<div class="sub_contents">
<div class="message_area04">合計： <?php echo $searchCountView ?> 件</div>
<div class="list_area">
<?php
if (is_array($arrList) && count($arrList) > 0) {
foreach ($arrList as $rowCnt => $arrRow) {
// 見出し開始
if ($rowCnt == 0) {
// echo "<div class=\"table_h\" style=\"width: " . $headWidth . "px;\">";
echo "<table class=\"list_table_h\" style=\"width: 800px; table-layout: fixed;\">";
echo "<thead>";
}
// データ開始
if ($rowCnt == 1) {
// echo "<div class=\"table_b\" style=\"width: " . $dataWidth . "px; height: 100%;\" >";
echo "<table class=\"list_table_b\" style=\"width: 800px; table-layout: fixed;\">";
echo "</tbody>";
}
echo "<tr>";
foreach ($arrRow as $colCnt => $colData) {
if ($rowCnt == 0) {
echo "<th class=\"hd" . $colCnt . "\">" . $colData . "</th>";
} else {
// iReport起動
if (
$colCnt == 0 && $arrAccNos[$rowCnt] != ""
&& defined('RESULT_LIST_NO') && RESULT_LIST_NO === TRUE
&& defined('RESULT_REPORT_FORMEDIT') && RESULT_REPORT_FORMEDIT === TRUE
) {
$uid = $_DM->getUserID();
$linkURL = "../co/urlcall.php";
$linkURL .= "?UserID=" . $uid . "&AccessionNo=" . $arrAccNos[$rowCnt];
echo "<td class=\"bd" . $colCnt . "\"><a href=\"" . $linkURL . "\" target=\"_blank\">" . $colData . "</td>";
} else {
echo "<td class=\"bd" . $colCnt . "\">" . $colData . "</td>";
}
}
}
echo "</tr>";
// 見出し終了
if ($rowCnt == 0) {
echo "</thead>";
echo "</table>";
// echo "</div>";
}
// データ終了
if ($rowCnt != 0 && $rowCnt == count($arrList) - 1) {
echo "</tbody>";
echo "</table>";
// echo "</div>";
}
}
} else if ($queryErrMsg != '') {
// クエリエラーメッセージ出力
echo "<span class=\"error_message_area01\">" . $queryErrMsg . "</span>";
} else {
// 検索条件超過エラーメッセージ出力
echo "エラー";
}
?>
</div>
<link rel="stylesheet" href="dist/jquery.resizableColumns.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="dist/jquery.resizableColumns.min.js"></script>
<script>
$(function() {
$("table").resizableColumns({
// store: window.store
});
});
</script>
本来であれば、テーブルの内容に合わせて以下のように
class名、rc-handle-containerとrc-handleが生成される
生成される内容
<div class="rc-handle-container" style="width: 500px;">
<div class="rc-handle" style="left: 128.609px; height: 30px;"></div>
<div class="rc-handle" style="left: 58px; height: 30px;"></div>
<div class="rc-handle" style="left: 221.484px; height: 30px;"></div>
<div class="rc-handle" style="left: 357.297px; height: 30px;"></div>
</div>
テーブルの内容
<table>
<thead>
<tr>
<th style="width: 19.81%;" class="0">#</th>
<th style="width: 24.71%;" class="1">#</th>
<th style="width: 32.81%;" class="2">#</th>
<th style="width: 48.84%;" class="3">#</th>
<th style="width: 50.4%;" class="4">#</th>
</tr>
</thead>
</table>
今回のケースでは、rc-handle-containerは生成されているが、rc-handleがテーブルの数分生成されず以下のみとなっている
<div class="rc-handle-container" style="width: 800px;"></div>
自分で試したこと
Jqueryの処理が実行されていることはわかっているので、
どこかで処理が止まってしまっているかを、alert設定し確認した
→ 5.6.7.8の処理が実行されなかった。
Creates dummy handle elements for all table header columns
@method createHandles
**/
value: function createHandles() {
alert("1の処理");
var _this = this;
var ref = this.$handleContainer;
if (ref != null) {
ref.remove();
}
this.$handleContainer = $('<div class=\'aaaaaaaa' + _constants.CLASS_HANDLE_CONTAINER + '\' />');
this.$table.before(this.$handleContainer);
alert("2の処理");
// alert($next.length);
// alert($current.is(_constants.SELECTOR_UNRESIZABLE));
// alert($next.is(_constants.SELECTOR_UNRESIZABLE));
this.$tableHeaders.each(function (i, el) {
alert("5の処理");
var $current = _this.$tableHeaders.eq(i);
var $next = _this.$tableHeaders.eq(i + 1);
alert("6の処理");
if ($next.length === 0 || $current.is(_constants.SELECTOR_UNRESIZABLE) || $next.is(_constants.SELECTOR_UNRESIZABLE)) {
alert("3の処理");
return;
}
alert("4の処理");
var $handle = $('<div class=\'' + _constants.CLASS_HANDLE + '\' />').data(_constants.DATA_TH, $(el)).appendTo(_this.$handleContainer);
});
alert("7の処理");
this.bindEvents(this.$handleContainer, ['mousedown', 'touchstart'], '.' + _constants.CLASS_HANDLE, this.onPointerDown.bind(this));
}
}, {
key: 'assignPercentageWidths',
/**
以下で、$tableHeadersに値を設置する処理があった。
$tableHeadersの値を確認したところ、0だった。
@method refreshHeaders
**/
value: function refreshHeaders() {
// Allow the selector to be both a regular selctor string as well as
// a dynamic callback
var selector = this.options.selector;
if (typeof selector === 'function') {
alert("8の処理");
selector = selector.call(this, this.$table);
}
alert("9の処理");
this.$tableHeaders = this.$table.find(selector);
alert(this.$tableHeaders.length.toString());
// Assign percentage widths first, then create drag handles
this.assignPercentageWidths();
this.createHandles();
}
}, {
key: 'createHandles',
/**
var ResizableColumns = (function () {
function ResizableColumns($table, options) {
alert("ResizableColumnsの処理");
_classCallCheck(this, ResizableColumns);
this.ns = '.rc' + this.count++;
this.options = $.extend({}, ResizableColumns.defaults, options);
this.$window = $(window);
this.$ownerDocument = $($table[0].ownerDocument);
this.$table = $table;
this.refreshHeaders();
this.restoreColumnWidths();
this.syncHandleWidths();
this.bindEvents(this.$window, 'resize', this.syncHandleWidths.bind(this));
if (this.options.start) {
this.bindEvents(this.$table, _constants.EVENT_RESIZE_START, this.options.start);
}
if (this.options.resize) {
this.bindEvents(this.$table, _constants.EVENT_RESIZE, this.options.resize);
}
if (this.options.stop) {
this.bindEvents(this.$table, _constants.EVENT_RESIZE_STOP, this.options.stop);
}
}
_createClass(ResizableColumns, [{
key: 'refreshHeaders',
/**
0