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

最基本的例子

引入JS

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/colResizable-1.6.js" type="text/javascript"></script>
  • 1
  • 2

TABLE

<table class="table table-bordered">
<thead>
    <tr>
       <th>栏目类型</th>
       <th>活动名称</th>
       <th>状态</th>
       <th>操作选项</th>
    </tr>
</thead>
<tbody>
    <tr>
       <td>青春日记</td>
       <td>我们一起傻逼的日子</td>
       <td>提交</td>
       <td>审核</td>
    </tr>
    <tr>
       <td>我和孩子的成长故事</td>
       <td>成长故事</td>
       <td>通过</td>
       <td>审核</td>
    </tr>
</tbody>
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

JS

<script type="text/javascript">
    $(function() {
        $("table").colResizable();
    })
</script>
  • 1
  • 2
  • 3
  • 4
  • 5

以上步骤即可实现最简单的鼠标拖动调整表格列宽

在线演示:colresizable

更多信息参考:http://www.bacubacu.com/colresizable/

作者:itmyhome

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

原文地址:https://www.cnblogs.com/skiwnchqhh/p/10334162.html

时间: 2024-10-06 11:38:09

jQuery可调整表和列宽插件-colResizable的相关文章

基于JQuery的可拖动列表格插件TadaTables

前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---TadaTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全面介绍此插件的使用过程. 如果不是有拖动列调整列位置顺序的需求,建议不要使用此插件,坑点较多.后面有事件我写一个名为Bootstrap-table表格插件的使用方法,使用起来比这个插件强多了 正文 英文官网:https://datatables.net/ 中文官网:http://www.datata

Web界面开发工具!Kendo UI for jQuery数据管理之网格列宽

Kendo UI for jQuery R1 2020 SP1试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和Kendo UI Support for Vue四个控件.Kendo UI for jQuery是创建现代Web应用程序的最完整UI库. 要设置Grid列的宽度,请使用其width属性. 当您通过col元素从HTML表创建网格时,也可以设置列的宽度:但是,当对表

jQuery表格列宽可变,兼容firfox

本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: [javascript] view plaincopy <html> <head> <meta http-equiv="Content-Type" content="text/ht

为表格添加可调整列宽功能

1.引入js架包 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/colResizable-1.6.js" type="text/javascript"></script> (该jar包是为表格添加列宽自定义功能) 2.table页面内容 <table

Bootstrap Table列宽拖动的方法

在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下: 1.Bootstrap Table可拖动,需要用到它的Resizable扩展插件,具体可见bootstrap-table的官方文档链接:http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 进入之后,找到Resizable插件,点击Home进入github可以找到详细的用法

从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)

(34)gridx gridx系列插件并非和dojo的插件在一起 需要下载的请通过以下网址下载: http://oria.github.io/gridx/ 不过我也不太懂不同版本有什么区别(事实上我对gridx还属于新手水平) PS:dojo本身有dojox/grid插件,语法和gridx并不同,所以不能混用. PSS: 由于看这篇帖子的人,基本没办法自己和服务器/数据库互动,所以建议自己写一个json文件,然后get这个json文件(具体看之前的AJAX相关的,很简单,或者使用我下面给的例子也

6款强大的 jQuery 网页布局创建及优化插件

本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工具栏,菜单,帮助面板,状态栏,子表格等复杂的应用.     2.jQUery Masonry 动态布局jQuery插件,折叠式CSS浮动面板. 3.jLayout 可提供四种网页元素布局算法.     4.jQuery pageSlide 该插件灵感来自于Aza Raskin的UI工作中.他最近发表

CSS 控制table 滑动及调整列宽等问题总结

一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的height高度.然后设置overflow-y:scroll.这样当内容高度超过了height设定的高度,就会出现滚动条 css: .scroll_y{ max-height: 200px; /* 宽度大概比表头宽17px,具体值实际调试 */ width:531px; overflow-y: scrol

使用jqueryUI实现自由调整表格列宽

今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实现div的自由调整,既然可以在div上实现,那表格也应该没问题吧.于是就动手折腾,成功搞定. 代码详情: main.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn