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>
  • 相关阅读:
    Liferay安装maven
    html之pre标签
    a标签使用注意事项
    AngularJS学习记录
    页面不能访问,抛出 spring java.lang.IllegalArgumentException: Name for argument type [java.lang.String] 异常
    ant编译的时候,报错文件不存在,以及版本不一致
    Eclipse 更改Java 版本的方法
    总结一下本次准备环境时遇到的问题,以供下次参考
    数据上下文中的AddOrUpdate方法
    推荐一款github管理神器SourceTree
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701764.html
Copyright © 2011-2022 走看看