bootStrap_table

1BootStrap是一个响应式的前台框架。而bootStrap table是bootStrap的插件。


2 首选需要引入相关的js和css。
如：
<link rel="stylesheet" type="text/css" href="./js/bootStrapTable/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./js/bootStrapTable/css/bootstrap-table.css">


<link href="./js/test/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="./js/test/css/style.css" rel="stylesheet" type="text/css"/>


<script src="./js/bootStrapTable/jquery.min.js"></script>
<script src="./js/bootStrapTable/bootstrap.min.js"></script>
<script src="./js/bootStrapTable/bootstrap-table.js"></script>
<script src="./js/bootStrapTable/bootstrap-table-zh-CN.js"></script>


<script type="text/javascript" src="./js/test/js/jquery.toolbarlite.js"></script>  


说明：
bootstrap.min.css、bootstrap-table.css为bootStrap table所需要的css。
jquery.min.js、bootstrap.min.js、bootstrap-table.js、bootstrap-table-zh-CN.js为bootStrap table所需要的js。


还有一个是toolbarlite插件，是显示和控制按钮的。例如在table表格上面需要有工具条（新增、删除、编辑、查看等）
font-awesome.min.css、style.css为工具条所需要的css。
jquery.toolbarlite.js为工具条所需要的js


3 表格类似于使用datagrid一样。首先有一个<table id="table" style="margin:0px"></table>。然后通过js来控制。
如：var projectNameSerValue=document.getElementById("projectNameSer").value;
var url_table="./projectControl.action?method=list&projectNameSer="+projectNameSerValue;

$("#table").bootstrapTable({
        url: url_table,
        pagination: true,
        pageList: [10,20,30,40,50],
        pageSize:10,
        pageNumber:1,
        sidePagination:'server',//设置为服务器端分页
        locale:'zh-CN',
        uniqueId:"project_id",
        columns: [{
                      
                      checkbox: true
                  }, {
                      field: 'project_name',
                      title: '项目名称',
                      formatter: function(value,row,index){
                                      if (value==null||value==""){
                                          return value;
                                      } else if(value.length>20) {
                                           //<label for="female">Female</label>
                                          //return ''+value.substring(0,20)+'...';
                                          return value;
                                      }else {
                                          return value;
                                      }
                                  }
                  }, {
                      field: 'subscriber_name',
                      title: '发起人'
                  },{
                      field: 'project_starttime',
                      title: '发起时间'
                  } , {
                      field: 'project_duration',
                      title: '持续天数'
                  }, {
                      field: 'shengyuday',
                      title: '剩余天数',
                      formatter: function(value,row,index){
                                      if (value==null||value==""){
                                          return value;
                                      } else if(value<=-1) {
                                          return '-1';
                                      }else{
                                          return value;
                                      }
                                  }
                  },{
                      field: 'project_target',
                      title: '目标金额'
                  }, {
                      field: 'donationmoney',
                      title: '支持金额',
                      formatter: function(value,row,index){
                                      if (value==null||value==""){
                                          return "0";
                                      }else{
                                          return value;
                                      }
                                  }
                  },{
                      field: 'supportcount',
                      title: '支持次数'
                  }, {
                      field: 'project_state',
                      title: '项目状态',
                      formatter: function(value,row,index){
                                      if (value==null||value==""){
                                          return '筹款中';
                                      } else if(value=="0") {
                                          return '筹款中';
                                      }else {
                                          return '<font color=\"green\">完成</font>';
                                      }
                                  }
                  }, 
                  {
                      field: 'project_auditstate',
                      title: '审核状态',
                      formatter: function(value,row,index){
                                      if (value==null||value==""){
                                          return '未审核';
                                      } else if(value=="0") {
                                          return '未审核';
                                      }else if(value=="1") {
                                          return '<font color=\"green\">审核通过</font>';
                                      }else if(value=="2") {
                                          return '<font color=\"red\">审核未通过</font>';
                                      }
                                  }
                  }, 
                  {
                      field: 'project_settlement',
                      title: '款项状态',
                      formatter: function(value,row,index){
                                      if (value==0){
                                          return '<font color=\"green\">已打款</font>';
                                      } else if(value==1) {
                                          return '<font color=\"green\">退款进行中</font>';
                                      }else if(value==2) {
                                          return '<font color=\"green\">已退款</font>';
                                      }else if(value==3) {
                                          return '<font color=\"green\">已打款</font>';
                                      }else {
                                      return '<font color=\"green\">无</font>';
                                      }
                                  }
                  }]
    });


