SpringMVC+bootstrap table实例详解

bootstrap-table下载地址:https://github.com/wenzhixin/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

(0)

相关推荐

  • 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,非DataTable Search 代码 HTML代码 查询条件代码 <!-- 查询.添加.批量删除.导出.刷新 --> <div class="row-fluid"> <di

  • spring mvc配置bootstrap教程

    本文实例为大家分享了spring mvc配置bootstrap教程,供大家参考,具体内容如下 1.下载bootstrap 到下面的链接下载最新的 http://getbootstrap.com/,我下载的版本是bootstrap-3.3.7-dist 2.解压bootstrap-3.3.7-dist.zip,把整个文件夹copy到项目的中.我创建的是maven项目,我的bootstrap资源文件放在webapp\res文件夹下. bootstrap-3.3.7-dist本身没有包含jquery.

  • 基于Bootstrap的Java开发问题汇总(Spring MVC)

    第一次接触Bootstrap框架,特别生疏.但是在慢慢了解了之后会发现bootstrap是一个前端的技术框架.结合了JQuery从而实现了非常丰富.美观的界面效果.此次项目是基于Spring MVC模式下. 1.菜单 在Bootstrap中构建一个菜单是一件非常容易的事情.因为有专门的菜单管理,所以相比以前做过的菜单相对来说就轻松的多.只需要点开菜单管理,进行需求菜单的添加.如下图所示: 添加完菜单之后还不能显示,因为没有为菜单分配权限.接下来在角色权限管理里面为菜单进行授权.之后用授权过的账户

  • BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐) 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个

  • Spring MVC下 bootStrap服务器分页代码

    因为Spring 对于ajax直接返回对象,到了WEB页面就转换成json 所以不需要使用JSON转换封装可以直接使用 <span style="white-space:pre"> </span>@RequestMapping(value = "/searchList.cqzk") @ResponseBody public BootPage<IllegalParkInfo> search(BootPage<IllegalPa

  • spring MVC + bootstrap实现文件上传示例(带进度条)

    最近学习了bootstrap,有结合了spring MVC写了个文件上传的示例,留做笔记,废话不多说,直接上代码 监听器类FileUploadProgressListener.Java package com.gpl.web.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereo

  • bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

    整合前的准备步骤 1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好. 2.下载bootstrap fileinput组件源码: https://github.com/kartik-v/bootstrap-fileinput/ 搭建后的效果图 图1. 图2. 图3. 图4. 图5. 在需要编写的jsp页面引入组件 本工程的路径界面如下: 在jsp引入组件需要的js

  • AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    一 .效果图 二.JS function getManagerList(dealerId,page2){ macAddress = document.getElementById("activeXDemo").getMac(); $.get("${ctxPath}/common/dealer/manager?"+Math.random(), { page2: page2, pageSize2: 9, dealerId: dealerId, macAddress:ma

  • SpringMVC+bootstrap table实例详解

    bootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table/ 先来看一张效果图: 下载下来后,需要导入的css:由于需要bootstrap的支持,所以需要导入bootstrap的css <!-- Bootstrap --> <link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external no

  • bootstrap table实例详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> var $table = $('#table'); var columns = []; //获取表头信息 function buildColumnsStyle(url, align, valign, ignore) { $.ajax({ 'method': 'GET', 'url': url, 'async': false, 'success': funct

  • 如何使用Bootstrap 按钮实例详解

    Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <button>, 或 <input> 元素上: 下面的实例演示了上面所有的按钮 class: <!-- 标准的按钮 --> <button type="button" class=&q

  • Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. 官网地址:http://bootstrappaginator.org/ DownloadVisit Project in

  • JS组件Bootstrap Table布局详解

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 表格类 下表样式可用于表格中: <tr>, <th> 和 <td> 类 下表的类可用于表格的行或者单元格: 基本的表格 如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示: <div class="row"> <table class="table"

  • SpringMVC工作原理实例详解

    介绍 SpringWeb MVC是Spring Framework中的一部分,当我们需要使用spring框架创建web应用的时候就需要引入springweb mvc.对于程序员来说,我们只需要增加@Controller ,@RequestMapping注解然后,浏览器中的请求就会到达springweb应用.我们只需要在 controller中编写相关逻辑即可.然而,请求是在哪里接收的?@Controller ,@RequestMapping注解做了什么?本文我们来探讨一下. 从一个项目开始 本文

  • Bootstrap表格和栅格分页实例详解

    拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-" /> <meta http-equiv=&qu

  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题--如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用Knockou

  • Bootstrap按钮组实例详解

    使用方法 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行.不过我们同样可以直接只调用bootstrap.js文件.因为这个文件已集成了button.js插件功能 同样地,因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果 <!DOCTYPE html> <html lang="en"> <head> <meta chars

  • 实例详解SpringMVC入门使用

    MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model),视图(View)和控制器(Controller).通过分层使开发的软件结构更清晰,从而达到开发效率的提高,可维护性和扩展性得到提高.Spring提供的MVC框架是在J2EE Web开发中对MVC模式的一个实现,本文通过实例讲解一下Spring MVC 的使用. 先来看一个HTTP request在Spring的MVC框架是怎么被处理的:(图片来源于Spring

随机推荐