jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html_jquery 很多方块排列在一起改变一个格子的大小任可以排列整齐-优快云博客

本文介绍了一个使用jQuery实现的可拖动调整表格列宽的方法。通过简单的代码示例，展示了如何让用户自由调整表格中各列的宽度，并保存调整后的设置。

演示地址：http://www.daixiaorui.com/Public/demo/js/drag_tb/

本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery可拖动表格调整列格子的宽度大小</title>

</head>

<body>

<style type="text/css">

table{border-collapse:collapse;border-spacing:0;}

.listext th{background:#eee;color:#3366cc;}

.listext th,.listext td{border:solid 1px #ddd;text-align:left;padding:10px;font-size:14px;}

.rc-handle-container{position:relative;}

.rc-handle{position:absolute;width:7px;cursor:ew-resize;*cursor:pointer;margin-left:-3px;}

</style>

<table width="100%" class="listext">

<tr>

<th>www</th>

<th>daixiaorui</th>

<th>com</th>

</tr>

<tr>

<td>欢迎</td>

<td>您的</td>

<td>访问</td>

</tr>

<tr>

<td>欢迎</td>

<td>您的</td>

<td>访问</td>

</tr>

</table>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.resizableColumns.js"></script>

<script type="text/javascript">

$(function(){

$("table").resizableColumns({});

});

</script>

</body>

</html>

最后说明一下，本实例没有提供下载，如果要正常运行使用，可以点击上面的“演示地址”进去，然后右键查看源文件，里面有js路径，把路径复制到浏览器下载下来就可以了。如果有任何问题，可以与代潇瑞博客交流。

文章出自：http://www.daixiaorui.com/read/98.html 本站所有文章，除注明出处外皆为原创，转载请注明本文地址，版权所有。

本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html

JS文件代码如下

var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
  __slice = [].slice;

(function($, window) {
  var ResizableColumns;

  ResizableColumns = (function() {
    ResizableColumns.prototype.defaults = {
      store: window.store,
      rigidSizing: false
    };

    function ResizableColumns($table, options) {
      this.mousedown = __bind(this.mousedown, this);
      var _this = this;

      this.options = $.extend({}, this.defaults, options);
      this.$table = $table;
      this.tableId = this.$table.data('resizable-columns-id');
      this.createHandles();
      this.restoreColumnWidths();
      this.syncHandleWidths();
      $(window).on('resize.rc', (function() {
        return _this.syncHandleWidths();
      }));
    }

    ResizableColumns.prototype.destroy = function() {
      this.$handleContainer.remove();
      this.$table.removeData('resizableColumns');
      return $(window).off('.rc');
    };

    ResizableColumns.prototype.createHandles = function() {
      var _this = this;

      this.$table.before((this.$handleContainer = $("<div class='rc-handle-container' />")));
      this.$table.find('tr th').each(function(i, el) {
        var $handle;

        if (_this.$table.find('tr th').eq(i + 1).length === 0 || (_this.$table.find('tr th').eq(i).attr('data-noresize') != null) || (_this.$table.find('tr th').eq(i + 1).attr('data-noresize') != null)) {
          return;
        }
        $handle = $("<div class='rc-handle' />");
        $handle.data('th', $(el));
        return $handle.appendTo(_this.$handleContainer);
      });
      return this.$handleContainer.on('mousedown', '.rc-handle', this.mousedown);
    };

    ResizableColumns.prototype.syncHandleWidths = function() {
      var _this = this;

      this.$handleContainer.width(this.$table.width());
      return this.$handleContainer.find('.rc-handle').each(function(_, el) {
        return $(el).css({
          left: $(el).data('th').outerWidth() + ($(el).data('th').offset().left - _this.$handleContainer.offset().left),
          height: _this.$table.height()
        });
      });
    };

    ResizableColumns.prototype.saveColumnWidths = function() {
      var _this = this;

      return this.$table.find('tr th').each(function(_, el) {
        var id;

        if ($(el).attr('data-noresize') == null) {
          id = _this.tableId + '-' + $(el).data('resizable-column-id');
          if (_this.options.store != null) {
            return store.set(id, $(el).width());
          }
        }
      });
    };

    ResizableColumns.prototype.restoreColumnWidths = function() {
      var _this = this;

      return this.$table.find('tr th').each(function(_, el) {
        var id, width;

        id = _this.tableId + '-' + $(el).data('resizable-column-id');
        if ((_this.options.store != null) && (width = store.get(id))) {
          return $(el).width(width);
        }
      });
    };

    ResizableColumns.prototype.mousedown = function(e) {
      var $currentGrip, $leftColumn, $rightColumn, idx, leftColumnStartWidth, rightColumnStartWidth,
        _this = this;

      e.preventDefault();
      this.startPosition = e.pageX;
      $currentGrip = $(e.currentTarget);
      $leftColumn = $currentGrip.data('th');
      leftColumnStartWidth = $leftColumn.width();
      idx = this.$table.find('tr th').index($currentGrip.data('th'));
      $rightColumn = this.$table.find('tr th').eq(idx + 1);
      rightColumnStartWidth = $rightColumn.width();
      $(document).on('mousemove.rc', function(e) {
        var difference, newLeftColumnWidth, newRightColumnWidth;

        difference = e.pageX - _this.startPosition;
        newRightColumnWidth = rightColumnStartWidth - difference;
        newLeftColumnWidth = leftColumnStartWidth + difference;
        if (_this.options.rigidSizing && ((parseInt($rightColumn[0].style.width) < $rightColumn.width()) && (newRightColumnWidth < $rightColumn.width())) || ((parseInt($leftColumn[0].style.width) < $leftColumn.width()) && (newLeftColumnWidth < $leftColumn.width()))) {
          return;
        }
        $leftColumn.width(newLeftColumnWidth);
        $rightColumn.width(newRightColumnWidth);
        return _this.syncHandleWidths();
      });
      return $(document).one('mouseup', function() {
        $(document).off('mousemove.rc');
        return _this.saveColumnWidths();
      });
    };

    return ResizableColumns;

  })();
  return $.fn.extend({
    resizableColumns: function() {
      var args, option;

      option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
      return this.each(function() {
        var $table, data;

        $table = $(this);
        data = $table.data('resizableColumns');
        if (!data) {
          $table.data('resizableColumns', (data = new ResizableColumns($table, option)));
        }
        if (typeof option === 'string') {
          return data[option].apply(data, args);
        }
      });
    }
  });
})(window.jQuery, window);