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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php中stream(流)的用法
2014/03/25 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JS实现简单日历特效
2020/01/03 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
python通过文件头判断文件类型
2015/10/30 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
行政专员岗位职责
2014/01/02 职场文书
业务部主管岗位职责
2014/01/29 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
公司员工离职证明书
2014/10/04 职场文书
招标保密承诺书
2015/01/20 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
迎新年主持词
2015/07/06 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL