javascript - html表格列调整大小

Question

我使用 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');
                });

            });
        });

谢谢。

Answer 1

我猜 resizing = true需要一个分号。