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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
jQuery拖动图片删除示例
May 10 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
js实现九宫格抽奖
Mar 19 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
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
PHP实现递归的三种方法
2020/07/04 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python随机取list中的元素方法
2018/04/08 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记