考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:编程开发 > JAVA > 文章内容
  

JavaScript知识点:SpringMVC+bootstraptable实例详解

 [ 2017年9月7日 ] 【

  本文通过实例给大家介绍了SpringMVC+bootstrap-table,需要的朋友可以参考下

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

  先来看一张效果图:

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

  ?

1
2
3
4
5
"${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" 
  rel="stylesheet">
"${contextPath }/static/bootstrap/table/bootstrap-table.css" rel="external nofollow" 
  rel="stylesheet">

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

  ?

1
2
3
4
5
6
  
  
  
  
  

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

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

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"container-fluid">
    
"toolbar" class="btn-group">
      
      
      
      
    
     "table_sysUser">
  

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

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

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
//项目根目录
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,  //页面大小
  "white-space:pre">    pageNumber: params.pageNumber, //页码
  "white-space:pre">    sortName: params.sort,"white-space:pre"> //排序列名
  "white-space:pre">    sortOrder:params.order,"white-space:pre"//排序方式
  "white-space:pre">    searchText:params.search"white-space:pre"//搜索框参数
    };
    return temp;
  };
  return oTableInit;
};
首页 1 2 尾页
本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved