html 테이블 열 크기 조정

Question

ASP.NET MVC를 사용하여 HTML 테이블을 생성합니다. 테이블에 대한 레이아웃 정보는 데이터베이스에 저장되므로 테이블을 렌더링 한 후에이 정보 (열 너비, 가시성, 표시 순서 등)를 얻기 위해 AJAX 호출을합니다. 그 후 각 열에 너비를 설정합니다. 여태까지는 그런대로 잘됐다. 그것은 올바르게 작동합니다. 나도 열 크기 조정 (mousedown, mousemove 처리 등)을위한 코드를 작성했습니다. 열의 새로운 너비를 설정했지만 이상하게 작동합니다. (크기 조정은 모든 컬럼 등에 영향을 미친다.) 서버에서 처음으로 너비 정보를 얻지 못하면 (테이블 헤더의 초기 너비 값이 아님) 올바르게 작동한다.

요약하면, 열의 너비 값이 미리 설정되어 있으면 크기 조정이 제대로 작동하지 않을 수 있습니다. 그렇지 않으면 제대로 작동합니다. 어떤 생각?

또 다른 질문입니다. 열의 크기를 조정할 때 이와 같은 기능이 필요합니다. 오른쪽 열에 만 영향을 주길 원합니다. 지금은 모든 열을 변경합니다. 왼쪽의 기둥을 어떻게 고칠 수 있습니까?

은 (조금 단순화)는 아래와 같이 생성 된 HTML 내 :

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

      }); 
     }); 

감사 : 열 크기를 조정

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

내 자바 스크립트 코드는 다음과 같다.

Answer 1

나는 resizing = true에 세미콜론이 필요하다고 생각합니다.