jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html

演示地址：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">

<head>

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

</head>

<body>

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>

<tr>

<th>daixiaorui</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

$(function(){

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

});

</script>

</body>

</html>

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

本文章来源于代潇瑞博客原文地址：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);

jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html相关推荐

markdown 表格调整列宽
利用简单 html 语法调列宽的方法. Case 1: 预留宽度,用于打印后填写一个比较简单粗暴的方法自然是加一段空格符一个更加优雅的方法则是使用空的 <img>标 ...
实现option上下移动_用jQuery实现lt;selectgt;选项上下移动 - 不要哀求学会争取若是如此终有所获 - ITeye博客...
嘖嘖嘖,短短兩個API串接: $opt.next().after($opt)就做出了向下移動的效果.記得以往用純Javascript寫,還得判斷是否為最後一個,若是就不能下移:然後上下位置交換得用op ...
深入学习 jQuery 选择器系列第三篇——过滤选择器之索引选择器 - 小火柴的蓝色理想 - 博客园...
博客地址: http://www.cnblogs.com/xiaohuochai/p/5807292.html#3559878 写的很细致的博文, 手动收藏+转发. 转载于:https://www ...
网络安全职业道路_汽车安全我们的道路
网络安全职业道路意见 (OPINION) In 2010, security researchers at the University of California San Diego and th ...
判断jQuery选择器结果为空 - CSDN博客
判断jQuery选择器结果为空 - CSDN博客原文:判断jQuery选择器结果为空 - CSDN博客 jQuery选择器获取到的是一个对象,所以无论页面上存在或者不存在元素,这个对象都不为空.因此 ...
拖动 html表格单元格宽度,jQuery实现拖动调整表格单元格大小的代码实例
jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功 ...
bootstrap 可以拖动表格宽度_word表格技巧：如何快捷调整表格
有人曾经说过这么一句话:复杂的表格Excel做,简单的表格Word做.例如:个人简历.日程表.工作安排.请假单等等一些简单的表格,一般都会首选Word来制作完成. 但是,要想制作出符合心意的Word表 ...
调整Word表格的列宽和行高(转)
调整Word表格的列宽和行高(转) 创建表格时,Word表格的列宽往往采用默认值,我们可以对其进行修改.根据不同的需要,有四种调整方法可供选择使用: 一.利用鼠标左键在分隔线上拖动. 二.利用鼠标左键 ...
计算机做表格的行高和列宽,表格中列和行的插入与删除及行高和列宽的调整——想象力电脑应用...
大多数数据输入到工作表后都需要进行管理和格式设置,以获得更好的显示效果,也便于分辨各类型的数据.这里我们将介绍行或列的插入与删除和行高和列宽的调整. 一.行或列的插入与删除在输入数据时,如果遗漏了某 ...

jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html

jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html相关推荐

最新文章

热门文章

jquery可拖动表格调整列格子的宽度大小 本文章来源于 代潇瑞博客 原文地址：http://www.daixiaorui.com/read/98.html

jquery可拖动表格调整列格子的宽度大小 本文章来源于 代潇瑞博客 原文地址：http://www.daixiaorui.com/read/98.html相关推荐

最新文章

热门文章

jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html

jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html相关推荐