jQuery拖动调整表格列宽度-resizableColumns

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

一、引入文件：

<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路径下

------------------------切割线----------------------------

假设未实现效果。可使用 colResizable 插件

參考： http://blog.itmyhome.com/2016/05/jquery-colresizable

2016-05-05

转载于:https://www.cnblogs.com/xfgnongmin/p/10740412.html

jQuery拖动调整表格列宽度-resizableColumns相关推荐

拖动 html表格单元格宽度,jQuery实现拖动调整表格单元格大小的代码实例
jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功 ...
php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
datables自定义ajax,JQuery DataTables.net自定义列宽度在ajax加载后不起作用
因为数据表是如何实现的,你可以设置宽度为所有列,但一个.然后,该专栏将设计成占据剩余的空间. 但是,我们不希望这样.所以,我所做的是在文件的CSS部分添加一个新条目. 我说: table#tblNot ...
element-ui表格列宽度根据内容计算最小宽度min-width实现自适应参考
element ui的表格列遍历tableData 与表头,找出该列最长的字符max 创建span标签计算最长字符所占宽度offsetWidth 设置min-width属性(String类型) 在组 ...
python设置单元格宽度_Python-docx设置表格列宽度
设置表格列宽的方法: table.cell(row,col).width=Inches(),指定单元格列宽,同列单元格列宽相同. from docx import Document from docx ...
html生成pdf表格线加粗,iText 用 HTMLWorker 转换 HTML 为 PDF 时可设置表格列宽度
生成 pdf 的方式有多种,直接用 iText 编码控制产生,fop 转换,不过我觉得很方便的一种方法就是用 iText 的 HTMLWorker 类直接把 HTML 转换成相应的 PDF 文档,HT ...
html表格列宽度比例,HTML表格的整体宽度，以及各列的宽度均可以由（　）属性来控制。...
[填空题]TRIZ 包含许多发明问题解决工具,包括矛盾矩阵 , _________,技术系统进化法则,发明问题标准解法,以及发明问题解决标准算法 ARIZ 等. [单选题]在机动车商业险中,当保险人对 ...
html表格第一列长度,表格table列宽度控制colgroup
标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. 注释:只能在提示:如果想对中的某列定义不同的属性,请在标签内 ...
SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
这是 Jerry 2021 年的第 37 篇文章,也是汪子熙公众号总共第 313 篇原创文章. Jerry 之前的文章一个 SAP 开发工程师十余年的技术写作之路回顾曾经提到,知乎上安晓辉老师的一 ...
Latex调整表格宽度
Latex调整表格列的间距 \renewcommand{\arraystretch}{1.3}%调行距 \setlength\tabcolsep{3pt}%调列距 LaTeX在编译时总会遇到各种各样的 ...

jQuery拖动调整表格列宽度-resizableColumns

jQuery拖动调整表格列宽度-resizableColumns相关推荐

最新文章

热门文章