在之前做过的一个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函数的声 ...

测试bootstrap table及拖拽功能的时候遇到一个问题
在此将解决方案分享出来。
前提准备
bootstrap table 好用的多功能表格      中文官网     github
bootstrap-table-reorder-rows 上述表格的一个扩展，支持行拖拽    github
问题
以上的原表格，拖动行更换位置后如下图
使用bootstrap table的getData方法获取表格内容，仍为拖拽前的数据
解决方法
官方原文( This function must be use if your tr elements won't have the id attribute. If your tr elements don't have the id attribute this plugin don't fire the onDrop event.)
$(document).ready(function () {
$("#tabletest").bootstrapTable({
reorderableRows: true,
striped: true,
search: true,
toolbar: '#toolbar',
useRowAttrFunc: true
});
});
源代码如下
Document
Item IDItem NameItem Price
1Item 1$12Item 2$2
新增
获取数据
$(document).ready(function () {
$("#tabletest").bootstrapTable({
reorderableRows: true,
striped: true,
search: true,
toolbar: '#toolbar',
useRowAttrFunc: true,
// onReorderRow: function (newdata) {
//    console.log(newdata);
// }
});
});
$("#btn_add").click(function () {
$('#tabletest').bootstrapTable('append', { 'id': 'aa', 'name': 'bb', 'price': '1' });
});
$("#getdata").click(function () {
alert(JSON.stringify($('#tabletest').bootstrapTable('getData')));
});

根据上图的滚动条可以发现，消费详情这列的数据的长度特别长，所以导致了页面出现了滚动条，在实际的应用中，页面水平方向使用滚动条去观察数据是较为不方便的，所以我们需要将此列的数据换行显示。

第一时间想到的是将表格的标题头设置宽度，我们可以设置固定宽度，也可以设置百分比宽度，我这里是设置的百分比宽度，上代码。

columns : [ {
	checkbox : true
}, {
	field : 'date',
	width : '10%',
	title : '日期'
}, {
	field : 'spendDetail',
	title : '消费详情',
	width : '70%',
	align : "left",
	valign : "middle"
}, {
	field : 'dpayr',
	width : '10%',
	title : '单日钻石总消耗'
}, {
	field : 'tpayr',
	width : '10%',
	title : '累计钻石总消耗'
} ]

我给“消费详情”这一列设置了70%的宽度比，清除浏览器页面缓存刷新页面，发现还是一样的问题。宽度比根本没起作用！

参考此篇文章：https://blog.csdn.net/wang1171405487/article/details/80667530

我尝试着用样式去改变，在静态页面加上 <style type="text/css">.table {table-layout:fixed;}</style>

注：table-layout:fixed 的作用就是固定列的宽度的。

再次清除缓存刷新页面。



发现页面的宽度已经固定了，这就解决了设置宽度不起作用的问题，但是“消费详情”这列的数据还是有问题，我们只固定了标题头，但是数据还是没有换行显示！

参考此篇文章：https://blog.csdn.net/qq_30616169/article/details/55212284?locationNum=7&fps=1

我们还需要一个属性：word-break:break-all;

注：此属性的含义是如果单元格内的数据在被列宽限制的情况下会换行显示。

现在我加上的是：<style type="text/css">.table {table-layout:fixed;word-break:break-all;}</style>

注：以下两个样式分别解决了列设置宽度不起作用的问题与数据不换行的问题。

table-layout:fixed;       word-break:break-all;

这样直接写宽度无效


需要在页面上加入

table-layout:fixed: 表格固定宽度;

word-break:break-all : 此属性的含义是如果单元格内的数据在被列宽限制的情况下会换行显示。