前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap Table写一个Demo

Bootstrap Table写一个Demo

作者头像
王小婷
发布2019-05-17 11:58:15
1.5K0
发布2019-05-17 11:58:15
举报
文章被收录于专栏:编程微刊编程微刊

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

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

代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.1.4/locale/bootstrap-table-zh-CN.min.js"></script>
    </head>
<style>
      #delUser,#dupUser{
                background: #1caf9a;
                color: #FFFFFF;
                border: none;
                margin-left: 12px;
            }
</style>
    <body>
        <table id="mytab" class="table table-hover"></table>
        <script>
            $('#mytab').bootstrapTable({
                url: '',
                queryParams: "queryParams",
                toolbar: "#toolbar",
                sidePagination: "true",
                striped: true, // 是否显示行间隔色
                //search : "true",
                uniqueId: "ID",
                pageSize: "5",
                pagination: true, // 是否分页
                sortable: true, // 是否启用排序
                columns: [{
                        field: 'id',
                        title: '登录名'
                    },
                    {
                        field: 'name',
                        title: '昵称'
                    },
                    {
                        field: 'price',
                        title: '角色'
                    }, {

                        title: '操作',
                        field: 'id',

                        align: 'center',
                        valign: 'middle',
                        formatter: option

                    }

                ], //数据
                data: [{
                        "id": 0,
                        "name": "Item 0",
                        "price": "$0"
                    },
                    {
                        "id": 1,
                        "name": "Item 1",
                        "price": "$1"
                    },
                    {
                        "id": 2,
                        "name": "Item 2",
                        "price": "$2"
                    },
                    {
                        "id": 3,
                        "name": "Item 3",
                        "price": "$3"
                    },
                    {
                        "id": 4,
                        "name": "Item 4",
                        "price": "$4"
                    },
                    {
                        "id": 5,
                        "name": "Item 5",
                        "price": "$5"
                    },
                    {
                        "id": 6,
                        "name": "Item 6",
                        "price": "$6"
                    },
                    {
                        "id": 7,
                        "name": "Item 7",
                        "price": "$7"
                    },
                    {
                        "id": 8,
                        "name": "Item 8",
                        "price": "$8"
                    },
                    {
                        "id": 9,
                        "name": "Item 9",
                        "price": "$9"
                    },
                    {
                        "id": 10,
                        "name": "Item 10",
                        "price": "$10"
                    },
                    {
                        "id": 11,
                        "name": "Item 11",
                        "price": "$11"
                    },
                    {
                        "id": 12,
                        "name": "Item 12",
                        "price": "$12"
                    },
                    {
                        "id": 13,
                        "name": "Item 13",
                        "price": "$13"
                    },
                    {
                        "id": 14,
                        "name": "Item 14",
                        "price": "$14"
                    },
                    {
                        "id": 15,
                        "name": "Item 15",
                        "price": "$15"
                    },
                    {
                        "id": 16,
                        "name": "Item 16",
                        "price": "$16"
                    },
                    {
                        "id": 17,
                        "name": "Item 17",
                        "price": "$17"
                    },
                    {
                        "id": 18,
                        "name": "Item 18",
                        "price": "$18"
                    },
                    {
                        "id": 19,
                        "name": "Item 19",
                        "price": "$19"
                    },
                    {
                        "id": 20,
                        "name": "Item 20",
                        "price": "$20"
                    }
                ]

            });
            //操作栏的格式化
            // 定义删除、更新操作
            function option(value, row, index) {
                var htm = '<button id="delUser" userId=' +
                    value +
                    ' onclick="delUser(this)">删除</button><button id="dupUser" onclick="updUser(' +
                    value + ')">修改</button>'
                return htm;
            }

            // 删除用户
            function delUser(dom) {

                var mymessage = confirm("确认删除嘛?");
                if(mymessage == true) {
                    $.ajax({
                        url: path + '/user/' + $(dom).attr("userId"),
                        type: 'delete',
                        success: function(data) {
                            $(dom).parent().parent().hide();
                        },
                        error: function(data) {
                            alert("服务器繁忙")
                        }
                    });
                }
            }

            // 编辑用户
            function updUser(id) {
                layer.open({
                    type: 2,
                    title: '编辑用户',
                    area: ['500px', '440px'],
                    fix: false, // 
                    content: path + '/xxx/xxxxUpd/' + id,
                    end: function() {
                        $("#mytab").bootstrapTable('refresh', {
                            url: path + "/xx/list"
                        });
                    }
                });
            }
        </script>
    </body>

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档