今天项目中需要插入表格，用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. Android零基础入门第78节：四大组件的纽带——Intent

    前面学习Activity时己经多次使用了 Intent,当一个Activity需要启动另一个Activity时, 程序并没有直接告诉系统要启动哪个Activity,而是通过Intent来表达自己的意图 ...

  2. 笔记：认识.NET平台

    认识.NET平台先了解一堆技术术语和缩写 http://www.cnblogs.com/dbycl/p/6419456.html 天生不跨平台的.NET Framework 2.大家都来开发新语言 3 ...

  3. 更改当前电源策略（使用SetActivePwrScheme API函数），自定义电源按钮动作（设置GLOBAL_POWER_POLICY）

    #include <windows.h> #include <Powrprof.h> #pragma comment(lib, "Powrprof.lib" ...

  4. CentOS7中firewalld的安装与使用详解

    一.软件环境 [root@Geeklp201 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 二.安装firewall ...

  5. 当一个控件属性不存在的时候，IDE会出错在这里（说明是TWinControl.ReadState在读属性，并执行相关动作）

    procedure TWinControl.ReadState(Reader: TReader); begin DisableAlign; try inherited ReadState(Reader ...

  6. wed前端html/css简单理解

    开发工具: txt文本 / dreamwave:DW(cs6/cc) / Hbuilder / webstorm / sublime / vscode 前端: 知识架构: 3层: 结构 / 表现 / ...

  7. selenium2 python 自动化测试实战

    自动化测试,一个现在被炒的火热的词:各大公司都在嚷嚷着要上自动化测试的项目,都在招聘各种自动化测试人员…非常荣幸的受作者邀请来帮忙写这个序,诚惶诚恐,何德何能?不记得何时开始认识的作者了.当初只是作为 ...

  8. iOS开发如何避免安全隐患

    现在很多iOS的APP没有做任何的安全防范措施,导致存在很多安全隐患和事故,今天我们来聊聊iOS开发人员平时怎么做才更安全. 一.网络方面 用抓包工具可以抓取手机通信接口的数据.以Charles为例, ...

  9. 正则RegExp对象的用法

    RegExp实例方法: 1.Test() RegExpObject.test(string) 判断string中是否有与表达式匹配的字符串,有则返回true,否则返回false 例如 var patt ...

  10. Python 图片识别

    Tesseract是开源的OCR引擎. 需要安装tesserocr.opencv-python.tesseract-ocr pip install tesserocr pip install open ...