SpringMVC+bootstrap table实例详解

SpringMVC+bootstrap table实例详解

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

先来看一张效果图：

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

rel="stylesheet">

rel="stylesheet">

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

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

完啦，我们只需要在html页面中声明一个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, //页面大小

pageNumber: params.pageNumber, //页码

sortName: params.sort, //排序列名

sortOrder:params.order, //排序方式

searchText:params.search //搜索框参数

};

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。