实现鼠标可拖动调整表格列宽度 如图:


一、引入文件:

<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

jQuery拖动调整表格列宽度-resizableColumns的更多相关文章

  1. 使用jqueryUI实现自由调整表格列宽

    今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实 ...

  2. jQuery可调整表和列宽插件-colResizable

    最基本的例子 引入JS <script src="js/jquery-1.8.0.min.js" type="text/javascript">&l ...

  3. Java JTable列顺序和列宽度保存在用户本地

    上周碰到了一个棘手的需求,就是要把用JTable的列顺序和列宽度保存下来,这次用户调整了列宽度,关闭程序,下次再打开时,这个列的宽还是要保持,因为SWing的特性,都是在程序启动时就确定了列顺序和列宽 ...

  4. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  5. jQuery表格列宽可变,兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...

  6. vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...

  7. jquery隐藏table表格的某一列

    jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列

  8. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  9. html - table 表格不被撑开,td某些列宽度固定某些列自适应

    table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...

随机推荐

  1. 【Nginx笔记】nginx配置文件具体解释

    本文主要对nginx的配置做重点说明,关于nginx的其他基本概念.建议參考官网描写叙述.这里推荐Nginx Beginner's Guide这篇文档.对刚開始学习的人高速认识nginx非常有帮助. ...

  2. iframe - 基本用法

    · 用target的值,指向iframe框架的name值. <body> <form id="form1" runat="server"> ...

  3. TestNg JAVA 自动化单元测试框架Demo

    TestNg TestNg 是java的一个自动化单元测试框架 参考:http://testng.org/doc/index.html 环境准备 既然是java 的自动化单元测试框架,就必须要有jav ...

  4. NYOJ 1066 CO-PRIME(数论)

    CO-PRIME 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 This problem is so easy! Can you solve it? You are ...

  5. matlab中plot使用方法

    MATLAB有非常强的图形功能,能够方便地实现数据的视觉化.强大的计算功能与图形功能相结合为MATLAB在科学技术和教学方面的应用提供了更加广阔的天地.以下着重介绍二维图形的画法,对三维图形仅仅作简单 ...

  6. JAVA的反射机制学习笔记(二)

    上次写JAVA的反射机制学习笔记(一)的时候,还是7月22号,这些天就瞎忙活了.自己的步伐全然被打乱了~不能继续被动下去.得又一次找到自己的节奏. 4.获取类的Constructor 通过反射机制得到 ...

  7. Delphi经典网站收藏

    http://delphi.icm.edu.pl/   波兰的Delphi控件网站 http://dev.rdxx.com/Delphi/  国内的编程网站 非常全面 http://oracle.ch ...

  8. 14.4.3.4 Configuring InnoDB Buffer Pool Prefetching (Read-Ahead) 配置InnoDB Buffer pool 预读

    14.4.3.4 Configuring InnoDB Buffer Pool Prefetching (Read-Ahead) 配置InnoDB Buffer pool 预读 一个预读请求 是一个I ...

  9. 名字修饰约定extern "C"与extern "C++"浅析

    所谓名字修饰约定,就是指变量名.函数名等经过编译后重新输出名称的规则. 比如源代码中函数名称为int Func(int a,int b),经过编译后名称可能为?Func@@YAHHH@Z.?Func@ ...

  10. Jar包转成Dll的方式(带嵌套的jar也能做)

    研究很好几天,终于成功了.因为写了一个Java的项目,现在要求要改写成C#版本的.但是其中用到了svnkit,svnkit是java平台的.改写成C#的话,要使用SharpSVN,但是SharpSVN ...