Bootstrap Table 的用法

2019-01-21 02:38:43来源：博客园阅读 ()

记录下 Bootstrap Table 的用法，备忘。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WebDemo</title>

    <!--1. Jquery组件引用-->
    <script type="text/javascript" src="../Content/jquery/jquery-3.3.1.min.js"></script>

    <!--2. bootstrap组件引用 -->
    <script type="text/javascript" src="../Content/bootstrap/bootstrap.js"></script>
    <link rel="stylesheet" href="../Content/bootstrap/bootstrap.css" />

    <!--3. bootstrap table组件以及中文包的引用-->
    <link rel="stylesheet" href="../Content/bootstrap/bootstrap-table.css">
    <script type="text/javascript" src="../Content/bootstrap/bootstrap-table.js"></script>
    <script type="text/javascript" src="../Content/bootstrap/bootstrap-table-zh-CN.js"></script>

    <!--4. ayer组件的引用-->
    <script type="text/javascript" src="../Content/layer/layer.js"></script>

    <style type="text/css">
        /*bootstrap-table选中行颜色*/
        .table tbody .selected td {
            background-color: #EEE8AA;
        }
        /*表头颜色*/
        /*thead
        {
            background-color: #333333;
            color: #fdfdfd;
        }*/
        /*隔行变色*/
        /*table tbody tr:nth-child(even)
        {
            background-color: #b6ff00;
        }*/

        /*表头固定   todo*/
    </style>
