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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 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
PHP安全配置
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
导游的职业规划书范文
2013/12/27 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
高中历史教学反思
2014/02/08 职场文书
物资采购方案
2014/06/12 职场文书
婚内分居协议书范文
2014/11/26 职场文书
党课主持词大全
2015/06/30 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL