zoukankan      html  css  js  c++  java
  • BootstrapTable的使用教程

    官方网站:
    http://bootstrap-table.wenzhixin.net.cn/
    参考文档:http://issues.wenzhixin.net.cn/bootstrap-table/index.html
    中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
    下载bootstrap Table插件所必须的js,地址:https://github.com/wenzhixin/bootstrap-table

    在开发项目的时候,发现了一款JS组件系列——表格组件神器
    ,官方文档也比较简单,总结了一些常遇到的问题

    一:实现一个简单的表格和分页

    图片.png
    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8" />
            <title>Dashboard | Nadhif - Responsive Admin Template</title>
            <link rel="stylesheet" href="../../../css/bootstrap.min.css">
            <link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css">
            <script src="../../../js/jquery.min.js"></script>
            <script src="../../../js/bootstrap.min.js"></script>
            <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
            <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
        </head>
    
        <body>
            <table id="mytab" class="table table-hover"></table>
            <script>
                $('#mytab').bootstrapTable({
                    url: 'data1.json',
                    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: '角色'
                        },
                        {
                            field: 'price',
                            title: '操作',
                            width: 120,
                            align: 'center',
                            valign: 'middle',
                            formatter: actionFormatter,
                        },
    
                    ]
                });
                //操作栏的格式化
                function actionFormatter(value, row, index) {
                    var id = value;
                    var result = "";
                    result += "<a href='javascript:;' class='btn btn-xs green' onclick="EditViewById('" + id + "', view='view')" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs blue' onclick="EditViewById('" + id + "')" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs red' onclick="DeleteByIds('" + id + "')" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                    return result;
                }
            </script>
        </body>
    
    </html>
    

    json数据:

        [  
            {  
                "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"  
            }  
        ]  
    

    二:说一说BootstrapTable的属性一览表

    
                url: '/Home/GetDepartment',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber:1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
    }]
    

    三:bootstrap-table如何设置首行变色,其他行不变色

    其实很简单,在代码之中找到首行对应的代码,然后添加属性即可


    图片.png
    #mytab  thead{background: #5488c4;}
    

    四:添加删除数据之后表格自动刷新加载

    $table.bootstrapTable('refresh');
    

    五:如何设置bootstrap-table插件的隔行变色的颜色

    图片.png

    代码样式如下

    <style>
    #mytab tr:nth-child(even){
    background:#f4f8fb;
    }
    </style>
  • 相关阅读:
    yocto/bitbake 学习资源
    QEMU/KVM学习资源
    ubuntu 中创建和删除用户
    git 重命名本地和远程分支
    Ubuntu 上搭建 FTP 服务器
    gdb 常见用法
    git log 显示与特定文件相关的 commit 信息
    基于 qemu system mode 运行 arm 程序
    基于 qemu user mode 运行 aarch64 程序
    checking in(airport)
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701764.html
Copyright © 2011-2022 走看看