使用jQuery重新调整表列大小

Table column re-sizing using jQuery

本文关键字：调整 jQuery 新调整 使用      更新时间：2023-09-26

我正试图编写一段代码，为我的数据表启用列重新调整大小的功能。但是它不能正常工作。。我在网上浏览了几天，但除了一些插件什么也找不到。但我不想使用任何插件，因为我的数据表非常复杂，如果我使用它们，表的其他功能可能会被破坏。因此，我试着写自己的作品。你能检查并完善我的代码吗？或者建议任何其他符合我规范的代码…
注意：用户可以向右调整列的大小，直到表格宽度，但向左调整，它只在td的左侧位置
Eidt:Maxwell给出了一个很好的替代方案。。它运行良好，但有一种情况。如果我试图向左调整大小，这是不允许的，因为td宽度固定为它的内容宽度。。。但我想通过将td的样式设置为溢出：隐藏或其他方式，将其重新调整到左侧，直到其偏移（）。left值。。。。
这是我的一段代码。。。。

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

IMHO，还是有一些问题。首先，我想如果可以通过按下每个TH来重新调整表头的大小，而不仅仅是小边框，那会更好（也更容易）。

希望这能有所帮助。

在互联网上探索了几天后，我得到了一个很好的代码，我对它进行了修改，使其也能满足我的要求（当然，我的更改有点小。它可能对其他人有用，所以我在这里发布…
样式

 <link rel="stylesheet" href="E:'Examples'BSP'BSPExtensions'jquery-ui-1.8.18.custom.css"/>
<style>
table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid black;   
}
tr.last td {
    border-bottom: 1px solid black;
}
td {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    position: relative;
    white-space:nowrap;
    padding: 2px 5px;
    text-align: left;
    overflow:hidden;
}
td.last {
    border-right: none;
}
thead td div:first-child{
  text-overflow:ellipsis;
  overflow:hidden;
}
tbody td div:first-child{
  overflow:hidden;
}
.scrollContainer {
    overflow:auto;
    width:700px;
    height:auto;
    display:inline-block;
    border:1px solid red;
}
@-moz-document url-prefix() {
  .resizeHelper,.ui-resizable-e {
        position: relative;
        float: right;       
    }
}
</style>

脚本

<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>
<script>
 /**
 * Enables resizable data table columns.
 **/
(function($) {
   $.widget("ih.resizableColumns", {
       _create: function() {
            this._initResizable();
        },
        _initResizable: function() {
            var colElement, colWidth, originalSize;
            var table = this.element;
            this.element.find("thead td").resizable({
                handles: {"e": ".resizeHelper"},
                minWidth: 2, // default min width in case there is no label
                // set correct COL element and original size
                start:function(event, ui) {
                    var colIndex = ui.helper.index() + 1;
                    colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
                    colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
                    originalSize = ui.size.width;
                },                
                // set COL width
                resize: function(event, ui) {
                    var resizeDelta = ui.size.width - originalSize;                    
                    var newColWidth = colWidth + resizeDelta;
                    colElement.width(newColWidth);
                    // height must be set in order to prevent IE9 to set wrong height
                    $(this).css("height", "auto");
                }
            });
        }
    });
    // init resizable
    $("#MyTable").resizableColumns();
})(jQuery);
</script>

你的html就像：*

<div class="scrollContainer">
    <table class="resizable" id="MyTable" width="100%">
         <thead>
            <tr>
                <td class="ui-resizable" style="width:100px;">
                <div>
                    <span >Column 1</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 2</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:300px;">
                <div>
                    <span >Column 3</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:150px;">
                <div>
                    <span >Column 4</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 5</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable last" style="width:100px;">
                <div>
                    <span >Column 6</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>
            <tr class="last">
                <td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>
        </tbody>
    </table>
</div>
相关文章：