bootstrap table的使用笔记

1.第一步，引进额外的 js、css，不被bootstrap.js/css所包含

<link href="${ctx}/styles/bootstrap/css/bootstrap-table.min.css")" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="${ctx}/js/bootstrap-table/bootstrap-table.min.js"></script>
<!--table插件的文本翻译成中文-->
<script type="text/javascript" src="${ctx}/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

2.html的方式定义table

<table  id="OperatelistTable" data-toggle="table" id="table" data-url='${ctx}/fee/getList.shtml'                   
    data-query-params="createParams" 
    data-side-pagination="server" data-pagination="true" data-page-list="[5,8,10]"
    data-pagination-first-text="<<" data-pagination-pre-text="<" 
    data-pagination-next-text=">" data-pagination-last-text=">>" data-toolbar=".toolbar">
    <thead>
         <tr>
            <th data-field="id"                 data-align="center" data-visible="false"></th>
            <th data-field="admin.account"      data-align="center">操作人</th>
            <th data-field="createDate"         data-align="center" data-formatter="formatDate">操作时间</th>
            <th data-field="realRepayAmount"    data-align="left" data-formatter="formatRecord">操作内容</th>
        </tr>
    </thead>
</table>

3.js的方式定义table

    var TableInit = function() {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function() {
            $('#tb_user').bootstrapTable({
                url : '${ctx}/knuser/findByPage.shtml', //请求后台的URL（*）
                //若为post，需要指定contentType : "application/x-www-form-urlencoded"，否则controller会接收不到，
                //因为如果不指定contentType的话就会默认以application/json的方式发送数据，java就不能用getParameter拿到内容了，但是可以用输入流接收
                method : 'get', //请求方式（*）
                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 ], //可供选择的每页的行数（*）
                strictSearch : true,
                showColumns : true, //是否显示所有的列
                showRefresh : true, //是否显示刷新按钮
                clickToSelect : true, //是否启用点击选中行
                //height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId : "ID", //每一行的唯一标识，一般为主键列
                showToggle : false, //是否显示详细视图和列表视图的切换按钮
                cardView : false, //是否显示详细视图
                detailView : false, //是否显示父子表
                showRefresh: false, //右上角不显示刷新按钮
                showColumns: false, //不显示列选择按钮
                columns : [ {
                    field : 'name',
                    title : '姓名',
                    formatter: function (value, row, index) {
                        var url="/user/detail.shtml?id="+row.id;
                        var html="<a href=\"javascript:tbLoad('"+url+"')\">"+value+"</a>";
                        return html;
                    }
                    
                }, {
                    field : 'verifyTime',
                    title : '实名时间',
                    //——修改——获取日期列的值进行转换
                    formatter: function (value, row, index) {
                        var unixTimestamp = new Date(value);
                        var commonTime = unixTimestamp.format("yyyy-MM-dd hh:mm");
                        return commonTime;
                    }
                } ]

            });
        };

        //得到查询的参数
        oTableInit.queryParams = function(params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit : params.limit, //页面大小
                offset : params.offset/10+1, //页码
                key : $("#txt_search_key").val(),
                startDate:oDatepicker.startDate,
                endDate:oDatepicker.endDate,
                platform:$("#select_platform").val(),
                version:$("#select_version").val()
            };
            return temp;
        };
        return oTableInit;
    };

4.禁止自动加载
如果定义table的时候指定了url的值，页面刚出来就会立即加载一次数据，如果不希望这样，就在定义的时候不设置url或者url:''
然后在需要加载的时候调用$('#tb_order').bootstrapTable('refreshOptions', {url: '${ctx}/order/findByPage.shtml'});
注意：refreshOptions和refresh的区别是refreshOptions会改变table的属性值，refresh不会改变旧的url以至于虽然此次调用刷新了表格但是分页的时候点击还是调用旧的url（如果旧的url没有值会导致点击下一页没有反应）；其共同点是都会根据新的url刷新表格
5.列响应多个时点击事件

image.png

<th data-field="id"     data-align="center" data-formatter="formatOperate" data-events="operateEvents">操作</th>

js代码

$(function() {
   window.operateEvents = {
                'click .href_h': function (e, value, row, index) {
                    $("#listModal").modal({backdrop:false});
                    $("#listModal").modal({backdrop:false});
                    var url="search?id="+row.id;
                    $("#listmodal_table").bootstrapTable('refreshOptions',{'url':url});
                    return false;
                },
                'click .href_u': function (e, value, row, index) {
                    $("#editModal").modal({backdrop:false});
                    $("#form_data input[name='id']").val(row['id']);
                    $("#form_data input[name='channelId']").val(row['channelId']);
                    return false;
                }
    }
}
//动态生成操作链接的html
function formatOperate(value, row, index){
        var html=["<a class=\"href_h\" href='javascript:void(0)'>历史记录</a>","<a class=\"href_u\" href='#'>修改</a>"];
        return html.join('    ');
    }