BootStrap Table对前台页面表格的支持实例讲解


Posted in Javascript onDecember 22, 2016

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、展示效果

BootStrap Table对前台页面表格的支持实例讲解

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

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

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

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

Javascript 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 #Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 #Javascript
详解js的事件代理(委托)
Dec 22 #Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 #Javascript
vue双向绑定的简单实现
Dec 22 #Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 #Javascript
深入理解jquery中extend的实现
Dec 22 #Javascript
You might like
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
jqueryUI tab标签页代码分享
2017/10/09 jQuery
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
对pandas中Series的map函数详解
2018/07/25 Python
python实现泊松图像融合
2018/07/26 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
单位介绍信范文
2014/01/18 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android