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;}