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高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
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中常见的缓存技术实例分析
2015/09/23 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
Postman模拟发送带token的请求方法
2018/03/31 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python 元类实例解析
2018/04/04 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python实现简易动态时钟
2018/11/19 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python多线程并发及测试框架案例
2019/10/15 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
钳工实习自我鉴定
2013/09/19 职场文书
个人自我鉴定怎么写
2013/10/28 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
谢师宴邀请函
2015/02/02 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书