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

最新推荐文章于 2024-11-08 10:47:15 发布
转载 最新推荐文章于 2024-11-08 10:47:15 发布 · 1.3k 阅读 · 2
本文介绍了实现Bootstrap表格可调整大小功能的方法，先说明了整体结构，接着提到文件引入，指出bootstrap - table - resizable.js和colResizable - 1.6.min.js较难找，需将bootstrap - table.js中参数改为resizable: true，还涉及模拟数据准备、table.html编写及效果展示，代码拷贝可直接运行。

本文结构：先说明，后代码。拷贝可直接运行。

一、demo结构：

二、文件引入

　　这些里面除了下面2个比较难找，其他的都很好找

　　bootstrap-table-resizable.js

　　colResizable-1.6.min.js

　　注意：需要将bootstrap-table.js中参数改为resizable: true

三、模拟的message.json数据准备

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

[

    {

        "name":"zhangsan1",

        "password":"1"

    },

    {

        "name":"zhangsan2",

        "password":"2"

    },

    {

        "name":"zhangsan3",

        "password":"3"

    },

    {

        "name":"zhangsan4",

        "password":"4"

    },

    {

        "name":"zhangsan5",

        "password":"5"

    },

    {

        "name":"zhangsan1",

        "password":"1"

    },

    {

        "name":"zhangsan2",

        "password":"2"

    },

    {

        "name":"zhangsan3",

        "password":"3"

    },

    {

        "name":"zhangsan4",

        "password":"4"

    },

    {

        "name":"zhangsan5",

        "password":"5"

    },

    {

        "name":"zhangsan1",

        "password":"1"

    },

    {

        "name":"zhangsan2",

        "password":"2"

    },

    {

        "name":"zhangsan3",

        "password":"3"

    },

    {

        "name":"zhangsan4",

        "password":"4"

    },

    {

        "name":"zhangsan5",

        "password":"5"

    }

]

 四、table.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>BootStrap Table使用</title>

        <meta name="viewport" content="width=device-width" />

        <SCRIPT SRC="JS/JQUERY-3.3.1.MIN.JS" TYPE="TEXT/JAVASCRIPT"></SCRIPT>

        <script src="js/bootstrap-table.js"></script>

        <script src="js/bootstrap.min.js"></script>

        <script src="js/bootstrap-table-resizable.js"></script>

        <script src="js/colResizable-1.6.min.js"></script>

        <link href="js/bootstrap.min.css" rel="stylesheet" />

        <link href="js/bootstrap-table.css" rel="stylesheet" />

    </head>

    <body>

        <div class="container">

            <table id="table" class="table-bordered"></table>

        </div>

        <script type="text/javascript">

             $('#table').bootstrapTable({

                pagination:true,

                search:true,

                url:'/bootstrap_Table_resizable/json/message.json',

                columns:[{

                    field:'name',

                    title:'姓名'

                },{

                    field:'password',

                    title:'密码'

                }]

             })

        </script>

    </body>

</html>

 五、效果展示

 

如果我写的哪里有问题，欢迎补充

