bootstrap-table 多列排序

最新推荐文章于 2024-05-16 07:12:23 发布

weixin_41901270

最新推荐文章于 2024-05-16 07:12:23 发布

阅读量3.3k

点赞数

分类专栏： html 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_41901270/article/details/103550937

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文是一个示例，介绍怎样多列排序，官网API介绍的不够详细。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
 <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap-table-multiple-sort.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, // 是否启用排序
                showMultiSort: true, // 多列排序
                columns: [{
                        field: 'id',
                        title: '登录名',
                        sortable: true
                    },
                    {
                        field: 'name',
                        title: '昵称',
                        sortable: true
                    },
                    {
                        field: 'price',
                        title: '角色',
                        sortable: true
                    }, {

                        title: '操作',
                        field: 'id',
                        sortable: true,
                        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"
                    }
                ],
                onSort: function (name, order) {
                   console.log(name, order)
                },
                onMultipleSort: function (name, order) {
                  console.log(this.sortPriority)
                  console.log(order)
                } 

            });
            //操作栏的格式化
            // 定义删除、更新操作
            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>

关键引入这里官网API有相应的地址，我就不在过多叙述

weixin_41901270

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table 多列排序

本文是一个示例，介绍怎样多列排序，官网API介绍的不够详细。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template&...
复制链接

扫一扫