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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
JS实现随机抽选获奖者
Nov 07 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
php连接mssql数据库的几种方法
2013/02/21 PHP
php 基础函数
2017/02/10 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
Python中使用动态变量名的方法
2014/05/06 Python
深入理解Python3中的http.client模块
2017/03/29 Python
浅析python参数的知识点
2018/12/10 Python
python的faker库用法
2019/11/28 Python
基于python实现文件加密功能
2020/01/06 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python 必须了解的5种高级特征
2020/09/10 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
报到证办理个人委托书
2014/10/06 职场文书
开国大典观后感
2015/06/04 职场文书
教师节随笔
2015/08/15 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
Java设计模式中的命令模式
2022/04/28 Java/Android