Bootstrap Table写一个Demo

简介: Bootstrap Table写一个Demo

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

代码:

<!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>
相关文章
|
4月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
42 1
|
4月前
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
43 0
|
4月前
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
33 0
|
4月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
37 0
|
4月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
19 0
|
4月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
42 0
|
4月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
18 0
|
4月前
|
前端开发
解决bootstrap table刷新加载时白色闪屏问题
解决bootstrap table刷新加载时白色闪屏问题
28 0
|
4月前
|
前端开发
bootstrap table+layer实现一个表格删除
bootstrap table+layer实现一个表格删除
17 0
|
4月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
33 2