今天项目中需要插入表格，用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. asp.net ToString() 格式化字符串

    c# ToString() 格式化字符串  格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式 ...

  2. LigerUI中Grid的使用时关于url请求不到数据的问题

    前台代码:(这里贴的是js的代码,完整的代码可以在LigerUI的文档中找到), 这里使用的是url请求数据,问题不是处在前台,所以就不细说. $("#maingrid").lig ...

  3. 跨进程访问VCL的一个用例（Delphi6、TurboDelphi测试通过）

    Controls.pas单元中有一个FindControl函数,通过句柄获得对应的TWinControl对象. function FindControl(Handle: HWnd): TWinCont ...

  4. HTML续

    HTML class属性 定义和用法 class 属性规定元素的类名(classname). class 属性大多数时候用于指向样式表中的类(class).不过,也可以利用它通过 JavaScript ...

  5. WebP 大战 JPEG，谁才是真正的王者？

    目前在互联网上,图片流量仍占据较大的一部分.因此,在保证图片质量不变的情况下,节省流量带宽是大家一直需要去解决的问题.传统的图片格式,如 JPEG,PNG,GIF 等格式图片已经没有太多的优化空间.因 ...

  6. 高并发 Nginx+Lua OpenResty系列（6）——Lua开发库Mysql

    Mysql客户端 lua-resty-mysql是为基于cosocket API的ngx_lua提供的Lua Mysql客户端,通过它可以完成Mysql的操作.默认安装OpenResty时已经自带了该 ...

  7. SpringBoot中资源初始化加载的几种方式（看这一片就够了）

    一.问题 在平时的业务模块开发过程中,难免会需要做一些全局的任务.缓存.线程等等的初始化工作,那么如何解决这个问题呢?方法有多种,但具体又要怎么选择呢? 二.资源初始化 1.既然要做资源的初始化,那么 ...

  8. Mybatis_two

    SqlMapConfig.xml配置文件 SqlMapConfig.xml中配置的内容和顺序如下: properties(属性) settings(全局配置参数) typeAliases(类型别名) ...

  9. C++程序设计1（侯捷video 1-6）

    一.头文件的防御式声明(video2) #ifndef __COMPLEX__ #define __COMPLEX__ //内容 #endif 二.初步感受模板(video2) 定义的时候: //复数 ...

  10. (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例

    原生js实现放烟花效果,点击鼠标,然后随机向四周扩散,! 思路: 1.首先烟花是五颜六色的,所以我们先写一个随机颜色的函数: 2.创建一个制造烟花的构造函数,第一个参数为元素,第二参数为初始x轴位置, ...