说明：
用法类似于datagrid一样。请求是通过配置的url属性值来得到的。是基于jquery的ajax的。
和datagrid不同之处是。uniqueId:"project_id",这个是用来控制唯一主键值的。


接下来来解释属性：
url：请求的ajax的url。
pagination：是否分页。
pageList：分页值（[10,20,30,40,50]）
pageSize:每页条数。
pageNumber：当前第几页。
sidePagination:'server',//设置为服务器端分页。必须这么写。表示调用服务端。
locale:'zh-CN',表示用中文
uniqueId：唯一主键。
columns：对应的列。


列里的属性：
checkbox：复选框
field：字段属性。
title：显示的名称
formatter：格式化函数。


用法是：$("#table").bootstrapTable({。。。。});


4 后台和接收ajax一样。传递datagrid所需要的数据一样：total、rows等。不过前台传递到后台的每页条数和当前第几页是需要记住的。
如：@RequestMapping(params = "method=list")
    @ResponseBody
    public Map<String, Object> list(HttpServletRequest request,Project project, ModelMap modelMap) throws IOException {
        
        int pageNow=this.getCurrentPage__(request);
        int pageSize=this.getShowCount__(request);
        project.setPageNow(pageNow);
        project.setPageSize(pageSize);
        
    projectService.setBean(project);
    projectService.getPage();
        
        List<User> list=(List<User>)project.getResultList();
        
            Map<String, Object> result = new HashMap<String, Object>() ;
            result.put("total",project.getTotalNum());
            if(list!=null){
                result.put("rows", list);
            }else{
                result.put("rows", new ArrayList<User>());
            }
            
            return result;//这个就是你在ajax成功的时候返回的数据，我在那边进行了一个对象封装
        
    }


public int getCurrentPage__(HttpServletRequest request){
        //分页 和条数 start
        int currentPage = request.getParameter("offset") == null ? 1 : Integer.parseInt(request.getParameter("offset"));
        int showCount = request.getParameter("limit") == null ? 10 : Integer.parseInt(request.getParameter("limit"));
        //System.out.println("得到当前页:"+currentPage+";每页行数"+showCount);
        
        if (currentPage != 0) {// 获取页数
            currentPage = currentPage / showCount;
        }
        currentPage =currentPage+1;
        System.out.println("currentPage:"+currentPage+";showCount:"+showCount);
        //分页 和条数 end
        return currentPage;
    }


public int getShowCount__(HttpServletRequest request){
        //分页 和条数 start
        int showCount = request.getParameter("limit") == null ? 10 : Integer.parseInt(request.getParameter("limit"));
        //分页 和条数 end
        return showCount;
    }


说明：
从代码中能看到。前台传递到后台的每页条数为：limit的属性值。而得到当前是第几页为：offset。这个要特别记住。


5 以上是打开界面后得到初始化的数据。还有一个是点击查询按钮时得到的数据。
如：
function btn_chaxun_click(){
var projectNameSerValue=document.getElementById("projectNameSer").value;
var url_table="./projectControl.action?method=list&projectNameSer="+projectNameSerValue;


$('#table').bootstrapTable('refresh',{url:url_table});

}


说明：
bootstrapTable有一个refresh方法。用于刷新。参数可以传递url过去。
可以理解为：点击查询，将查询值传递到后台。后台得到满足查询值的结果集，然后将结果集重新赋值给table。




!!!至此讲解了bootStrapTable的基础用法。初始化时的加载数据(配置属性)、配合查询按钮的功能。需要好好体会和领悟。