Bootstrap table使用方法汇总


Posted in Javascript onNovember 17, 2017

bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件。而bootstrap是来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,具有简便灵活,快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

首先交代一下,jquery ,bootstrap ,bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖jquery的,而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的,所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js,css文件。

接着说,bootstrap-table的特点:与jquery-ui,jqgrid等表格显示插件而言,bootstrap-table扁平化,轻量级,对于一些轻量级的数据显示,他是绰绰有余,而对父子表等的支持也很好,最主要的是可以与bootstrap的其他标签无缝组合。

1、引入js、css

<!--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>

2、table数据填充

bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据

<table data-toggle="table">
 <thead>
 ...
 </thead>
</table>
 ...
$('#table').bootstrapTable({
 url: 'data.json'
 });

第二种方式较第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。

$(function () {
 
 //1.初始化Table
 var oTable = new TableInit();
 oTable.Init();
 
 //2.初始化Button的点击事件
 /* var oButtonInit = new ButtonInit();
 oButtonInit.Init(); */
 
 });
 
 
 var TableInit = function () {
 var oTableInit = new Object();
 //初始化Table
 oTableInit.Init = function () {
 $('#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: '出货'
 },]
 });
 };
 
 //得到查询的参数
 oTableInit.queryParams = function (params) {
 var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
 limit: params.limit, //页面大小
 offset: params.offset, //页码
 sdate: $("#stratTime").val(),
 edate: $("#endTime").val(),
 sellerid: $("#sellerid").val(),
 orderid: $("#orderid").val(),
 CardNumber: $("#CardNumber").val(),
 maxrows: params.limit,
 pageindex:params.pageNumber,
 portid: $("#portid").val(),
 CardNumber: $("#CardNumber").val(),
 tradetype:$('input:radio[name="tradetype"]:checked').val(),
 success:$('input:radio[name="success"]:checked').val(),
 };
 return temp;
 };
 return oTableInit;
 };

field字段必须与服务器端返回的字段对应才会显示出数据。

3、后台获取数据

a、servlet获取数据

BufferedReader bufr = new BufferedReader(
 new InputStreamReader(request.getInputStream(),"UTF-8"));
 StringBuilder sBuilder = new StringBuilder("");
 String temp = "";
 while((temp = bufr.readLine()) != null){
 sBuilder.append(temp);
 }
 bufr.close();
 String json = sBuilder.toString();
 JSONObject json1 = JSONObject.fromObject(json);
 String sdate= json1.getString("sdate");//通过此方法获取前端数据
 ...

b、springMvc Controller里面对应的方法获取数据

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype)
{
 ...
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
繁简字转换功能
Jul 19 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
Javascript学习指南
Dec 01 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 #Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 #Javascript
vue.js项目打包上线的图文教程
Nov 16 #Javascript
Three.js基础学习教程
Nov 16 #Javascript
three.js实现3D视野缩放效果
Nov 16 #Javascript
three.js中3D视野的缩放实现代码
Nov 16 #Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php实现mysql封装类示例
2014/05/07 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
python负载均衡的简单实现方法
2018/02/04 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
财务经理岗位职责
2013/11/09 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
毕业寄语大全
2014/04/09 职场文书
2014年文员工作总结
2014/11/18 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android