1、bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css有

  1)基本的还是jQuery

<script type="text/javascript" src="js/jquery.min.js?v=2.1.4"></script>

  2)引入bootstrap

<script type="text/javascript" src="js/bootstrap.min.js?v=3.3.6"></script>
<link rel="stylesheet" href="css/bootstrap.min14ed.css?v=3.3.6">

 3)引入bootstrap-table

<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css">

2、页面的编写方式(建议)

<div class="table">
<table id="publish_model"></table>
</div>

3、具体的数据加载和处理都在js里面完成,具体的实现过程不用自己去写,bootstrap-table都写好了

//这里是js的具体代码的样式处理
dynamicTable = $("#publish_model").bootstrapTable("destroy").bootstrapTable({
url: "model/getPublishModel",
striped: true,
pagination: true,
singleSelect: true,
clickToSelect: true,
pageNumber:1,
pageSize: 10,
pageList: [5, 10, 20],
sidePagination: "server",
queryParamsType: "limit",
queryParams: getPageMessage,
minimunCountColumns: 2,
height:$(window).height()*0.85,
columns:[{
field:"modelName",
title:"模型名称",
align: "center", },{
field:"modelDescription",
title:"模型描述",
align: "center"
},{
field:"executeType",
title:"执行类型",
align: "center"
},{
field:"typeName",
title:"模型类型",
align: "center"
},{
field:"price",
title:"价格",
align: "center"
},{
field:"publishDate",
title:"发布时间",
align: "center",
formatter: function(v){
var date = new Date(v).format("yyyy-MM-dd hh:mm:ss");
return "<span>"+date+"</span>";
}
},{
field:"shortcutOperation",
title:"快捷操作",
align: "center",
formatter: function(v,r,i){
var str = "<div class='btn-group'>"+
"<button id="+r.modelId+" class='btn btn-success btn-xs' onclick='applyReason(\""+r.modelId+"\")'>申请权限</button>"+
"</div>"
if(r.status=='00'){
var str = "<div class='btn-group'>"+
"<button class='btn btn-success btn-xs' style='background:#ccc;border-color:#ccc;' >已申请</button>"+
"</div>"
}
return str;
}
}]
});
//传递参数到后台
function getPageMessage(params){
var temp={
limit: params.limit,
offset: params.offset,
modelName:$("#model_name").val(),
typeId:$("#modelType").val()
};
return temp;
}

 这里说明几个问题:

  1)这里加入这部分( bootstrapTable("destroy") )的目的是页面存在刷新效果需要重新加载

  2)相对应的设置参考官方文档:http://bootstrap-table.wenzhixin.net.cn/documentation/

  3)后面简单说一下具体的效果设置:在具体的单元格数据中可以使用formatter()方法来实现,其中存在3个值v,r,i分别是值,行数据,角标。具体的效果可以参考着bootstrap的方式来实现通过return的方式来给页面呈现不一样的效果,当然也可以设置直接设置效果通过cellStyle方法也是可以的!

  4)传参:这个根据个人的一个实现功能来做,不管有没有数据,后台传过去的不是null而是""。limit和offset是做分页处理需要传给后台 

4、然后就是后台的一个处理(很重要)

 @RequestMapping("/getPublishModel")
@ResponseBody
public Map<String, Object> getModelPublishList(Integer limit,Integer offset,String modelName,String typeId,HttpServletResponse response) throws IOException{
//设置相应数据格式
response.setContentType("application/json;charset=utf-8");
try {
// 获取相应数据
Map<String, Object> modelList = modelManager
.getModelPublishListData(limit, offset, modelName,typeId);
return modelList;
} catch (Exception e) {
e.printStackTrace();
throw e;
} finally {
HibernateSessionFactory.closeSession();
}
}

  说明:

  1)数据返回的形式:

Map<String, Object> map =  new HashMap<String,Object>();
map.put("total", "分页时采用的数据总条数");//这里可以单独写一个sql来实现总条数
map.put("rows", "数据的list集合");//这里可以获取相对应的数据
注意:因为前台和字段名字要对应所以,list的泛型可以是对象的形式,也可以是Map<String, Object>的形式
List list = querySql.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();//这是我用hibernate执行的map结果会自动封装成Map
sql里面一定要设置别名,比如:m.modelId AS modelId等

  2)返回的时候通过json的方式放回,这里不建议springmvc自动返回,建议通过PrintWriter的方式写出到前台,不然会出现json方面的错误。

5、展示效果

提示:搜索功能需要自己做,传入的参数也是通过上面的传入

6.问题:因为考虑到接送的传输问题,在bootstrap-table里面存在post请求的问题,这也是我一直没有解决的问题!

  1)因为bootstrap-table对post请求进行了封装,在使用post请求的时候取不到数据(我也在研究这个问题,希望高人指点)

  2)后台数据封装的字段名问题,必须要一样才可以,不用别名返回的是字段名1234。。这个是因为hibernate造成的,其他框架略过

7.相关问题处理

  1)由于bootstrap-table中的表头和内容是分两个table来显示的,导致很多时候出现缩小窗口过后,出现两个表格出现错误的问题处理方式如下:

$('#publish_model').bootstrapTable(); // init via javascript
$(window).resize(function () {
$('#publish_model').bootstrapTable('resetView');
});

  说明:这个是利用jQuery对窗口方法的实现,来帮定的事件。通过bootstrap-table的bootstrapTable方法来实现窗口重置。

  

bootstrap-table对前台页面表格的支持的更多相关文章

  1. 【转】bootstrap table轻松实现数据表格

    在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...

  2. bootstrap table简洁扁平的表格

    使用方法 1.在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css. <link rel="stylesheet&qu ...

  3. BootStrap table动态增删改表格内数据

    1:添加一个[操作]列   { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...

  4. Bootstrap Table 从新InsertRow 刷新表格 数据的问题处理方案

    1.第一步获取数据源 var rows = { //要插入的数据,这里要和table列名一致SkuCode: data.rows[i].SkuCode,BarCode: data.rows[i].Ba ...

  5. bootstrap table使用colResizable后表格不能自适应

    窗口缩小放大后,b表格不能自适应,table加了宽度没效果,求教

  6. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  7. 表格组件神器:bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  8. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  9. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

随机推荐

  1. Python 标准库 urllib2 的使用细节

    刚好用到,这篇文章写得不错,转过来收藏.    转载自 道可道 | Python 标准库 urllib2 的使用细节 Python 标准库中有很多实用的工具类,但是在具体使用时,标准库文档上对使用细节 ...

  2. 汇编 db,dw,dd的区别

    db定义字节类型变量,一个字节数据占1个字节单元,读完一个,偏移量加1 dw定义字类型变量,一个字数据占2个字节单元,读完一个,偏移量加2 dd定义双字类型变量,一个双字数据占4个字节单元,读完一个, ...

  3. Altium查看所有快捷键,图文教程

    方式一:依次打开“查看”>>"工作区面板">>“Help”>>“快捷方式”.即可. 英文版“快捷方式”为“shotcut” 方式二: 留意右下角 ...

  4. Android Studio 快捷键 for Mac OS X 10.5+

    Action Mac OSX Win/Linux 注释代码(//) Cmd + / Ctrl + / 注释代码(/**/) Cmd + Option + / Ctrl + Alt + / 格式化代码 ...

  5. Android 三档自定义滑动开关,禁止点击功能的实现,用默认的seekbar组件实现

    android三档自定义滑动开关,禁止点击功能的实现,普通开关网上有很多例子,三档滑动开关的则找了整天都没有相关例子,开始用普通开关的源码修改了自己实现了一个类,但效果不如人意,各种边界情况的算法很难 ...

  6. redis消息队列

    http://blog.csdn.net/21aspnet/article/details/7455032

  7. [译]GotW #4 Class Mechanics

    你对写一个类的细节有多在行?这条款不仅注重公然的错误,更多的是一种专业的风格.了解这些原则将会帮助你设计易于使用和易于管理的类. JG Question 1. 什么使得接口“容易正确使用,错误使用却很 ...

  8. WPF——传实体类

    User u; private void Button_Click_1(object sender, RoutedEventArgs e) //点击登陆按钮,弹出新窗体 { //先判断一下是不是正确的 ...

  9. MySQL锁机制

    一.概况MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking):BDB存储引擎采用 ...

  10. C#用xpath查找某节点

    C#用xpath查找某节点 从根节点一直下来的相对路径才能确定Xpath的写法. /root/<节点1>/<节点2>//<@属性> Xpath是功能很强大的,但是也 ...