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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP常用代码
2006/11/23 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php二维数组排序详解
2013/11/06 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
web 页面分页打印的实现
2009/06/22 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Python模拟百度登录实例详解
2016/01/20 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
党员公开承诺书2015
2015/01/21 职场文书
爱国影片观后感
2015/06/18 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python