今天项目中需要插入表格，用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. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  2. DELPHI XE2 采用 JSON 的方式来序列化对象

    DELPHI XE2 采用 JSON 的方式来序列化对象 以下代码测试通过.问题是里面的中文,在反序列化后是乱码. 1. 序列化对象为字符串,Subject 里面的中文看起来正常,仍然是中文: 2.  ...

  3. 使用Visual Studio开发Python

    Python优秀的集成开发环境有PyCharm,Visual Studio Code等,当然你仍然可以使用Visual Studio进行开发.如果你熟悉Visual Studio,使用Visual S ...

  4. Qt优雅地结束线程（两种方法都是用Mutex锁住bool变量进行修改，然后由bool变量控制耗时动作的退出，即正常退出）

    如果一个线程运行完成,就会结束.可很多情况并非这么简单,由于某种特殊原因,当线程还未执行完时,我们就想中止它.不恰当的中止往往会引起一些未知错误.比如:当关闭主界面的时候,很有可能次线程正在运行,这时 ...

  5. Codlility---MinPerimeterRectangle

    Task description An integer N is given, representing the area of some rectangle. The area of a recta ...

  6. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发

    进行本文之前需要在数据库用户表里面增加一条用户数据,直接手动添加即可,未安全考虑密码一定要使用Md5加密后的,这里提供666666的Md5密文为(c831b04de153469d),本文完成登录模块的 ...

  7. 27 background

    先来讲讲颜色表示法 一共有三种:单词.rgb表示法.十六进制表示法 rgb:红色 绿色 蓝色 三原色 光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的. 用逗号隔开,r. ...

  8. 一文看懂javaGC

    javaGC回收机制 在面试java后端开发的时候一般都会问到java的自动回收机制(GC).在了解java的GC回收机制之前,我们得先了解下Java虚拟机的内存区域. java虚拟机运行时数据区 j ...

  9. Spring事务原理一探

    概括来讲,事务是一个由有限操作集合组成的逻辑单元.事务操作包含两个目的,数据 一致以及操作隔离.数据一致是指事务提交时保证事务内的所有操作都成功完成,并且 更改永久生效:事务回滚时,保证能够恢复到事务 ...

  10. Hadoop —— 集群环境搭建

    一.集群规划 这里搭建一个3节点的Hadoop集群,其中三台主机均部署DataNode和NodeManager服务,但只有hadoop001上部署NameNode和ResourceManager服务. ...