表格插件-bootstrap table的使用示例-阿里云开发者社区

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

2023-11-09 59

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

<!-- 引入的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：开始写代码

<!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格式数据

<!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:

[
{           "id":"1",
            "name":"王小婷",
            "photo":"1234567"
},
{
             "id":"1",
            "name":"安安",
            "photo":"42353473"
}
]

表格如下：

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

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

热门文章

最新文章

相关课程

相关电子书