jQuery拖动调整表格列宽度-resizableColumns
2024-10-10 23:41:47
实现鼠标可拖动调整表格列宽度 如图:
一、引入文件:
<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://download.csdn.net/detail/itmyhome/7390263
分别解压两个文件
jquery.resizableColumns.js在\jquery-resizable-columns-gh-pages\dist路径下
store.js在store.js-master路径下
欢迎增加JAVA技术交流群:74955800
最新文章
- view向上滚动
- android studio serialversionuid设置
- 一个Struts2的实例
- oracle的表空间
- 以雅酷网为实例从技术上说说dedecms的seo优化要注意哪些?
- Android实现传感器应用及位置服务
- 南阳理工ACM975--关于521
- TestDriven.NET – 快速入门
- Nexus Maven 私服搭建
- .Net Mvc实现各种表格随意切换插件
- neutron相关知识
- loadrunner&#160;技巧-模拟Run&#160;Logic中的随机Action运行
- [VMWARE] [CENTOS7] 安装VMware-Tools
- BZOJ3451 Normal 期望、点分治、NTT
- 5、JVM的监控与分析工具
- Goroutines和Channels(三)
- 2018.09.26 bzoj5221: [Lydsy2017省队十连测]偏题(数学推导+矩阵快速幂)
- Mysql使用binlog恢复数据解决误操作问题的两种方法
- 麦子学院bootstrap实战项目官网,后台,jquery.singlePageNav.min.js ,wow.min.js,animate.css使用
- 编译问题: ";ld: duplicate symbol _OBJC_METACLASS_$_XXX...";
热门文章
- 初入Android--Activate生命周期
- [课堂实践与项目]NavigationController与TabBarController的综合使用及易错点分析(包含消息提醒,app更新)
- fzu 1911 Construct a Matrix(矩阵快速幂+规律)
- 基于visual Studio2013解决面试题之0603调整数组
- DButils工具类能够用来获取数据库连接向数据库插入更新删除对象2
- JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans
- vcredist_x86.exe 静默安装方法
- Html网页表格结构化标记的应用
- hdu3072
- [置顶] 关于redhat系统yum源的配置1