bootstrap table 简介01

bootstrap table 简介01

最近项目要用到 bootstrap table这个插件，就简单记下这个插件的大概如何使用

首先 第一步引入bootstrap table的插件
http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 在这里下载所需要的js文件

引入文件
bootstrap.min.css
bootstrap-table.css
bootstrap-editable.css

bootstrap.min.js
bootstrap-table.js

引入下面这个文件 可以让bootstrap table 显示为中文
bootstrap-table-zh-CN.js

第二步 页面table 的定义
<\table id=”weeklyContentTable”><\/table>

第三步 js定义
function taskmanageTable(){
//销毁表格
$(‘#taskTable’).bootstrapTable(‘destroy’);
//初始化表格,动态从服务器加载数据
$(‘#taskTable’).bootstrapTable({
method: ‘post’,//请求方式
url : ”,
cache: false,
striped: true,
height:580, //表格高度
pagination: true,
pageSize: 15, //每页显示的记录数
pageNumber:1, //开始查询条数
pageList: [10, 15, 20, 25], //记录数可选列表
maintainSelected: true ,
clickToSelect: true,
sidePagination:’server’, //表示服务端请求
responseHandler: responseHandler, //设置返回数据的接收
queryParams:querygkParams, //设置传参
queryParamsType : “undefined”,
contentType: “application/x-www-form-urlencoded”,
onLoadSuccess:function(data) {

            },
            onPreBody:function(data) {   //请求后后触发 

            },
            columns: [ 
                { field: 'state',  checkbox: true},
                {  field: 'taskName',  title: '任务名称 ',valign: 'middle' }, 
                {  field: 'userId',  title: '创建人',valign: 'middle' }
            ] ,

        });  

}

//设置多管控查询参数
function querygkParams(params) {     
     var param = {    
                page: params.pageNumber,    
                rows: params.pageSize,
                controlType:"1",
                startTime : $("#startTime").val()
            };    
            return param;          
       }
//设置表格数据及总条数
function responseHandler(res) {
    if (res.rows.length!=0) {
        return {
            "rows": res.rows,
            "total": res.total
        };
    } else {
        return {
        "rows": [],
        "total": 0
        };
    }
}

//table 中时间转换
    function formatterDate(value, row, index){
         return  new Date(parseInt(value.time.toString())).Format("yyyy-MM-dd hh:mm:ss");


    }

    Date.prototype.Format = function (fmt) { //author: meizz 
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

第四步 java后台代码的书写
ps 我这里使用的是struts、spring框架

public String getJsonTable() throws IOException{
    Map<String,Object> filterMap = getFilterMap(getFilter());
    、if(LOG.isInfoEnabled()){
        LOG.info("查询故障表的sql条件为"+filterMap.get("filter"));
    }
    int count = faultAnalysisService.getFaultAnalysisCount(filterMap);
    pager = new Pager(page,rows,count);
    faultAnalysisList = faultAnalysisService.getFaultAnalysis(filterMap, pager.getStartRow(), pager.getPageSize(), new String[] { "createDate" }, new int[] { 1 });
    String rapidTestUrlList=JSONArray.fromObject(faultAnalysisList).toString();
    response.setContentType("text/html;charset=utf-8");
    String json = "{\"total\":" + count + ",\"rows\":" + rapidTestUrlList + "}";
    response.getWriter().write(json);
    return null;
}