前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >表格插件-bootstrap table的使用示例

表格插件-bootstrap table的使用示例

作者头像
王小婷
发布2018-12-12 13:56:17
1.7K0
发布2018-12-12 13:56:17
举报
文章被收录于专栏:编程微刊编程微刊

基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/

1:在官网上下载相关的文件之后,步骤下载之后引入:

代码语言:javascript
复制
<!-- 引入的css文件  -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
    rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

2:开始写代码

代码语言:javascript
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <!-- 引入的css文件  -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-table.min.css" rel="stylesheet">

        <title></title>
    </head>

    <body>
        <table id="mytable"></table>

    </body>
    <!-- 引入的js文件 -->
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>

    <script>
        $('#mytable').bootstrapTable({
            columns: [{
                field: 'id',
                title: '编号名'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'photo',
                title: '联系方式'
            }],
            data: [{
                id: 1,
                name: '王小婷',
                photo: '1373717324'
            }, {
                id: 2,
                name: '安安',
                photo: '131313'
            }]
        });
    </script>

</html>

3:效果如下:

另外一种方法:通过url请求本地json格式数据

代码语言:javascript
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <!-- 引入的css文件  -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-table.min.css" rel="stylesheet">

        <title></title>
    </head>

    <body>
        <table id="mytable"></table>

    </body>
    <!-- 引入的js文件 -->
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>

    <script>
        $('#mytable').bootstrapTable({
    url: '1.json',
    columns: [{
        field: 'id',
        title: '编号'
    }, {
        field: 'name',
        title: '姓名'
    }, {
        field: 'photo',
        title: '联系'
    }, ]
});
    </script>

</html>

json:

代码语言:javascript
复制
[
{           "id":"1",
            "name":"王小婷",
            "photo":"1234567"
},
{
             "id":"1",
            "name":"安安",
            "photo":"42353473"
}


]

表格如下:

下一篇: 表格插件-bootstrap table的分页的实现使用示例

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 另外一种方法:通过url请求本地json格式数据
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档