码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-table简单使用

时间:2019-02-22 11:53:11      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:list   sheet   pre   view   查看   客户端分页   $1   delete   开发项目   

开发项目时总想着能不能有一款插件包含分页,查询等常用功能,后来发现了bootstrap-table

直接看代码和效果图

技术图片

 

<!DOCTYPE html>
<html lang="en">
 <head>
        <meta charset="UTF-8" />
        <title>bootstrap-table</title>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/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,
                    },

                ],
                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 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>

更详细的表格配置解释:

 

     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简单使用

标签:list   sheet   pre   view   查看   客户端分页   $1   delete   开发项目   

原文地址:https://www.cnblogs.com/gcgc/p/10417363.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!