今天项目中需要插入表格，用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. .NET错误提示之：无法更新EntitySet“TableName”因为它有一个DefiningQuery

    使用LINQ 进行提交数据时发生的错误提示 原因:提交的对象表 没有设主键.

  2. 用代码关闭冰刃（IceSword）

    (*冰刃这个系统分析工具以前还没用过.这样高级的工具,用结束进程的方式就不试了.按手工关闭的流程实现.首先是通过遍历当前进程,确定冰刃进程的主窗体:然后发送WM_CLOSE关闭主窗体.当关闭对话框出现 ...

  3. 由Qmake.exe/QtCreator.exe启动速度慢挖进去（非常有趣的调试过程，作者态度不错，而且关闭Welcome插件也是常见办法）

    一直用Qt Creator开发Qt程序,Nokia的Qt Creator实在太慢了,启动慢,编译速度也是超级慢.昨天,终于它慢的让我无法忍受了,我决定抛开手上的一切工作,深入挖掘Qt Creator启 ...

  4. QT_NO_CAST_FROM_ASCII这个宏的，禁用一切来自双引号字符串字面量传入QString（有2种解决方法）

    这两天制作了两个Qt Creator增强套装的两个插件,其实也是非常简单的,但是其实花了我超过四天的时间,为什么呢?因为我之前很长一段时间都是在Linux下开发的,一切安好,没有任何问题,但是到了Wi ...

  5. Realm_King 之 .NET操作XML完整类

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xml;u ...

  6. RocketMQ(1)-架构原理

    RocketMQ(1)-架构原理 RocketMQ是阿里开源的分布式消息中间件,跟其它中间件相比,RocketMQ的特点是纯JAVA实现:集群和HA实现相对简单:在发生宕机和其它故障时消息丢失率更低. ...

  7. 理解call(),apply(),bind()

    三者皆是修改this指向call(this指向,参数,参数,参数...) ====>深研究:https://developer.mozilla.org/zh-CN/docs/Web/JavaSc ...

  8. Hive 学习之路（五）—— Hive 分区表和分桶表

    一.分区表 1.1 概念 Hive中的表对应为HDFS上的指定目录,在查询数据时候,默认会对全表进行扫描,这样时间和性能的消耗都非常大. 分区为HDFS上表目录的子目录,数据按照分区存储在子目录中.如 ...

  9. 记录微信浏览器里word链接点击没反应的bug

    有用户反应点击下载附件时没有反应,让用户把该下载链接复制到微信对话框中,发现点击该链接仍然无反应,但是在内置的手机浏览器中打开是正常的而且可以下载. 链接地址,有需要的可以拿去进行测试: http:/ ...

  10. Ubuntu 16.04.3启动MySQL报错

    今天安装mysql,连接MySQL时报错mysql: [Warning] Using a password on the command line interface can be insecure. ...