bootstrap的table表格使用

bootstrap的table表格使用（分页查询、条件查询）

• 先要下载bootstap-table插件包
  http://download.csdn.net/detail/zhangyabin86/9748534

---

• 将插件的jar包引入到工程中，并通过src导入到本地的项目里

---

<!--css样式--><link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"><link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"><!--js--><script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script><script src="js/bootstrap/bootstrap.min.js"></script><script src="js/bootstrap/bootstrap-table.js"></script><script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

---

• 接下来就可以调用包中的bootstrapTable的方法

  $('#tradeList').bootstrapTable({  url: '/VenderManager/TradeList',  //请求后台的URL（*）  method: 'post',   //请求方式（*）  toolbar: '#toolbar',  //工具按钮用哪个容器  striped: true,   //是否显示行间隔色  cache: false,   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）  pagination: true,   //是否显示分页（*）  sortable: false,   //是否启用排序  sortOrder: "asc",   //排序方式  queryParams: oTableInit.queryParams,//传递参数（*）  sidePagination: "server",  //分页方式：client客户端分页，server服务端分页（*）  pageNumber:1,   //初始化加载第一页，默认第一页  pageSize: 50,   //每页的记录行数（*）  pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）  strictSearch: true,  clickToSelect: true,  //是否启用点击选中行  height: 460,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度  uniqueId: "id",   //每一行的唯一标识，一般为主键列  cardView: false,   //是否显示详细视图  detailView: false,   //是否显示父子表  columns: [{   field: 'id',   title: '序号'  }, {   field: 'liushuiid',   title: '交易编号'  }, {   field: 'orderid',   title: '订单号'  }, {   field: 'receivetime',   title: '交易时间'  }, {   field: 'price',   title: '金额'  }, {   field: 'coin_credit',   title: '投入硬币'  }, {   field: 'bill_credit',   title: '投入纸币'  }, {   field: 'changes',   title: '找零'  }, {   field: 'tradetype',   title: '交易类型'  },{   field: 'goodmachineid',   title: '货机号'  },{   field: 'inneridname',   title: '货道号'  },{   field: 'goodsName',   title: '商品名称'  }, {   field: 'changestatus',   title: '支付'  },{   field: 'sendstatus',   title: '出货'  },]  }); };

• 介绍几个重要的参数
  url：这个参数是表格的数据源，请求的数据的url。与Action层里面的方法对应
  queryParams: queryparams 请求过程中传递的参数

function queryParams(params) {        return {        pageSize: params.limit,        pageNumber:params.offset/params.limit +1,        };        }

pageSize：params.limit 传递的的页面大小

pageNumber：params.offset/params.limit+1 传递的是当前页

---

源码

• 在查询操作

---

  <form id="searchForm" >            <div style="padding:3px; float:left">                动态编号&nbsp;&nbsp;<input class="form-control"  name="dno"                    id="sd.dno" style="width:110px" /></div><div style="padding:3px; float:left">账号&nbsp;&nbsp;<input class="form-control" name="userName"                    id="sd.userInfo.userName" style="width:110px" /></div>            <div style="clear:both">                <div style="padding:3px;float:left">                昵称&nbsp;&nbsp;<input class="easyui-textbox" name="name"                    id="sd.userInfo.name" style="width:110px" /></div><div style="padding:3px;float:left">标题关键字&nbsp;&nbsp;<input class="easyui-textbox" name="title"                    id="sd.title" style="width:150px" /></div><div style="padding:3px;float:left">内容关键字&nbsp;&nbsp;<input class="easyui-textbox" name="text"                    id="sd.text" style="width:150px" />&nbsp&nbsp<button type="button"  method="post" class="btn btn-primary" name="button"  id ='btnf' onclick =search()>查询</button>   </div>                     </form>

    function search()        {        var opt = {                             url: 'doDynamicsList',                        silent: true,                        query:{                            'sd.dno':searchForm.dno.value,                            'sd.userInfo.userName':searchForm.userName.value,                            'sd.userInfo.name':searchForm.name.value,                            'sd.title':searchForm.title.value,                            'sd.text':searchForm.text.value                        }                    };        $("#table").bootstrapTable('destroy');         $('#test').bootstrapTable('refresh',opt);          }

响应查询按钮，将input内的值传入后台中

---

解释

• name用于表单提交加了name属性的标签元素才会提交到服务器
• id 一般用于css和js中引用
• 获取表单参数的两种方法如下

通过表单的name值获取

 <html>   <head>   <script language="javascript">    function print(){     var a=myform.name.value;     alert(a);    }   </script>   </head>   <body>    <form name="myform">     <input type="text" name="name" id="nn" />     <input type="button" name="button" value="获取" onclick="print()" />    </form>     </body>  </html>  

---

通过id获取

<html>   <head>   <script language="javascript">    function print(){     var a=document.getElementById("nn").value;     alert(a);    }   </script>   </head>   <body>    <form>     <input type="text" name="name" id="nn" />     <input type="button" name="button" value="获取" onclick="print()" />    </form>     </body>  </html>  

• 最后通过重新加载table提交表单（需要先摧毁table）

$("#table").bootstrapTable('destroy'); $('#test').bootstrapTable('refresh',opt);  

---

注意

进行查询时，如有中文参数传递，则需要改变Action层的ContentType否则会出现乱码

resp.setContentType("application/x-www-form-urlencoded; charset=UTF-8");