bootstrap实现列的拖动
<!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实现列的拖动的更多相关文章
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- Jqgrid入门-Jqgrid列数据拖动(七)
上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置. Jqgrid表格插件自己没有 ...
- 关于如何解决bootstrap table 列 切换 刷新 高度不一样
在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...
- element-ui 实现table整列的拖动
演示地址 1. 先动态渲染表头,给每一个表头添加一个class=virtual 的画虚线的类名,同时给每个表头加上鼠标点击.拖动.抬起事件:mousedown->mousemove->mo ...
- vue drag 对表格的列进行拖动排序
用drag实现拖动表格列进行列排序 以下是用到的主要方法 1.dragstart 拖动开始返回目标对象 2.dragenter 拖动过程中经过的对象 3.dragend 拖动结束返回目标对象 ...
- 完美解决bootstrap模态框允许拖动后拖出边界的问题
使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...
- EasyUI datagrid 列宽度拖动问题
问题:拖不动或者偶尔能拖动,拖动不按指定? 原因:列宽度绑定的时候使用的百分比; 方法:获取总宽度,经过百分比计算在绑定
- 理解bootstrap的列偏移offset 和 推拉push/pull的区别?
参考: http://www.cnblogs.com/jnslove/p/5430481.html & https://blog.csdn.net/hly_coder/article/deta ...
- bootstrap table 列求和
<div class="modal fade in" id="_modalDialog" tabindex="1" role=&quo ...
随机推荐
- Ubuntu18下sudo apt install xxx出现问题
当执行sudo apt install rpm时失败(apt-get也失败),输出如下报错信息: E: Could not get lock /var/lib/dpkg/lock - open (11 ...
- node-express-1
安装: express v4.0以后的安装: npm install express-generator -g 建立项目 express -t ejs blog 安装依赖 cd blog && ...
- 简单gulp.js
引入相对应的文件 let gulp = require("gulp"); let inject = require("gulp-inject"); let cl ...
- 将springboot打包成的jar文件做成windows服务，解决java程序自启动问题
https://blog.csdn.net/weixin_40411331/article/details/80193376 https://blog.csdn.net/qq_33188180/art ...
- jmeter如何进行MQTT性能测试（测试前期准备二，MQTT插件及协议了解）
jmeter插件下载地址及使用,已经有大佬总结好了 大佬的博客地址: https://blog.csdn.net/yellowanwu/article/details/50889677 添加线程组:添 ...
- web网页错误代码的含义
web网页错误代码的含义 一.1xx 表示临时响应并需要请求者继续进行操作的状态码,例如: 100--继续:101--切换协议 二.2xx 表示服务器成功的处理了请求的状态码,例如: 200--客户端 ...
- DevExpress ASP.NET Core Controls 2019发展蓝图（No.1)
本文主要为大家介绍DevExpress ASP.NET Core Controls2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...
- ionic3样例应用
https://github.com/jujunjun/ionic3-study 该应用包括的样例内容有: 文件上传,上拉更新,下拉加载,弹出层,列表,加载中,栅格,按钮等. php提供的文件上传接口 ...
- Unity3d对象池
Singleton.cs 12345678910111213 using UnityEngine;/// <summary>/// 单例模版类/// </summary>pub ...
- Linux：OpenSUSE系统的安装
又过了比较长的时间,基本上都是一周一更了,这期我们就来演示Linux系统中OpenSUSE系统的安装吧! 安装OpenSUSE系统 系统映像文件下载 OpenSUSE 15下载地址: https:// ...