Bootstrap Table写一个Demo

2019-05-17 11:58:15 浏览数 (1)

基于 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>

0 人点赞