</head>
<body>
    <div class="panel-body">
        <div id="toolbar">
            <div class="btn-group" style="float:left">
                <button id="btn_add" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
                </button>
                <button id="btn_edit" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除
                </button>
            </div>
            <!--https://blog.csdn.net/yaomingyang/article/details/80346678-->
            <form class="form-inline" style="float:left;margin-left:5px">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">院系</div>
                        <input type="text" class="form-control" name="searchTexts" id="txt_search_department" placeholder="请输入关键字...">
                    </div>
                </div>
                <button id="btn_search" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
                </button>
            </form>
        </div>

        <div class="table-responsive">
            <!--自适应水平滚动条-->
            <table id="table"> </table>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            getStudentQueryByPage();
            $("#btn_search").click(function () {
                getStudentQueryByPage();
            })
        }
        function getStudentQueryByPage() {
            $('#table').bootstrapTable('destroy');
            $('#table').bootstrapTable({
                method: 'post', //请求方式
                contentType: "application/x-www-form-urlencoded",
                url: "../Controllers/IndexController.ashx?action=getStudentQueryByPage",       //要请求数据的文件路径
                // height: return $(window).height(),                 //高度调整
                // searchTimeOut: '5000',
                // showHeader:true,
                striped: true,                                        //是否显示行间隔色
                pageNumber: 1,                                        //初始化加载第一页，默认第一页
                pagination: true,                                     //是否分页
                sidePagination: 'server',                             //指定服务器端分页
                pageSize: 2,                                         //单页记录数
                pageList: [2, 5, 10],                               //分页步进值 [10, 20, 50]
                showColumns: true,                                    //是否显示所有的列
                minimumCountColumns: 2,                               //最少允许的列数
                clickToSelect: true,                                  //是否启用点击选中行
                sortable: 'true',                                     //是否启用排序
                sortName: 'id',
                sortOrder: 'desc',                                    //排序方式
                toolbar: '#toolbar',                                  //工具按钮用哪个容器
                cache: true,                                          //是否使用缓存，默认是true
                //search: true,                                         //搜索框
                //searchOnEnterKey: true,                               //按回车触发搜索方法
                showRefresh: true,                                    //刷新按钮

                showToggle: true,                                     //详细视图和列表视图的切换按钮

                //cardView:false,
                //fixedColumns: true,
                //fixedNumber:1,                                        //固定列数
                queryParamsType: 'undefined',                         //查询参数组织方式
                queryParams: queryParams,                           //请求服务器时所传的参数
                responseHandler: function (res) {
                    return res;
                },
                //单机和双击触发的事件，当双击就会获取row，row就是该整行的内容，其中"row.RealName"中"RealName"是data-field定义的字段.
                onDblClickRow: function (row, $element, field) {
                    layer.msg("选中行用户的真实姓名:" + row.name);
                },
                onClickRow: function (row, $element, field) {
                    //var i = $element.data("index");//可通过此参数获取当前行号
                    //layer.msg(i + "，" + row.name + "，" + field);

                    var r = row[field];  //获取当前选中单元格内容
                    //判断当前单元格是否为空
                    if (r.length != 0) {
                        layer.msg(r); 
                    }
                },
                //获取选中行的数据
                //onCheck: function (row) {
                //    layer.msg("您选中的行的姓名为" + row.name + "，您选中的行的院系为" + row.department);
                //},
                singleSelect: true,                                    //单选checkbox，只能选中一行
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        title: '编号',
                        align: 'center',//居中
                        //valign: 'bottom',
                         //手动实现编号 或者通过row_number实现服务器编号
                        formatter: function (value, row, index) {
                            var pageNumber = $('#table').bootstrapTable("getOptions").pageNumber;
                            var pageSize = $('#table').bootstrapTable("getOptions").pageSize;
                            return pageSize * (pageNumber - 1) + index + 1;
                        }
                    },
                    {
                        field: 'id',
                        title: '学号',
                        align: 'center',
                        sortable: true
                    },
                    {
                        field: 'name',
                        title: '姓名',
                        sortable: true,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return "<span style='color:#FF0000'>" + value + "</span>";
                            //return "<img onclick=\"FindPersonMeg('" + proCode + "','" + projectName + "')\" title='点击查看责任人信息' src='/Themes/Images/16/application_form_magnify.png' style='vertical-align: middle;cursor: pointer;' alt='' />";
                            //return "<span style='color:#FF0000' onclick='TestLayer()'>" + value + "</span>";
                        }
                    },
                    {
                        field: 'sex',
                        title: '性别',
                        align: 'center',
                        sortable: true
                    },
                    {
                        field: 'birth',
                        title: '出生日期',
                        align: 'center',
                        sortable: true
                    },
                    {
                        field: 'department',
                        title: '院系',
                        align: 'center',
                        sortable: true
                    },
                    {
                        field: 'address',
                        title: '家庭地址',
                        align: 'center'
                    },
                    {

                        title: '详细信息',
                        align: 'center',//居中
                        formatter: function (value, row, index) {
                            // "<img  title='点击查看详细信息' src='Content/favicon.ico' style='vertical-align: middle;cursor: pointer;' alt='' />";


                            var detail = "<button type=\"button\" onclick=\"detailMsg('" + row.id + "','"+row.name+"')\" >"
                                + "<span class=\"glyphicon glyphicon-search\">查看详细信息</span> </button>";
                            return detail;
                        }
                    }
                ]
            });
        }

        function queryParams(params) {
            //方式一
            //params.project = $("#project").val();
            //params.start = $("#start").val();
            //params.end = $("#end").val();
            //params.alarmType = $("#alarm-type").val();
            params.txt_search_department = $("#txt_search_department").val();
            return params;

            //方式二
            //return {
            //    pageSize: params.limit,
            //    pageNumber: params.pageNumber
            //}
        }

        // 获取选中行的数据
        $("#btn_edit").click(function (e) {

            //var allTableData = $('#table').bootstrapTable('getData');//获取表格的所有内容行

            var getSelectionsRows = $('#table').bootstrapTable("getSelections"); //获取suoyou选中行的内容
            var name = getSelectionsRows[0].name;
            var sex = getSelectionsRows[0].sex;
            var birth = getSelectionsRows[0].birth;
            var department = getSelectionsRows[0].department;
            var address = getSelectionsRows[0].address;

            if (getSelectionsRows.length == 1) {
                //layer.open({
                //    type: 2,            // iframe层
                //    title: '编辑',
                //    shadeClose: true,
                //    shade: 0.8,
                //    area: ['800px', '600px'],
                //    content: ['./Test3Form.aspx?Account=' + escape(Account) + "&RealName=" + escape(RealName)
                //        + "&Gender=" + escape(Gender) + "&Mobile=" + escape(Mobile) + "&Email=" + escape(Email)
                //        + "&LastVisit=" + escape(LastVisit) + "&CreateDate=" + escape(CreateDate), 'no']
                //});

                alert("姓名：" + name + ", 性别：" + sex + ", 院系：" + department);
            } else {
                alert("请只选中一行！！！");
            }
        });

        //获取详细信息
        function detailMsg(id,name) {
            //var id = document.getElementById("id").value;
            //var url = "/Controllers/IndexController.ashx"
            //var data = "action=getDetail&name=" + name + "&id=" + id;
            //$.ajax({
            //    type: "get",
            //    url: url,
            //    data: data,
            //    dataType: "text",
            //    success: function (msg) {
            //        //return msg;
            //        alert("姓名：" + msg);
            //    },
            //    error: function () {
            //        Console.log("请求失败" + data);
            //    },
            //    //beforSend: function () {
            //    //    // 禁用按钮防止重复提交
            //    //    $("#submit").attr({ disabled: "disabled" });
            //    //}
            //});
            alert(name);
        }
    </script>
</body>
</html>