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实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
vue2.x select2 指令封装详解
Oct 12 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
少女风vue组件库的制作全过程
May 15 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
javascript 写类方式之四
2009/07/05 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
Python实现的RSS阅读器实例
2015/07/25 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python僵尸进程产生的原因
2017/07/21 Python
python素数筛选法浅析
2018/03/19 Python
Python3中的json模块使用详解
2018/05/05 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Python 私有化操作实例分析
2019/11/21 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
仓库管理专业个人的自我评价
2013/12/30 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
建筑安全责任书范本
2014/07/24 职场文书
城管年度个人总结
2015/02/28 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android