html table column resize

Question

I generate an HTML table using ASP.NET MVC. The layout info for table is stored in a database, so after I render the table, I make an AJAX call to get this info (column widths, visibility, display order etc.) After that, I set widths for each column. So far so good. It works correctly. I also wrote code for column resizing (handled mousedown, mousemove etc.) It sets the new width for the column but behaves weirdly. (resizing affects all columns etc.) When I don't get width info from server first, (that is no initial width value for table headers) it works correctly.

To sum up, if columns' width values are preset, resizing works wrong, if it is not, it works well. Any idea?

Another question, I need such a functionality, when I resize a column, I want it to affect only the columns placed on the right side of it. For now, it changes all columns. How can I fix the columns on the left side?

My generated HTML (little bit simplified) is like below:

<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>

My javascript code which resizes columns is like below :

            // 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');
                });

            });
        });

Thanks.

Answer 1

我猜resizing = true需要分号。