javascript – 使用jQuery重新调整表大小的列

2023年9月14日 219次阅读

我正在尝试编写一段代码,使列重新调整功能到我的数据表.但它不能正常工作..我在互联网上探索了几天但除了一些插件我什么也找不到.但我不想使用任何插件,因为我的数据表非常复杂,如果我使用它们,表的其他功能可能会被破坏.因此我尝试编写自己的.您可以检查并优化我的代码或建议任何其他符合我的规范的代码….

注意：用户可以向右重新调整列的大小,直到表格宽度,但是向左移动,仅向上到td的左侧位置.

Eidt：麦克斯韦给了一个很好的选择..它的工作正常,但在一个案例中.如果我尝试向左侧调整大小,它不允许,因为td宽度固定为它的内容宽度…但我想重新调整它的大小通过将td的样式置于溢出：隐藏或其他方式,向左侧移动它的偏移量().

这是我的一段代码….

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <style>
  table{
   border-collapse:collapse;
  }
  table td{
    border:1px solid red;
  }
  .vUiDtColResize{
   width:2px;
   height:20px;
   border:1px solid blue;
   float:right;
   display:block;
   cursor:w-resize;
   position:relative;
   right:-3px;
   float:top;
  }
  </style>
 </head>

 <body>
  <table>
   <thead>
    <tr>
     <td>S.No   <div class="vUiDtColResize"></div></td>
     <td>Name   <div class="vUiDtColResize"></div></td>
     <td>Qualif <div class="vUiDtColResize"></div></td>
    </tr>
   </thead>
   <tbody>
      <tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
      <tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
      <tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
      <tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
   </tbody>
  </table>
  <div id="helper"></div>
 </body>
 <script>
  $('.vUiDtColResize').each(function(){

     var _rsTd = $(this).parent('td');
     var _rsTr = _rsTd.parent('tr');
     var _rsTdRight,_thisLeft,_rsTdWidth;

     $(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
         create:function(event,ui){
         },
         start:function(event,ui){
         _rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
         },
         drag:function(event,ui){
           var _sizeDiff = $(this).offset().left - _rsTdRight;
           _rsTdRight = $(this).offset().left;
          _rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
          _rsTd.outerWidth(_rsTdWidth);
         },
         stop:function(event,ui){
         }
     });
  });

 </script>
</html>

最佳答案 我将你的代码与我找到的一些技术合并 –
http://jsfiddle.net/tpqn7/

恕我直言,还有一些问题.首先,我认为如果可以通过按下每个TH来重新调整表格标题(不仅仅是小边框),它会更好(也更容易).

希望这可以帮助.

点赞