bootstrap 可以拖动 表格宽度_Bootstrap Table列宽拖动的方法

在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用拖动改变列宽，现将实现的过程记录如下：

1. Bootstrap Table可拖动，需要用到它的Resizable扩展插件，具体可见bootstrap-table的官方文档链接：http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/

进入之后，找到Resizable插件，点击Home进入github可以找到详细的用法。

2. 用法是直接引入该js插件，不过可以看到，这个插件还依赖于colResizable v1.6(下载地址：http://www.bacubacu.com/colresizable/)

3. 另外，在使用Bootstrap Table的时候，建议用js去设置table的列属性，即按照如下方式：

$('#myTable').bootstrapTable({

url: url,

method: 'post',

columns:[{

align: 'center',

checkbox:true,

width:'15',

valign: 'middle'

},{

field: 'name',

title: '名称',

align: 'center',

width:'100',

valign: 'middle'

},{

field: 'desc',

title: '描述',

width:500,

align: 'left',

valign: 'middle'

}]

});

上面这种方式可以通过修改width的大小来直接修改列的宽度。而还有一种写法是在HTML中设置table的列头部，这种方式是很难调整宽度的，且很容易导致列头与内容无法对齐，是不推荐的，例如：

编号姓名描述

WPF DataGrid 列宽填充表格方法

WPF中使DataGrid 列宽填充表格方法,设置ColumnWidth属性为ColumnWidth="*"即可. 源码:

关于如何解决bootstrap table 列 切换 刷新 高度不一样

在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句gt ...

bootstrap实现列的拖动

Aspose.Cells设置自动列宽(最佳列宽)及一些方法总结

/// /// 设置表页的列宽度自适应 /// /// wor ...

bootstrap table 列求和

JS实现表格列宽拖动

在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...

jquery实现表格可变列宽插件开发

工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...

bootstrap table 兼容ie8 -- refreshOptions

今天项目使用 bootstrap table 在ie8下发现 方法 refreshOptions 报错. 经过调试监控发现错误如下: 153 行 代码 Object.getOwnPropertyNam ...

BootStrap的table技术小结：数据填充、分页、列宽可拖动

本文结构:先说明,后代码.拷贝可直接运行. 一.demo结构: 二.文件引入 这些里面除了下面2个比较难找,其他的都很好找 bootstrap-table-resizable.js colResiza ...

随机推荐

fullPage.js学习笔记

中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html  上面有详细介绍及案例展示,很不错哦,可以先去看看 ...

Pyqt 国际化多语言支持

国际化是指在代码设计上加入能方便的移植到其他国家和地区的特性, 给Pyqt 添加国际化支持需要五步 一.编写GUI.py 在要被翻译的text上用tr方法括起来 # -*- coding: utf-8 ...

一次APP测试的感悟

项目经理担责任.产品担责任.测试只需要把测试中发现的问题展示出来.如实反应问题.谁担责任谁有权利决定上不上线.所以他们直接绕过了测试.APP的上线让我学到了很多东西,见识了很多东西,也感悟了很多.这是 ...

Pictures of Ascii Art

简述 指尖上的艺术 - 通过键盘上韵律般的敲敲打打,一幅幅美轮美奂的艺术作品便跃然于屏. 这样的画作,包含了无穷的创意,糅合了现代计算机科技与传统绘画艺术,难道还有比这更令人陶醉的美妙事物吗? 简述 ...

centos6.5安装mongodb

搜索正面五个文件,由于MongoDB的redhat国外镜像访问非常慢,下载安装suse版本并安装: mongodb-org-2.6.6-1.i686.rpm mongodb-org-mongos-2. ...

【Java】Java垃圾回收机制

Java垃圾回收机制 说到垃圾回收(Garbage Collection,GC),很多人就会自然而然地把它和Java联系起来.在Java中,程序员不需要去关心内存动态分配和垃圾回收的问题,这一切都交给 ...

【算法Everyday】第二日 求子数组的最大和

题目 // 3.求子数组的最大和 // 题目: // 输入一个整形数组,数组里有正数也有负数. // 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. // 求所有子数组的和的最大值. ...

[转] IPC之管道、FIFO、socketpair

管道和FIFO作为最初的UNIX IPC形式,现在已用得较少.SocketPair可作为全双工版本的管道,较为常用,这里简单做个笔记 管道 * 只用于有亲缘关系的进程间通信 * 单向,即半双工 (双向 ...

String 和 StringBuffer、StringBuilder

String为什么不可变? 简单的来说:String类中使用final关键字字符数组保存字符串,private final char value[],所以 String 对象是不可变的.而String ...

SQL Server中使用convert进行日期转换(转载)

一般存入数据库中的时间格式为yyyy-mm-dd hh:mm:ss 如果要转换为yyyy-mm-dd  短日期格式.可以使用convert函数.下面是sqlserver帮助中关于convert函数的声 ...