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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
Vue可自定义tab组件用法实例
Oct 24 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生成文件
2007/01/15 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP代码优化技巧小结
2015/09/29 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
在Django中创建第一个静态视图
2015/07/15 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python socket 套接字实现通信详解
2019/08/27 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python 实现单通道转3通道
2019/12/03 Python
基于Python实现粒子滤波效果
2020/12/01 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
推广普通话演讲稿
2014/05/23 职场文书
大学生标准自荐书
2014/06/15 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL