引用自：http://www.cnblogs.com/landeanfen/p/4976838.html
使用bootstrap，首先在bootstrap源码地址：http://v3.bootcss.com/getting-started/#download 下载源码。
下载bootstrap中table的拓展包地址：http://bootstrap-table.wenzhixin.net.cn/getting-started/。
确保已经把相应的jQuery文件和上面bootstrap两个包都导入进项目。
界面展示：
使用：
1.前端编写
引入相应js和css，下面是我引入的文件：
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="${APP_PATH}/static/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css">
<script src="${APP_PATH}/static/dist/bootstrap-table.min.js"></script>
<script src="${APP_PATH}/static/dist/locale/bootstrap-table-zh-CN.js"></script> html编写
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">状态</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
</div>
</div>
</form>
</div>
</div>
<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>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="table"
data-pagination="true"
data-show-refresh="true"
data-show-toggle="true"
data-showColumns="true">
</table>
</div>
</div>
</div>
js编写
var oTableInit = new Object();
var oInit = new Object();
$(function(){
createtable();
});
function createtable(){
//先销毁表格
$('#table').bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
$("#table").bootstrapTable({
method: "get", //使用get请求到服务器获取数据
url: "${APP_PATH}/BisController/querylist.do", //获取数据的Servlet地址
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [5,10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: true, //是否显示父子表
rowStyle:function rowStyle(row, index) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "17px"}
};
},
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType : "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
page: params.pageNumber,
rows: params.pageSize,
search:params.search
/* orderNum : $("#orderNum").val() */
};
return param;
},
columns: [{
checkbox: true
}, {
field: 'CRDNO',
title: '卡号'
}, {
field: 'MODIDATE',
title: '更新日期'
}, {
field: 'MODITIME',
title: '更新时间'
}, ],
onExpandRow:function(index, row, $detail) {
oTableInit.InitSubTable(index, row, $detail);
}
});
}
//初始化子表格(无线循环)
oTableInit.InitSubTable = function (index, row, $detail) {
var cur_table = $detail.html("<table id='cusTable'></table>").find('table');
//初始化表格,动态从服务器加载数据
$("#cusTable").bootstrapTable({
method: "get", //使用get请求到服务器获取数据
url: "${APP_PATH}/dic/querylist.do", //获取数据的Servlet地址
method: 'get', //请求方式（*）
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [5,10, 25, 50, 100], //可供选择的每页的行数（*）
detailView: true, //是否显示父子表
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType : "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
page: params.pageNumber,
rows: params.pageSize,
search:params.search
/* orderNum : $("#orderNum").val() */
};
return param;
},
columns: [{
checkbox: true
}, {
field: 'DISCTYPE',
title: '类别'
}, {
field: 'DISCTYPENAME',
title: '类别名称'
}, {
field: 'DISCKEY',
title: '字典代码'
}, ] ,
//无线循环取子表，直到子表里面没有记录
onExpandRow: function (index, row, $Subdetail) {
oInit.InitSubTable(index, row, $Subdetail);
}
});
return oTableInit;
};
2.后端编写
@Controller
@RequestMapping("/Bis")
public class BisController {
@Resource
IBisService service;
@RequestMapping(value = "/index")
public String index() {
return "/BisList";
}
@RequestMapping(value="/querylist",method=RequestMethod.GET)
@ResponseBody
public DataGridJson querylist(DataGrid dg, Bis vo){
try {
return service.querylist(dg, vo);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}@Controller
@RequestMapping("/dic")
public class DicController {
@Resource
IDicService dicService;
@RequestMapping(value="/querylist",method=RequestMethod.GET)
@ResponseBody
public DataGridJson querylist(DataGrid dg, DicVO dict) {
try {
return dictService.queryList(dg, dict);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
