table实现列宽的拖动效果

最新推荐文章于 2023-07-06 16:52:53 发布
最新推荐文章于 2023-07-06 16:52:53 发布
阅读量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
关注
专栏目录
js实现html表格列宽可拖拽修改
04-04
js实现html表格列宽可拖拽修改 .
antd实现Table拖拽调整列宽
weixin_46600931的博客
01-30 5045
table表单列宽拖拽在最新的antd 版本中已经没有demo了，需要去过完版本去找3.26.19。注意：在实现拖曳功能的前提是。
table实现列宽的动态拖动
weixin_43627406的博客
10-23 698
<!DOCTYPE html> <html> <head> <title>table拖动列宽</title> </head> <body> <table width="100%" border="1" class="resizabl...
table表格可手动调整表格列宽度
chuannie2342的博客
05-13 2562
有时候会遇到这样的需求，在页面中可以手动调整表格列的宽度。解决这个问题我使用的是colResizable这个控件。colResizable 是一个 jQuery 的插件，主要用于增强 HTML 的表格，新增的功能包括手工调整表格列宽度。该插件很小，只有 2.8k，无需依赖其他插件。 第一步：...
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样式，从而实现列宽的动态调整。此过程涉及到...
react antdesign table列可拖拽调整宽度
weixin_45842655的博客
07-06 2589
react antdesign table列可拖拽调整宽度
bootstrap 可以拖动 表格宽度_table表格列宽可拖动
weixin_39875028的博客
02-15 821
table编号姓名性别生日民族001test0011989-03-06汉//用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题var tTD;var table = document.getElementById("tableWidth");for (j = 0; j < table.rows[0].cells.length; j++) {table.rows[0].cell...
js 实现table每列可左右拖动改变列宽度
热门推荐
zanychou的专栏
07-21 3万+
table 用户编号 试用时间转正时间性别姓名拼音 生日时间民族身高 2000001 1997-3-131997-3-131WZJ 1965-3-13汉171 2000045 2001-2-152001-3-150WY 1978-8-5汉162 2000046 2001-2-232001-3-230LQ 2001-2-23汉171
html拖拽表格列宽,JS实现表格列宽拖动
weixin_39859061的博客
06-16 617
在数据表格中，有时候需要拖动表格宽度，查看完整的数据，是很常用的功能。1 效果可以用纯JS就可以实现，如下，是正常情况下的表格：拖动表格标题中间线，拖动后效果如下：2 代码HTML代码：演示window.onload = function() {tabSize.init('resizeTable');};.resizeBox{overflow-x: auto; width: 500px;}tabl...
table列宽拖拽
Jalen备忘录
05-29 2050
1. 使用第三方组件colResizable-1.6.min.js （官网：http://www.bacubacu.com/colresizable/） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit...
java web可以拖动表格单元格大小的html，鼠标拖动改变表格大小（系列五）
黑色头发
08-13 325
效果图：拖动表格里任何一个位置，都可以左右拖动表格宽度，上下宽度一起改变 特点：拖动容易，文字不会被线盖住   代码： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt..
原生javascript实现拖拽改变table表格行高（html）
Faith1460的博客
05-06 4037
最近在做一个OA的项目，里面需要大量的表格操作。有一些是使用html中的table去模拟excel的功能，等项目做完，我会把这些好玩的功能抽取出来，做一个html的excel插件。   今天先和大家分享下怎么实时拖拽改变table的行高。拖拽改变列宽的功能网上很多，但是拖拽改变行高的我搜了很久，也没有发现可以用的。所以利用原有改变行高的模版，自己写了一个原生javascrript改变列宽的模版。
前端页面实现table可拖动改变列宽
Java_Long_Asus的博客
02-20 8983
此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下： 1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery， （1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载 （2）引入文件...
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、付费专栏及课程。

余额充值