今天项目中需要插入表格，用Excel表格调整列宽时，想怎么拖就怎么拖，于是乎就让插入的表格也这么让人舒服。网上查找许久，没找到好用的方案。最后发现jQuery UI中的resizable（）方法可以实现div的自由调整，既然可以在div上实现，那表格也应该没问题吧。于是就动手折腾，成功搞定。

代码详情：

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>表格列宽调整</title>

<link rel="stylesheet" href="${pageContext.request.contextPath }/css/jquery-ui.css">

<link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.css">

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui.js"></script>

<style type="text/css">

    .tab_info {

        font-size: 13px;

        table-layout: fixed;

    }

    .tab_info th {

        background-color: #f5f5f5;

    }

    .tab_info td {
　　　　　white-space: nowrap;

        overflow: hidden;

    }

    .ui-resizable {

        background-color: #fff;

    }

</style>

<script type="text/javascript">

    $(function() {

        $("th").resizable(); //调用方法，实现可自由调整

    });

</script>

</head>

<body>

    <table class="table table-bordered tab_info">

        <thead>

            <tr>

                <th>商品编号</th>

                <th>商品名称</th>

                <th>品牌</th>

                <th>型号</th>

                <th>规格</th>

                <th>单位</th>

                <th>进货价</th>

                <th>库存数量</th>

                <th>销售价格</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1051181502</td>

                <td>碧根果</td>

                <td>自产</td>

                <td>123</td>

                <td>1*500g</td>

                <td>包</td>

                <td>10</td>

                <td>10</td>

                <td>20</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

实现功能需引入jquery-ui.js 和 jquery-ui.css，因为resizable()方法会生成调用相应的class样式。

效果图如下：

为table加上 table-layout: fixed; 并为td加上overflow: hidden; 可实现隐藏列中超出内容。

调整功能是实现了，不过右下角的这个小三角就看着让人整个就不好了。于是查看源码，发现调用了resizable()之后是在th中生成了三个div，最后一个就是小三角的样式。

通过js移除方式：$("th > div:last-child").removeClass();

另外通过分析resizable()的源码实现，也可以直接修改源码移除小三角。

在jquery-ui.js中找到下面这段，将classes删除或将值置空即可。最后小三角就没了。

"ui-resizable-se":""
$.widget( "ui.resizable", $.ui.mouse, {

    version: "1.12.1",

    widgetEventPrefix: "resize",

    options: {

        alsoResize: false,

        animate: false,

        animateDuration: "slow",

        animateEasing: "swing",

        aspectRatio: false,

        autoHide: false,

        classes: {

            "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"

        },

使用jqueryUI实现自由调整表格列宽的更多相关文章

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

    实现鼠标可拖动调整表格列宽度 如图: 一.引入文件: <script src="/js/jquery-1.8.0.min.js" type="text/javasc ...

  2. jQuery表格列宽可变，兼容firfox

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

  3. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  4. eas之添加表格列宽自动调整设置

    设置表格整体宽度自动调整为所在panel的宽度 KDTable table=new KDTable(); table. setAutoResize (boolean); 注意:该功能在冻结功能启用后, ...

  5. 转！！Java JTable 根据表格内容 自动调整表格列宽

    //根据表格内容 自动调整列宽http://blog.sina.com.cn/s/blog_5e54d6140100s1d3.html

  6. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  7. java表格操作之设置表格列宽

    设置所有列的宽度 /** * 设置所有列的列宽 * @param table * @param width */ public void setAllColumnWidth(JTable table, ...

  8. JS实现表格列宽拖动

    在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...

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

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

随机推荐

  1. 数据库连接池之_Druid简单使用

    数据库连接池: 连接池是创建和管理一个连接的缓冲池的技术,这些连接真备好被任何需要他们的线程使用,可以对传统的JDBCjava数据库连接()进行优化 在实际开发中,我们需要频繁的操作数据库,这就意味着 ...

  2. enum 枚举一般用法 dotnet

    public enum Demo { [Description("Moning描述")] Moning = , [Description("Afternoon描述&quo ...

  3. sklearn中LinearRegression使用及源码解读

    sklearn中的LinearRegression 函数原型:class sklearn.linear_model.LinearRegression(fit_intercept=True,normal ...

  4. 轻量级 Material Design 前端框架 MDUI （纯html，css，与css框架跟react vue不冲突）

    MDUI 是一个轻量级的 Material Design 前端框架,对照着 Material Design 文档进行开发,争取 1:1 实现 Material Design 中的组件. 多主题支持 M ...

  5. CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置

    CSS3 GENERATOR可以同时为一个元素完成border-radius.box-shadow.gradient和opacity多项属性的设置 CSS3 GENERATOR 彩蛋爆料直击现场 CS ...

  6. MAC和PHY的区别（网线上传递的是模拟信号）

    一块以太网网卡包括OSI(开方系统互联)模型的两个层.物理层和数据链路层.物理层定义了数据传送与接收所需要的电与光信号.线路状态.时钟基准.数据编码和电路等,并向数据链路层设备提供标准接口.数据链路层 ...

  7. WIN8安装oracle11g时出现不满足最低配置解决办法

    Windows8上面安装Oracle11g客户端和服务端时都会出现这样的错误提示:[INS-13001]环境不满足最低要求 产生这种报错的主要原因在于:oracle 11g的配置文件中并没有提供匹配w ...

  8. Java开发桌面程序学习（十）——css样式表使用以及Button悬浮改变样式实现

    css样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 ja ...

  9. PWN菜鸡入门之栈溢出（1）

    栈溢出 一.基本概念: 函数调用栈情况见链接 基本准备: bss段可执行检测: ​ gef➤ b main Breakpoint at . gef➤ r Starting program: /mnt/ ...

  10. Loadrunner做性能测试的主要步骤

    Loadrunner做性能测试的主要步骤: Loadrunner将性能测试过程分为计划测试.测试设计.创建VU脚本.创建测试场景.运行测试场景和分析结果6个步骤. 1) 计划测试:主要进行测试需求的收 ...