SpringMVC+bootstrap table实例详解


Posted in Javascript onJune 02, 2017

bootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table/

先来看一张效果图:

SpringMVC+bootstrap table实例详解

下载下来后,需要导入的css:由于需要bootstrap的支持,所以需要导入bootstrap的css

<!-- Bootstrap --> 
<link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow"  
  rel="stylesheet"> 
<link href="${contextPath }/static/bootstrap/table/bootstrap-table.css" rel="external nofollow"  
  rel="stylesheet">

需要导入的js:除了bootstrap的js跟table的js外第一个要导入的就是jQuery的js,他们都是基于jQuery开发的

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
  <script src="${contextPath }/static/jquery/jquery.min.js"></script> 
  <!-- Include all compiled plugins (below), or include individual files as needed --> 
  <script src="${contextPath }/static/bootstrap/js/bootstrap.min.js"></script> 
  <script src="${contextPath }/static/bootstrap/table/bootstrap-table.js"></script> 
  <script src="${contextPath }/static/bootstrap/table/locale/bootstrap-table-zh-CN.js"></script>

bootstrap-table-zh-CN.js这个js是用来汉化table的提示文字的,在下载下来的bootstrap-table文件夹下的locale文件夹中有很多的语言包支持

完啦,我们只需要在html页面中声明一个table跟菜单div(如果不需要,可以不声明)就好:

<div class="container-fluid"> 
    <div id="toolbar" class="btn-group"> 
      <button id="btn_add" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 
      </button> 
      <button id="btn_edit" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 
      </button> 
      <button id="btn_delete" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 
      </button> 
      <button id="btn_info" type="button" class="btn btn-default"> 
        <span class="fa fa-info" aria-hidden="true"></span>详情 
      </button> 
    </div> 
    <table id="table_sysUser"></table> 
  </div>

table_sysUser就是我们要显示的table列表啦。

我们来看看js怎么来请求后台的数据,并进行分页跟查询:

//项目根目录 
var path = $("#contextPath").val(); 
$(document).ready(function() { 
  //初始化Table 
  var oTable = new TableInit(); 
  oTable.Init(); 
  //初始化页面上面的按钮事件 
  $("#btn_add").click(function(){ 
    //新增 
  }); 
  $("#btn_edit").click(function(){ 
    //编辑 
  }); 
  $("#btn_info").click(function(){ 
    //详情 
  }); 
  $("#btn_delete").click(function(){ 
    //删除 
  }); 
}); 
var TableInit = function () { 
  var oTableInit = new Object(); 
  //初始化Table 
  oTableInit.Init = function () { 
    $('#table_sysUser').bootstrapTable({ 
      url: path+'/sysuser/findUser.action',     //请求后台的URL(*) 
      method: 'post',           //请求方式(*) 
      toolbar: '#toolbar',        //工具按钮用哪个容器 
      striped: true,           //是否显示行间隔色 
      cache: false,            //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 
      pagination: true,          //是否显示分页(*) 
      sortable: true,           //是否启用排序 
      sortName:"id", 
      sortOrder: "desc",          //排序方式 
      queryParams: oTableInit.queryParams,//传递参数(*) 
      queryParamsType: 'limit', 
      sidePagination: "server",      //分页方式:client客户端分页,server服务端分页(*) 
      pageNumber:1,            //初始化加载第一页,默认第一页 
      pageSize: 15,            //每页的记录行数(*) 
      pageList: [10, 15, 20, 50],    //可供选择的每页的行数(*) 
      search: true,            //是否显示表格搜索 
      strictSearch: true, 
      showColumns: true,         //是否显示所有的列 
      showRefresh: true,         //是否显示刷新按钮 
      minimumCountColumns: 2,       //最少允许的列数 
      clickToSelect: true,        //是否启用点击选中行 
      //height: 500,            //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 
      uniqueId: "id",           //每一行的唯一标识,一般为主键列 
      showToggle:true,          //是否显示详细视图和列表视图的切换按钮 
      cardView: false,          //是否显示详细视图 
      detailView: false,          //是否显示父子表 
      contentType: "application/x-www-form-urlencoded", //解决POST提交问题 
      columns: [ 
           {checkbox: true }, 
      {title:'用户名称',field: 'userName',sortable:true }, 
      {title:'手机号码',field: 'phone',sortable:true, 
         formatter:function(v,r,i){ 
          if(v){ 
            return v.substring(0,3)+"****"+v.substring(7,4); 
          } 
          return v; 
        }   
      }, 
      {title:'邮箱账号',field: 'email',sortable:true }, 
      {title:'生日',field: 'birthday',sortable:true }, 
      {title:'部门',field: 'departmentKey',sortable:true, 
        formatter:function(v,r,i){ 
          if(r.departmentValue){ 
            return r.departmentValue; 
          } 
          return ""; 
        } 
      }, 
      {title:'最后登录时间',field: 'lastLogintime',sortable:true }, 
      {title:'性别',field: 'sex',sortable:true, 
        formatter:function(v,r,i){ 
          switch (Number(v)) { 
          case 1: 
            return "男"; 
            break; 
          case 2: 
            return "女"; 
            break; 
          default: 
            return "未知"; 
            break; 
          } 
        } 
      }, 
      {title:'用户状态',field: 'status',sortable:true, 
        formatter:function(v,r,i){ 
          return r.statusCn == "false"?"启用":"禁用"; 
        } 
      }, 
      {title:'所属公司编号',field: 'companyId',sortable:true }, 
      {title:'注册时间',field: 'createTime',sortable:true }, 
      {title:'用户头像',field: 'userhead',sortable:true }, 
      {title:'职位',field: 'positionKey',sortable:true}, 
      {title:'角色',field:'role'}] 
    }); 
  }; 
  //得到查询的参数 
  oTableInit.queryParams = function (params) { 
    var temp = {  //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 
      pageSize: params.limit,  //页面大小 
  <span style="white-space:pre">    </span>pageNumber: params.pageNumber, //页码 
  <span style="white-space:pre">    </span>sortName: params.sort,<span style="white-space:pre"> </span>//排序列名 
  <span style="white-space:pre">    </span>sortOrder:params.order,<span style="white-space:pre">  </span>//排序方式 
  <span style="white-space:pre">    </span>searchText:params.search<span style="white-space:pre">  </span>//搜索框参数 
    }; 
    return temp; 
  }; 
  return oTableInit; 
};

很多参数在代码注释里面说得很明显啦,我们来说说怎么新增查询参数,我们只需要在queryParams方法里面在新增参数信息就行:

oTableInit.queryParams = function (params) { 
    var temp = {  //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 
      pageSize: params.limit,  //页面大小 
      pageNumber: params.pageNumber, //页码 
      sortName: params.sort, //排序列名 
      sortOrder:params.order, //排序方式 
      searchText:params.search,  //搜索框参数 
      searchText:params.search,  //搜索框参数 
    }; 
    return temp; 
  };

bootstrap-table获取页面上勾选的数据:

var rowData = $("#table_sysUser").bootstrapTable("getSelections");

bootstrap-table刷新表格:

$('#table_sysUser').bootstrapTable('refresh');

源码:https://git.oschina.net/gzsjd/task

Javascript 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 #Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 #Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 #Javascript
javascript实现延时显示提示框效果
Jun 01 #Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
vue.js 获取当前自定义属性值
Jun 01 #Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHP数组相关函数汇总
2015/03/24 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
老师自我鉴定范文
2013/12/25 职场文书
诚信考试承诺书
2014/03/27 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书