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脚本
Dec 03 Javascript
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 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安装攻略:常见问题解答(二)
2006/10/09 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php微信公众号开发模式详解
2016/11/28 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
植物选择:Botanic Choice
2017/02/15 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
集体婚礼策划方案
2014/02/22 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书