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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
利用js实现简单开关灯代码
Nov 23 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对XML的操作详解
2013/06/07 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python实现文法左递归的消除方法
2020/05/22 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
二年级评语大全
2014/04/23 职场文书
企业宣传口号
2014/06/12 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
人事局接收函
2015/01/31 职场文书
小学六一主持词开场白
2015/05/28 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
python opencv通过4坐标剪裁图片
2021/06/05 Python