ASP.NET MVC を使用して HTML テーブルを生成します。テーブルのレイアウト情報はデータベースに保存されているため、テーブルをレンダリングした後、AJAX 呼び出しを行ってこの情報 (列幅、可視性、表示順序など) を取得します。その後、各列の幅を設定します。ここまでは順調ですね。正しく動作します。また、列のサイズ変更 (mousedown、mousemove などを処理) のコードも作成しました。列の新しい幅を設定しますが、奇妙な動作をします。(サイズ変更はすべての列などに影響します。) 最初にサーバーから幅情報を取得しない場合 (テーブル ヘッダーの初期幅値ではありません)、正しく機能します。
要約すると、列の幅の値が事前に設定されている場合、サイズ変更は正しく機能しませんが、そうでない場合はうまく機能します。何か案が？
別の質問ですが、そのような機能が必要です。列のサイズを変更するときに、右側に配置された列のみに影響を与えたいのです。今のところ、すべての列を変更します。左側の列を修正するにはどうすればよいですか?
私の生成した HTML (少し簡略化) は次のようになります。
<table id="jobTableActual" width="850px" class="grid_container">
<tbody><tr>
<th width="50px">
<span class="create_button"></span>
</th>
<th id="colId" class="table_column_invisible header-sortable" width="75" style="display: none;">
<div class="table_column_header_text">Id</div>
<div class="table_column_resize_handle"></div>
</th>
<th id="colCode" class="header-sortable" width="77" style="">
<div class="table_column_header_text">Code</div>
<div class="table_column_resize_handle"></div>
</th>
<th id="colName1" class="header-sortable header-sorted-desc" width="106" style="">
<div class="table_column_header_text">Name</div>
<div class="table_column_resize_handle"></div>
</th>
<th id="colDescription1" class="header-sortable" width="107" style="">
<div class="table_column_header_text">Description</div>
<div class="table_column_resize_handle"></div>
</th>
<th id="colActive" class="header-sortable" width="75" style="">
<div class="table_column_header_text">Active</div>
<div class="table_column_resize_handle"></div>
</th>
</tr>
<tr class="">
<td>
<span class="edit_button"></span>
<span class="delete_button"></span>
</td>
<td class="table_column_invisible">
66
</td>
<td>
J0018
</td>
<td>
Job 18
</td>
<td>
67
</td>
<td align="center">
<input checked="checked" class="check-box" disabled="disabled" type="checkbox">
</td>
</tr>
<tr class="summary_row"><td colspan="100%">Showing 1 to 10 records of 10 total.</td></tr>
列のサイズを変更する私の JavaScript コードは次のようになります。
// create table column resize bar and hide it.
var $resizeBar = $('<div></div>').addClass('table_column_resize_bar')
.css('height', $table.height() - $summaryRow.height())
.appendTo($table)
.hide();
// for each table column header
$('#' + element.id + 'Actual th').each(function () {
var resizeHandle = $(this).find('.table_column_resize_handle');
var $nextColumnHeader = $(this).next();
//var $currentColumnHeader = $(this);
resizeHandle.mousedown(function (mouseDownEvent) {
$('#status').html('Status : Mouse down');
mouseDownEvent.preventDefault();
mouseDownEvent.stopPropagation();
// start resizing.
resizing = true
// save current mouse click position.
mouseMoveDelta = 0;
mouseCurrentX = mouseDownEvent.pageX;
mouseCurrentY = mouseDownEvent.pageY;
// save initial x coordinate to calculate total resize amount.
initialX = mouseCurrentX;
// adjust resize bar position and show it.
$resizeBar.css('left', $nextColumnHeader.offset().left);
$resizeBar.css('top', $nextColumnHeader.offset().top);
$resizeBar.show();
// handle mouse move element.
$('#' + element.id + 'Actual').mousemove(function (mouseMoveEvent) {
// if user didn't left click then do nothing.
if (!resizing) return;
$currentColumnHeader = resizeHandle.parent();
// calculate the difference of new position (mouseMoveEvent.pageX) and current position (mouseCurrentX).
mouseMoveDelta = Math.abs(mouseMoveEvent.pageX - mouseCurrentX);
if (mouseMoveEvent.pageX > mouseCurrentX) { // move right
$('#status').html('Status : Move right');
$resizeBar.css('left', $resizeBar.offset().left + mouseMoveDelta);
}
else { // move left
$('#status').html('Status : Move left');
$resizeBar.css('left', $resizeBar.offset().left - mouseMoveDelta);
}
// update current position.
mouseCurrentX = mouseMoveEvent.pageX;
mouseCurrentY = mouseMoveEvent.pageY;
$('#currentX').html(mouseCurrentX);
$('#currentY').html(mouseCurrentY);
});
// handle mouse up event for ending resize operation.
$(document).mouseup(function (mouseUpEvent) {
mouseUpEvent.preventDefault();
mouseUpEvent.stopPropagation();
if (!resizing) return;
resizing = false;
$('#' + element.id + 'Actual').unbind('mousemove');
$('#status').html('Status : Mouse up');
var width = parseInt($currentColumnHeader.width());
$currentColumnHeader.attr('width', width + (mouseUpEvent.pageX - initialX));
$resizeBar.hide();
$(document).unbind('mouseup');
});
});
});
ありがとう。