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 相关文章推荐
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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
thinkPHP模型初始化实例分析
2015/12/03 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python构建深度神经网络(DNN)
2018/03/10 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
新品发布会策划方案
2014/06/08 职场文书
服务员态度差检讨书
2014/10/28 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
计划生育工作总结2015
2015/04/03 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers