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 相关文章推荐
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
js+css实现红包雨效果
Jul 12 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
JavaScript中的私有成员
2006/09/18 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
JS实现简单抖动效果
2017/06/01 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
让代码变得更易维护的7个Python库
2018/10/09 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
试述DBMS的主要功能
2016/11/13 面试题
创业大赛策划书
2014/03/01 职场文书
人事部岗位职责范本
2014/03/05 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
车辆工程专业求职信
2014/06/14 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
金陵十三钗观后感
2015/06/04 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python