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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
React配置子路由的实现
Jun 03 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调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
详解Python pygame安装过程笔记
2017/06/05 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
我的求职计划书
2014/01/10 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
颐和园导游词400字
2015/01/30 职场文书
欠条样本
2015/07/03 职场文书
校运会宣传稿大全
2015/07/23 职场文书
python小程序之飘落的银杏
2021/04/17 Python
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python