jquery可拖动表格调整列格子的宽度大小 本文章来源于 代潇瑞博客 原文地址：http://www.daixiaorui.com/read/98.html
来源：互联网 发布：淘宝定制耳机推荐 编辑：程序博客网 时间：2024/05/22 04:35
演示地址：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); 0 0
- jquery可拖动表格调整列格子的宽度大小 本文章来源于 代潇瑞博客 原文地址：http://www.daixiaorui.com/read/98.html
- jquery可拖动表格调整列格子的宽度大小
- session和cookie的区别 本篇文章来源于 站长资讯网 原文链接：http://www.chinahtml.com/1007/128010707619425.html
- jQuery拖动调整表格列宽度-resizableColumns
- jQuery拖动调整表格列宽度-resizableColumns
- Windows让我们养成了什么臭毛病 本篇文章来源于 黑基网-中国最大的网络安全站点 原文链接：http://www.hackbase.com/news/2010-05-10/35154.html
- Ubuntu 10.04地址导航栏修改为显示路径 本篇文章来源于 Linux公社网站(www.linuxidc.com) 原文链接：http://www.linuxidc.com/Linux/20
- Jquery 获取表单text,areatext,radio,checkbox,select值的代码(本内容来自唯才教育网http://www.hn1c.com 原文地址：http://www.hn1
- 解决：type="password" type="text"用户名和密码输入框大小不一样 本篇文章来源于 电脑知识网(www.diannaozs.com) 原文出处：http://www.dianna
- 解决：type="password" type="text"用户名和密码输入框大小不一样 本篇文章来源于 电脑知识网(www.diannaozs.com) 原文出处：http://www.diann
- Linux内核部件分析 更强的链表klist 本篇文章来源于 Linux公社网站(www.linuxidc.com) 原文链接：http://www.linuxidc.com/Linux/2011
- Linux下用内存管理器的钩子函数跟踪内存泄漏 本篇文章来源于 Linux公社网站(www.linuxidc.com) 原文链接：http://www.linuxidc.com/Linux/200
- Linux下/dev/mem和/dev/kmem的区别 本篇文章来源于 Linux公社网站(www.linuxidc.com) 原文链接：http://www.linuxidc.com/Linux
- 在U-boot下实现自动识别启动Flash的原理 本篇文章来源于 Linux公社网站(www.linuxidc.com) 原文链接：http://www.linuxidc.com/Linux/201
- [免费]客户端动态拖动列、调整宽度的表格
- linux动态库加载的秘密(原文地址：http://www.cnblogs.com/LiuYanYGZ/p/5545835.html)
- Android开发：用getDrawingCache方法获取ImageView中的图像需要注意的问题 本篇文章来源于 Linux公社网站(www.linuxidc.com) 原文链接：http:/
- Jquery colResizable 插件 可拖动表格的宽度
- 腾讯天气预报接口pm25.in
- qt中实现多窗口切换
- 完全理解Gson（1）：简单入门
- Tomcat 多应用共享session
- 《你必须知道的495个C语言问题》知识笔记及补充
- jquery可拖动表格调整列格子的宽度大小 本文章来源于 代潇瑞博客 原文地址：http://www.daixiaorui.com/read/98.html
- 熄灯问题
- 获取UIView坐标和宽高
- 大数据在金融行业的应用——银行大数据
- Android BlueDroid（一）：BlueDroid概述
- 个人记录2015-11-16
- PowerDesigner中常用配置操作
- traceroute命令---Linux学习笔记
- Android中获取应用程序(包)的信息-----PackageManager的使用(一)
