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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 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
星际争霸秘籍
2020/03/04 星际争霸
php中的登陆login
2007/01/18 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
实习生岗位职责
2014/04/12 职场文书
房屋转让协议书
2014/10/18 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
JavaScript函数柯里化
2021/11/07 Javascript