html table column resize

Question

Я создаю таблицу HTML с помощью ASP.NET MVC. Информация о расположении таблицы хранится в базе данных, поэтому после визуализации таблицы я делаю вызов 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 требует использования двоеточия.