jQuery实现鼠标可拖动调整表格列宽度


Posted in Javascript onMay 26, 2014

实现鼠标可拖动调整表格列宽度 如图:
jQuery实现鼠标可拖动调整表格列宽度 
一、引入文件:

<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="/js/store.js" type="text/javascript"></script> 
<script src="/js/jquery.resizableColumns.js" type="text/javascript"></script>

二、TABLE
<table id="myTable" border="1"> 
<thead> 
<tr> 
<th data-resizable-column-id="a"><input type="checkbox" /></th> 
<th data-resizable-column-id="b">栏目类型 </th> 
<th data-resizable-column-id="c">活动名称 </th> 
<th data-resizable-column-id="d">状态 </th> 
<th data-resizable-column-id="e">操作选项</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><input type="checkbox" /></td> 
<td>青春日记</td> 
<td>2014年度青春日记征文 </td> 
<td>提交 </td> 
<td>审核</td> 
</tr> 
<tr> 
<td><input type="checkbox" /></td> 
<td>我和孩子的成长故事</td> 
<td>成长故事 </td> 
<td>通过 </td> 
<td>审核</td> 
</tr> 
</tbody> 
</table>

以上html只是作为Demo 并不是我项目中所实际使用的,并且在测试的时候 也未能实现。郁闷...

三、实现表格可拖动

<script type="text/javascript"> 
$(function(){ 
$("#myTable").resizableColumns({ 
store: window.store 
}); 
}) 
</script>

在项目使用过程中 发现无需引入store.js <th>也无需data-resizable-column-id属性

并且$("#myTable").resizableColumns();也可实现功能

所需文件下载地址:http://xiazai.3water.com/201405/yuanma/jquery-resizableColumns.zip

分别解压两个文件

jquery.resizableColumns.js在\jquery-resizable-columns-gh-pages\dist路径下

store.js在store.js-master路径下

Javascript 相关文章推荐
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
js实现小时钟效果
Mar 25 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
js处理表格对table进行修饰
May 26 #Javascript
利用jQuery实现可以编辑的表格
May 26 #Javascript
js实现简单的购物车有图有代码
May 26 #Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
单元选择合并变色示例代码
May 26 #Javascript
jquery实现的一个文章自定义分段显示功能
May 23 #Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 #Javascript
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
JS之小练习代码
2008/10/12 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
独特的python循环语句
2016/11/20 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
职业生涯规划书结束语
2014/04/15 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
运动会广播稿50字
2015/08/19 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis