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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
php多线程并发实现方法
2016/09/30 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python Tkinter基础控件用法
2014/09/03 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python类如何定义私有变量
2020/02/03 Python
Python如何实现邮件功能
2020/05/27 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
公司会计岗位职责
2014/02/13 职场文书
英文求职信写作小建议
2014/02/16 职场文书
委托书的写法
2014/09/16 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