bootstrapTableResizable
10-27
bootstrapTable 拖动调整列宽，极其简单的示例，在浏览器中打开resizable.html即可
BootStrap-table.js 官网下载
11-16
bootstarp-table.js
colResizable-1.6
09-08
支持table列大小拖动调整大小，非常好用。有详细的帮助和样例。大家只需要引入colResizable.min.js，参看样例即可使用。。
bootstrap table 列拖动
小贺的博客
09-05 9525
$("#exampleTable").colResizable({ liveDrag: true,//实时显示滑动位置 gripInnerHtml: "<div class='grip'></div>", //draggingClass: "dragging", postbackSafe: true,//刷新后保留之前的拖拽宽度 h...
BootStrap-Table可调节列宽（bootstrap-table-resizable.js+(resizableColumns.js或者colResizable-1.6.js)）
ljw1211的博客
09-29 7213
BootStrapTable可调整列宽 BootStrapTable可通过bootstrap-table-resizable.js扩展实现对列的可拖曳调整，需要配合jquery.resizableColumns.min.js或者colResizable-1.6.min.js使用。 bootstrap-table-resizable.js可通过官方网站下载，可在下载的压缩包的 /dist/extensions/ 文件夹下找到，下载地址：https://bootstrap-table.com/docs/ge
bootstrap table 收缩_BootStrap的table技术小结：数据填充、分页、列宽可拖动
weixin_34058060的博客
01-26 468
本文结构：先说明，后代码。拷贝可直接运行。一、demo结构：二、文件引入这些里面除了下面2个比较难找，其他的都很好找注意：需要将bootstrap-table.js中参数改为resizable: true三、模拟的message.json数据准备[{"name":"zhangsan1","password":"1"},{"name":"zhangsan2","password":"2"},{"na...
bootstrap 可以拖动 表格宽度_Bootstrap Table列宽拖动的方法
weixin_42316073的博客
01-14 2451
在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table实现的，要求能利用拖动改变列宽，现将实现的过程记录如下：1. Bootstrap Table可拖动，需要用到它的Resizable扩展插件，具体可见bootstrap-table的官方文档链接：http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/进入...
Bootstrap Table列宽拖动的方法
热门推荐
csdnluolei
01-07 1万+
Bootstrap Table可拖动列，需要用到它的Resizable扩展插件 需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js 这个插件还依赖于colResizable v1.6（下载地址： http://www.bacubacu.com/colresizable/ ） &lt;script type="text/javascri...
Bootstrap Table拖动改变列宽的方法
MaxVelika的博客
05-27 2110
Bootstrap Table可拖动列，需要用到它的Resizable扩展插件 1、下载 bootstrap-table-resizable.js插件 下载地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 进入之后，找到Resizable插件，点击Home进入github可以找到详细的用法。 2、下载colResizable v1.6插件 下载地址：http://www.bacubacu.com/colresizable/
基于colResizable-1.6实现一个表头固定、列宽可调的table
WWF_HelloWorld
10-11 2535
colResizable官网：http://www.bacubacu.com/colresizable/ 能够实现各列完全对齐 能够兼容有无滚动条两种情况 只能在表头部分拖动改变列宽（不能在表体列边框上拖动，我完全可以接受） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...
实现bootstrap table可设置列宽和可拖动列宽
u011853017的博客
02-15 7253
BootStrap-Table 固定头+可调节列宽
实现dataTables列宽拖动
hsany330的专栏
06-22 1901
jquery的dataTables不能实现列宽拖动，可以引入colResizable-1.6.min.js实现列宽拖动。百度云地址：https://pan.baidu.com/s/1i2fknF1TcHaUEPFDEO017Q。 提取码：z10d。 将colResizable-1.6.min.js文件放进项目 然后需要将dataTables的自适应宽度和X、Y滚动轴需要关闭，否则可能会导致表头拖动列宽但是数据列的列宽不会发生改变。 将$(‘table’).colResizable();设置在
基于jQuery和colResizable-1.6.js的使表头固定内容滚动
fdhsdfgh的博客
09-20 1980
要让表头固定内容滚动，基本操作思路是将表头和内容分开成两个table，并装进两个不同的div中，再让内容的div设置滚动。但是colResizable.js在同时渲染了两个表格后，两个表格的列宽拖拽是相互独立的，并不能一起滚动，于是我们需要在插件内容上做一些修改。 这里我使用的是colResizable.js-1.6.js，需要将js文件的syncCols方法进行修改： var syncCo...
BootstrapTable单元格宽度调整：colResizable()方法
Noodles小飞
03-17 4178
BootstrapTable的表格宽度可以通过一些JS插件来手动调整，如下图 bootstrapTable列宽度拖拽自调整需要引入相关的JS包： colResizable-1.6.js、bootstrap-table-resizable.js 然后在页面加载时进行 colResizable() 方法加载 <table id="tb_zdzc" class="table table-hover table-striped table-condensed"></table>
colResizable 开源项目教程
gitblog_00811的博客
08-21 449
colResizable 开源项目教程 1. 项目的目录结构及介绍 colResizable 是一个用于使 HTML 表格列可调整大小的 jQuery 插件。以下是其目录结构的详细介绍： colResizable/ ├── css/ │ └── style.css ├── js/ │ ├── colResizable-1.6.min.js │ └── jquery.min.js ├──...
bootstrap table 拖动列实现以及问题
wantsToBeASinger的博客
03-26 4499
依赖 <!--拖动调整列宽相关--> <script type="text/javascript" src="bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script> <script type="text/javascript" src="bootstrap...
解决bootstrap-table设置了height属性之后，列宽拖动，页脚和表头无变化问题，以及表格底部出现留白问题
最新发布
weixin_44891816的博客
11-08 721
解决bootstrap-table设置了height属性之后，列宽拖动，页脚和表头无变化问题，以及表格底部出现留白问题
BootStrap Table超好用的表格组件基础入门
莫安逸无风雪
07-04 2692
最好的资源官方文档 快速入门 官方文档地址****https://bootstrap-table.com/docs/getting-started/introduction/ CSS<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css"> JS...
JS表格组件神器bootstrap table详解（基础版）
killcwd的专栏
03-26 4996
一、Bootstrap Table的引入 关于Bootstrap Table的引入，一般来说还是两种方法： 1、直接下载源码，添加到项目里面来。 由于Bootstrap Table是Bootstrap的一个组件，所以它是依赖Bootstrap的，我们首先需要添加Bootstrap的引用。 2、使用我们神奇的Nuget 打开Nuget，搜索这两个包
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值