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 相关文章推荐
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
vue中如何使用ztree
Feb 06 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 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扩展介绍与开发教程
2010/08/19 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
PHP文件与目录操作示例
2016/12/24 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jquery实现图片预加载
2015/12/25 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python pass 语句使用示例
2014/03/11 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
Linux操作面试题
2015/02/11 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
采购主管的岗位职责
2013/12/17 职场文书
关于环保的建议书400字
2014/03/12 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
工地安全质量标语
2014/06/07 职场文书
本科生自荐信
2014/06/18 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript