table实现列宽的拖动效果

最新推荐文章于 2023-06-12 15:42:50 发布
最新推荐文章于 2023-06-12 15:42:50 发布
阅读量1k 收藏
点赞数
分类专栏： 问题记录 文章标签： table 拖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_here/article/details/84912991
版权

部门有一个项目界面用的html，所有的列表都用的原生table控件，一个同事找到我问有没有办法实现table的列宽拖动，好几年没摸过前台了，还真给问住了，经过网上查询资料等，最终解决，记录下：

 

    <!DOCTYPE html>  
    <html>  
    <head>  
      <title>table拖动列宽</title>            
    </head>  
    <body>
	
     <table width="100%" border="1" class="resizable-table">  
		<tr>
			<th width="10%">1</th>
			<th width="20%">2</th>
			<th width="70%">3</th>
		</tr>
        <tr>  
           <td>1</td><td>2</td><td class="right">3</td>  
        </tr>  
        <tr>  
            <td>1</td><td>2</td><td class="right">3</td>   
        </tr>  
        <tr>  
            <td>1</td><td>2</td><td class="right">3</td>  
        </tr>  
        <tr>  
            <td>1</td><td>2</td><td class="right">3</td>  
        </tr>                                                                   
    </table>               
     </body> 

    <script  src="jquery.js"></script>  
    <script  src="colResizable-1.6.min.js"></script>  
    <script  src="colResizable-1.6.js"></script>  	 
     </html>
其中 colResizable-1.6.min.js中添加了

 

//初始化class为resizable-rable的列表
$("table.resizable-table").colResizable({liveDrag:true, draggingClass:"dragging"});

 具体引用文件见附件

java_here
关注
专栏目录
table实现列宽的动态拖动
weixin_43627406的博客
10-23 698
<!DOCTYPE html> <html> <head> <title>table拖动列宽</title> </head> <body> <table width="100%" border="1" class="resizabl...
前端页面实现table可拖动改变列宽
Java_Long_Asus的博客
02-20 8987
此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下： 1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery， （1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载 （2）引入文件...
Table 列宽拖动
04-27
当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。
原生js实现 table表格列宽拖拽
nunumaymax的博客
05-12 1110
原生js实现 table表格列宽拖拽 代码如下： //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; var table = document.getElementById("tb_3"); for (j = 0; j < table.rows[0].cells.length; j++) { table.rows[0].cells[j].onmousedown = function () { //记录单元格
bootstrapTable实现列宽可拖动
07-06
1. **启用列宽拖动功能**：在初始化 BootstrapTable 时，需要设置参数 `responsive` 为 `true`，以启用响应式布局。然后，通过设置 `width` 参数来指定列宽，或者使用 `data-width` 属性在表格列的 `<th>` 元素中...
Bootstrap Table列宽拖动的方法
10-18
实现Bootstrap Table列宽拖动功能需要使用Resizable扩展插件。Resizable插件是一个可选功能，它允许表格列宽能够被拖动调整。要使用这个功能，首先需要引入Resizable插件的相关文件。根据文件内容，需要引入两个js...
实现bootstrap table可设置列宽和可拖动列宽
11-23
总之，实现 Bootstrap Table 的列宽设置和拖动功能，需要结合使用 `data-width` 属性、Bootstrap Table 本身以及第三方的列宽拖动插件。通过这样的配置，我们可以为用户提供更加灵活和友好的数据查看体验。
table得列宽拖拽插件
05-05
这个"table列宽拖拽"插件的工作原理是监听用户的鼠标事件，如鼠标按下、移动和释放，当用户在表头（th）上进行拖拽操作时，插件会计算出新的列宽，并相应地更新表格的CSS样式，从而实现列宽的动态调整。此过程涉及到...
鼠标拖动调整table列宽实例
09-28
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
js实现html表格列宽可拖拽修改
04-04
js实现html表格列宽可拖拽修改 .
bootstrap-table拖拽表格改变列宽
08-31
bootstrap-table拖拽表格改变列宽，兼容主流浏览器，兼容body与header对齐
elementui table列的拖拽功能
11-08
自己使用，该附件里的代码已经实现了使用vue 及elementui的table列的拖动功能。
原生table-js可拖拽列宽，滚动头部，加滚动条
weixin_45142364的博客
06-12 888
原生table-js可拖拽列宽，滚动头部，加滚动条
＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高 及 使用注意事项 ＞
热门推荐
一个平平无奇的技术宅
02-17 1万+
由于项目需求，需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源，出一期 “ 使用事项 ” 及 使用过程中的问题汇总
html表格宽度拖拽,jQuery拖拽表格改变列宽
weixin_42396588的博客
06-16 352
$(function() {function isNullOrUndefined(obj) {if (typeof(obj) == "undefined" || obj == null) {return true;}return false;}function registerTableDragEvent() {var dragTH; //记录拖拽的列//第一步按下$('#dragTable th...
html5 table的表头拖动,可拖动table表头的实现
weixin_29057237的博客
06-20 1052
前言自己做的项目碰到这样一个需求，就是对所有的表格添加表头可以拖动的效果。我一想，这不简单，分分钟钟给你做出来。拿起我的电脑，啪啪啪就敲起来了。一定是哪里不对，以我的聪明才智，结果应该不是这样的，然后净下心来，好好理了下思路后，总算是做出来了。至于结果嘛，我肯定是做出来的，像下面这种：准备首先要说明的是，我们的项目使用的表格大概只分为两类，一类是表头不固定，就是普通的表格，另一类是表头固定，tbo...
antd table 拖动列宽
最新发布
09-07
Ant Design（antd）是一个企业级的UI设计语言和React实现。antd的Table组件提供了丰富的功能，其中包括列宽的调整。要实现拖动列宽的功能，你可以在Table组件中使用`onColResize`事件，并结合`Column`组件的`width`属性或者`minWidth`、`maxWidth`属性来控制列宽。以下是一个简单的使用示例： ```jsx import React, { useState } from 'react'; import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', width: 200, }, { title: 'Age', dataIndex: 'age', width: 100, }, { title: 'Address', dataIndex: 'address', width: 200, onHeaderCell: column => ({ width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, }), }, ]; const DragabbleTable = () => { const [data] = useState([ // ... 数据源 ]); return ( <Table columns={columns} dataSource={data} onColResize={(newWidth, index) => { console.log(`Column ${index} width changed to ${newWidth}px`); // 这里可以根据index来更新列宽状态，但antd已经内置处理了拖动列宽变化 }} components={{ body: { cell: props => <div {...props} className="cell-draggable" />, }, }} // 其他配置... /> ); }; export default DragabbleTable; ``` 在这个例子中，`onColResize`事件被用来获取新的列宽，并打印出来。`Column`的`onHeaderCell`属性可以用来设置可拖动的列头单元格的样式。通过设置`minWidth`和`maxWidth`，你可以限制用户调整列宽的最小和最大值。 请注意，antd已经内置了列宽拖动的交互，通常不需要额外处理，除非你有特殊的定制需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值