Bootstrap Table简单例子学习

最新推荐文章于 2024-08-17 01:00:00 发布

weixin_33829657

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量163

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/799835984/blog/595293

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、Bootstrap Table简介

Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。

2、所需要的库：

bootstrap.min.css

bootstrap-table.css

jquery.min.js

bootstrap.min.js

bootstrap-table.js

3、Bootstrap Table获取数据的方式：

Bootstrap Table通过data属性标签或者JavaScript来显示表格数据：

（1）、通过data属性标签

在表格中设置data-toggle=“table”，此方式可以在不写JavaScript的情况下启用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
    <thead>
        ...
    </thead>
</table>

（2）、通过JavaScipt向表格传入数据：

<table id="table"></table>

<1>、简单的静态数据

                $('#table').bootstrapTable({                
                    columns: [{
                        field: 'id',
                        title: 'Item ID'
                    }, {
                        field: 'username',
                        title: 'Item Username'
                    }, {
                        field: 'password',
                        title: 'Item Passowrd'
                    }],
                    data: [{
                        id: 1,
                        username: 'Item 1',
                        passowrd: '$1'
                    }, {
                        id: 2,
                        username: 'Item 2',
                        password: '$2'
                    }]});

<2>、通过url获取数据

                $('#table').bootstrapTable({                
                    url: 'data1.json',
                    columns: [{
                        field: 'id',
                        title: 'Item ID'
                    }, {
                        field: 'username',
                        title: 'Item Username'
                    }, {
                        field: 'passowrd',
                        title: 'Item Passowrd'
                    }, ]});

4、Bootstrap Table简单的demo：

<!doctype html>
<html>
    <head>
    
        <meta charset="utf-8">
        
        <title>Bootstrap Table的demo</title>
        
        <link rel="stylesheet" href="bootstrap.css">
        
        <link rel="stylesheet" href="bootstrap-table.css">
    
    </head>
    
<body>
 <table id="table"></table>
<!--引入相关的js文件-->
 <script src="jquery.min.js"></script>
 <script src="bootstrap.js"></script>
 <script src="bootstrap-table.js"></script>
    
 <!--自定义javaScript-->
  <script>
     $('#table').bootstrapTable({
       columns: [{
            field: 'id',
            title: 'Item ID'
           }, {
            field: 'username',
            title: 'Item Username'
           }, {
            field: 'passsword',
            title: 'Item Password'
       }],
       data: [{
            id: 1,
            username: 'Item 1',
            passowrd: '123'
           }, {
            id: 2,
            username: 'Item 2',
            passowrd: '123
           }]
      });
  </script>
</body>
</html>

5、Bootstrap Table学习文档

http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html

转载于:https://my.oschina.net/799835984/blog/595293