<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

<style type="text/css">
*{margin: 0;padding: 0;}

</style>
</head>
<body>
<div class="tableArea ">
<table class="table table-striped" id="table" data-height="600">
<!--在此处填充表格数据-->
</table>
</div>

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/bootstrap-table-reorder-rows.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/jquery.tablednd.min.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="js/bootstrap-table-reorder-columns.min.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" src="js/bootstrap-table-resizable.min.js"></script>
<script type="text/javascript" src="js/colResizable-1.6.min.js"></script>

<script type="text/javascript">
var $table = $('#table');//绑定表格id
$(function () {
buildTable($table, 24, 24); //设置所要加载的表格列数和行数，此处为24行24列
});
//生成很多个表
function buildTable($el, cells, rows) {
var i, j, row,
columns = [],
data = [];

for (i = 0; i < cells; i++) {
columns.push({
field: 'field' + i,
title: 'Cell' + i,
sortable: true
});
}
for (i = 0; i < rows; i++) {
row = {};
for (j = 0; j < cells; j++) {
row['field' + j] = 'Row-' + i + '-' + j;
}
data.push(row);
}
$el.bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data,
search: true,
toolbar: '.toolbar',
});
}

//实现列的拖动
$(function(){
$("#table").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'fit'
});
});
</script>
</script>
</body>
</html>

bootstrap实现列的拖动的更多相关文章

  1. Bootstrap Table列宽拖动的方法

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

  2. Jqgrid入门-Jqgrid列数据拖动(七)

    上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置.     Jqgrid表格插件自己没有 ...

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

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

  4. element-ui 实现table整列的拖动

    演示地址 1. 先动态渲染表头,给每一个表头添加一个class=virtual 的画虚线的类名,同时给每个表头加上鼠标点击.拖动.抬起事件:mousedown->mousemove->mo ...

  5. vue drag 对表格的列进行拖动排序

    用drag实现拖动表格列进行列排序   以下是用到的主要方法   1.dragstart 拖动开始返回目标对象 2.dragenter 拖动过程中经过的对象 3.dragend 拖动结束返回目标对象 ...

  6. 完美解决bootstrap模态框允许拖动后拖出边界的问题

    使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...

  7. EasyUI datagrid 列宽度拖动问题

    问题:拖不动或者偶尔能拖动,拖动不按指定? 原因:列宽度绑定的时候使用的百分比; 方法:获取总宽度,经过百分比计算在绑定

  8. 理解bootstrap的列偏移offset 和 推拉push/pull的区别?

    参考: http://www.cnblogs.com/jnslove/p/5430481.html & https://blog.csdn.net/hly_coder/article/deta ...

  9. bootstrap table 列求和

    <div class="modal fade in" id="_modalDialog" tabindex="1" role=&quo ...

随机推荐

  1. node-express-1

    安装: express v4.0以后的安装: npm install express-generator -g 建立项目 express -t ejs blog 安装依赖 cd blog && ...

  2. 用几句话说一说CMake add_dependencies & target_link_libraries的使用区别

    简单说一说前两天学习使用CMake解决链接问题时遇到的一个问题. 对于编译时遇到的依赖问题,很多时候我们只需要一句target_link_libraries就可以搞定. 但是CMake还有另外一个co ...

  3. Problem A: 字符的变化

    Description 定义一个Character类,具有: 1. char类型的数据成员. 2.构造函数Character(char). 3. Character toUpper():如果当前字符是 ...

  4. java基础知识—类和对象

    1.对象的特征---类的属性 每个对象的每个属性都有特定的值 对象的操作---类的方法 2.封装 对象同时具有属性和方法两项属性. 对象的属性和方法同时被封装在一起,共同体现事物的特性,二者相辅相成, ...

  5. selenium中下拉框的定位

    from selenium import webdriverfrom selenium.webdriver.support.select import Selectimport timedriver ...

  6. 修改VScode行号区的背景颜色

    vs code是相当不错的一个编辑器,现阶段我用来编写nim程序. vs code非常丧心病狂一点就是行号区和编辑区的背景颜色都是一样, 这样会导致要看行首有没有对齐会非常吃力.这个问题让我纠结了非常 ...

  7. jmeter之关联

    前言:当请求之间有依赖关系,比如一个请求的入参是另一个请求返回的数据,这时候就需要用到关联处理,Jmeter可以通过“后置处理器”中的“正则表达式提取器”来处理关联. 一.后置处理器-------正则 ...

  8. 安装oracle11g INS-30131执行安装程序验证所需的初始设置失败的解决方法

    安装oracle11g [INS-30131] 执行安装程序验证所需的初始设置失败. 解决方法 第一步:控制面板>所有控制面板项>管理工具>服务>SERVER 启动 TCP/I ...

  9. 从数组中取出N个元素的所有组合——递归实现

    https://www.cnblogs.com/null00/archive/2012/04/27/2473788.html 今天在做POJ 1753时,需要枚举一个数组中所有组合.之前也遇到过类似的 ...

  10. windows与sql身份登录

    windows身份验证:1.“.”代表本地2.127.0.0.1代表本地3.本地ip地址,在dos中可查4.localhost代表本地 sql身份验证:首先用windows登上去,之后再安全性中找到登 ...