Bootstrap-table实现下拉框三级联动查询，分页，参数设置表格，以及分页显示。
2020-06-07 05:08
1801 查看
1.Bootstrap-table的效果图如下：
2.添加boostrap的样式。可通过bootstrap官网下载。bootstrap-table页面布局样式:
<link rel="stylesheet" href="../static/assets/css/bootstrap.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css"> <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/locale/bootstrap-table-zh-CN.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/editable/bootstrap-table-editable.js"></script> <script src="../static/bootstrap/js/bootstrap.js"></script>
3.编写前端页面以及js代码
<body style="background-color: #E9ECF3;" data-type="widgets">
<jsp:include page="../main/common.jsp" />
<div class="tpl-content-wrapper" style="width: 1300px; margin-left: 400px;margin-top: 100px">
<div class="col-lg-6">
<div class="card" style="width: 1300px;">
<div class="card-header">DRC++规则配置</div>
<div class="card-body card-block">
<div class="form-group" style="width:15%; position:absolute;">
<select name="type" id="ruleBigTypeId" class="form-control" onchange="bigSelect()"></select>
</div>
<div class="form-group" style="width:25%; margin-left:18%; position:absolute;">
<select name="type" id="ruleTypeId" class="form-control" onchange="middleSelect()"></select>
</div>
<div class="form-group" style="width:25%; margin-left:45%;position:absolute;">
<select name="type" id="ruleNameId" class="form-control"></select>
</div>
<div class="form-group" style="width:25%; margin-left:75%">
<input name="cc-payment" type="text" id="ruleExplainId" class="form-control" placeholder="说明" >
</div>
<div class="form-group" style="width:300px;margin-left:790px" >
<button type="submit" class="btn btn-primary" onclick="searchTable()" style="width:100px;">搜索</button>
</div>
</div>
</div>
</div>
</div>
<!-- table布局 -->
<div class="tpl-content-wrapper" style="width: 1300px; margin-left: 394px; margin-top: 30px">
<div class="col-lg-6">
<div class="card" style="width: 1300px;">
<div class="card-body card-block">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<strong class="card-title">Data Table</strong>
</div>
<div class="card-body">
<table id="bootstrap-data-table" class="table table-striped table-bordered">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
onRuleBigType();
getquanxian();
});
function getquanxian(){
//1.初始化Table
var oTable = new onRuleInfo();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
}
function searchTable() {
$("#bootstrap-data-table").bootstrapTable("refresh"); //这个是点击查询按钮刷新页面
}
//整个大分类数据
function onRuleBigType(){
$("#ruleBigTypeId").html("");//清空大分类select标签下的HTML
$("#ruleTypeId").html("");//清空中分类select标签下的HTML
$("#ruleNameId").html("");//清空小分类select标签下的HTML
$.ajax({
url : "/rule/getRuleBigTypeList",
dataType : 'json',
type : 'GET',
success : function(dataInfo) {
var dataBigOptions = '<option value="">请选择组规则</option>';
var dataMiddleOptions = '<option value="">请选择规则类别</option>';
var dataSmallOptions = '<option value="">请选择规则名称</option>';
if(dataInfo.code == 0){
for(var i = 0; i < dataInfo.data.length; i++){
dataBigOptions += "<option value='"+dataInfo.data[i].id+"'>" + dataInfo.data[i].name +"</option>";
}
}
//将拼接好的<option>标签的HTML放到<select>标签下
$("#ruleBigTypeId").html(dataBigOptions);
$("#ruleTypeId").html(dataMiddleOptions);
$("#ruleNameId").html(dataSmallOptions);
}
});
}
//大分类监听
function bigSelect(){
//获取大类选中id
var bigTypeId = $('#ruleBigTypeId').children('option:selected').val();
var i = bigTypeId - 1;
//获取选中值
//var bigType = $("#ruleBigTypeId").find('option:selected').text();
//$("#ruleTypeId").html("");
if(bigTypeId != null || bigTypeId != ""){
$.ajax({
url : "/rule/getRuleBigTypeList",
dataType : 'json',
type : 'GET',
success : function(dataInfo) {
var dataMiddleOptions='<option value="">请选择规则类别</option>';
var middleList = dataInfo.data[i].middleList;
if(middleList.length==0){
//console.info("middleList的长度："+JSON.stringify(middleList.length));
dataMiddleOptions+='<option value="">没有对应的规则中类</option>';
}else{
for (var j = 0; j < middleList.length; j++) {
dataMiddleOptions += "<option value='"+middleList[j].id+"'>" + middleList[j].name +"</option>";
}
}
//将拼接好的<option>标签的HTML放到<select>标签下
$("#ruleTypeId").html(dataMiddleOptions);
}
});
}
}
//中分类监听
function middleSelect(){
//获取大类选中id
var bigTypeId = $('#ruleBigTypeId').children('option:selected').val();
//获取中类选中id
var middleTypeId = $('#ruleTypeId').children('option:selected').val();
if(middleTypeId != ""){
var i = bigTypeId - 1; //获取大分类
var j = middleTypeId - 1; //获取中分类
$("#ruleNameId").html("");
$.ajax({
url : "/rule/getRuleBigTypeList",
dataType : 'json',
type : 'GET',
success : function(dataInfo) {
var dataSmallOptions = '<option value="">请选择规则名称</option>';
var smallList = dataInfo.data[i].middleList[j].smallList;
if(smallList.length==0){
dataSmallOptions += '<option value="">没有对应的规则小类</option>';
}else{
for (var k = 0; k < smallList.length; k++) {
dataSmallOptions += "<option value='"+smallList[k].id+"'>" + smallList[k].name +"</option>";
console.info("smallList得id："+JSON.stringify(smallList[k]));
}
}
//将拼接好的<option>标签的HTML放到<select>标签下
$("#ruleNameId").html(dataSmallOptions);
}
});
}
}
function onRuleInfo(){
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#bootstrap-data-table').bootstrapTable({
url: '/rule/getRuleInfoList', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#tab2', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100,200], //可供选择的每页的行数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
queryParams: oTableInit.queryParams,//传递参数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: $(window).height()*0.88, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
rowStyle:function(row, index){
//console.info("id:"+row.id +"name:"+row.name);
return { }; //显示表格所有数据，row.id 代表后台传过来的id，row.name代表后台传过来的名称，以此类推。
},
columns: [
{
checkbox: true,
align: 'center',
width:'5%',
}, {
field: 'id',
title: '编号',
align: 'center',
width:'5%',
}, {
field: 'name',
title: '规则名称',
align: 'center',
width:'15%',
}, {
field: 'setInfo',
title: '设置',
align: 'center',
formatter:setInfoForm,//来返回函数格式化指定单元格的内容
width:'20%',
}, {
field: 'description',
title: '规则说明',
align: 'center',
// formatter:descriptionForm,
width:'35%',
}],
resizable: false, //是否可拖动
//注册加载子表的事件。注意下这里的三个参数！
onExpandRow: function (index, row, $detail) {
oTableInit.InitSubTable(index, row, $detail);
},
onEditableSave: function (field, row, oldValue, $el) {
docommit(row);
}
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
//获取大类选中id
var bigTypeId = $('#ruleBigTypeId').children('option:selected').val();
//获取中类选中id
var middleTypeId = $('#ruleTypeId').children('option:selected').val();
//获取小类选中id
var smallTypeId = $('#ruleNameId').children('option:selected').val();
console.info("smallTypeId的长度："+smallTypeId);
//说明
var descriptionValue = $("#ruleExplainId").val();
var temp = {//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
ruleBigTypeId: bigTypeId,
ruleTypeId: middleTypeId,
ruleNameId: smallTypeId,
description: descriptionValue,
pageNumber: params.offset/params.limit,
pageSize: params.limit,
};
console.info("params"+JSON.stringify(params) +"params.limit::" +params.limit);
return temp;
};
return oTableInit;
}
function setInfoForm(value, row, index){
var setInfo = row.setInfo;
if(setInfo == null){
return '<input type="text" value="无" class="form-control" />';
}else if(setInfo == "设置印制板厚度"){
return '<input type="text" placeholder="请设置印制板厚度" class="form-control"/>mm';
}
else if(setInfo == "传输方向"){
return '<select class="form-control">'+
'<option value="1">请选择传输方向</option>'+
'<option value="2">传输方向为X轴</option>'+
'<option value="3">传输方向为Y轴</option>'+
'</select>';
}else if(setInfo == "选择印制板铜厚"){
return '<select class="form-control">'+
'<option value="1">请选择印制板铜厚</option>'+
'<option value="2">34.80μm</option>'+
'<option value="3">68.60μm</option>'+
'</select>';
}else{
setInfo = row.setInfo;
return '<input type="text" class="form-control" value="'+setInfo+'"/>';
}
/* return '<select class="form-control">'+
'<option value="1">'+setInfo+'</option></select>'; */
}
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
};
$(".fixed-table-header").attr("class","fixed-table-header boottdtitlce");
$(".fixed-table-body").attr("class","fixed-table-body bottdcontle");
//这个可以用来改表头！！！在最上面那里加CLASS:'aaa',就可以了
// $(".aaa").html('<div class="th-inner ">aaa</div><div class="fht-cell"></div>');
return oInit;
};
</script>
</body>
4.后台Controller层：
@ApiOperation(value = "查询大中小类type", notes = "查询大中小类type")
@RequestMapping(value="/getRuleBigTypeList")
@ResponseBody
public Map<String, Object> getRuleBigTypeList(Model model){
Map<String, Object> map = new HashMap<String, Object>();
try {
map.put("code", 0);
map.put("data", ruleService.getRuleBigTypeList());
} catch (Exception e) {
map.put("code", 1);
throw e;
}
return map;
}
@ApiOperation(value = "查询表格数据", notes = "查询表格数据")
@RequestMapping(value="/getRuleInfoList")
@ResponseBody
public Map<String, Object> getRuleInfoList(
@RequestParam(value = "ruleBigTypeId", required = false) Integer ruleBigTypeId,
@RequestParam(value = "ruleTypeId", required = false) Integer ruleTypeId,
@RequestParam(value = "ruleNameId", required = false) Integer ruleNameId,
@RequestParam(value = "description", required = false) String description,
@RequestParam(value = "pageNumber", required = false) Integer pageNumber,
@RequestParam(value = "pageSize", required = false) Integer pageSize){
Map<String, Object> map = new HashMap<String, Object>();
try {
System.out.println("pageNumber:"+pageNumber + "pageSize"+pageSize);
//获取表格总数
map.put("total", ruleService.getCount(ruleBigTypeId, ruleTypeId, ruleNameId, description));
map.put("rows", ruleService.getRuleInfoList(ruleBigTypeId, ruleTypeId, ruleNameId, description, pageNumber, pageSize));
} catch (Exception e) {
map.put("code", 1);
throw e;
}
return map;
}
5.后台Service层：
public List<RuleBigTypeVo> getRuleBigTypeList(){
List<RuleBigTypeVo> bigList = ruleDao.getRuleBigTypeList();
for (RuleBigTypeVo bigTypeVo : bigList) {
List<RuleTypeVo> middleList = ruleDao.getRuleTypeList();
bigTypeVo.setMiddleList(middleList);
for (RuleTypeVo typeVo : middleList) {
typeVo.setSmallList(ruleDao.getList(bigTypeVo.getId(), typeVo.getId()));
}
}
return bigList;
}
public List<RuleVo> getRuleInfoList(Integer ruleBigTypeId, Integer ruleTypeId, Integer ruleNameId,
String description, Integer pageNumber, Integer pageSize){//, Integer pageNumber, Integer pageSize
return ruleDao.getRuleInfoList(ruleBigTypeId, ruleTypeId, ruleNameId, description, pageNumber, pageSize);
}
public int getCount(Integer ruleBigTypeId, Integer ruleTypeId, Integer ruleNameId,
String description){
return ruleDao.getCount(ruleBigTypeId, ruleTypeId, ruleNameId, description);
}
6.后台Dao层：
//查询大类数据
public List<RuleBigTypeVo> getRuleBigTypeList(){
List<RuleBigTypeVo> voList = new ArrayList<>();
StringBuffer sf = new StringBuffer();
sf.append("SELECT * FROM " + ruleBigTypeTable);
SqlRowSet rs = jt.queryForRowSet(sf.toString());
while(rs.next()){
RuleBigTypeVo vo = (RuleBigTypeVo) ApplicationContextProvider.getApplicationContext().getBean(RuleBigTypeVo.class);
vo.setId(rs.getInt("id"));
vo.setName(rs.getString("name"));
voList.add(vo);
}
return voList;
}
//查询中类数据
public List<RuleTypeVo> getRuleTypeList(){
List<RuleTypeVo> voList = new ArrayList<>();
StringBuffer sf = new StringBuffer();
sf.append("SELECT * FROM " + ruleTypeTable); // ruleTypeTable代表表名。可自己定义
SqlRowSet rs = jt.queryForRowSet(sf.toString());
while(rs.next()){
RuleTypeVo vo = (RuleTypeVo) ApplicationContextProvider.getApplicationContext().getBean(RuleTypeVo.class);
vo.setId(rs.getInt("id"));
vo.setName(rs.getString("name"));
voList.add(vo);
}
return voList;
}
//获取小类数据
public List<RuleVo> getList(int bigTypeId, int middleTypeId){
List<RuleVo> voList = new ArrayList<>();
StringBuffer sf = new StringBuffer();
sf.append("SELECT B.name AS '大类名称', C.name AS '中类名称', A.* FROM " + ruleInfoTable);
sf.append(" A INNER JOIN " + ruleBigTypeTable + " B ON A.rule_Big_type_id = B.id");
sf.append(" INNER JOIN " + ruleTypeTable + " C ON A.rule_type_id = C.id");
//rule_Big_type_id 代表大类id， rule_type_id 代表中类id。
sf.append(" WHERE A.rule_Big_type_id = " + bigTypeId + " AND A.rule_type_id = " + middleTypeId);
SqlRowSet rs = jt.queryForRowSet(sf.toString());
RuleVo vo = null;
while(rs.next()){
vo = purseVo(rs); /获取数据
voList.add(vo);
}
return voList;
}
//查询表格数据
public List<RuleVo> getRuleInfoList(Integer ruleBigTypeId, Integer ruleTypeId, Integer ruleNameId,
String description, Integer pageNumber, Integer pageSize){//int pageNumber, int pageSize
int begin = pageNumber*pageSize;
List<RuleVo> voList = new ArrayList<>();
StringBuffer sf = new StringBuffer();
sf.append("SELECT * FROM " + ruleInfoTable);
sf.append(" WHERE 1 = 1 ");
//判断是否为空
sf.append(generateCriteriaString(ruleBigTypeId, ruleTypeId, ruleNameId, description));
if(pageNumber != null && pageSize !=null) {
sf.append(" LIMIT " + begin + "," + pageSize);
}
SqlRowSet rs = jt.queryForRowSet(sf.toString());
RuleVo vo = null;
while(rs.next()){
vo = purseVo(rs);
voList.add(vo);
}
return voList;
}
private String generateCriteriaString(Integer ruleBigTypeId, Integer ruleTypeId, Integer ruleNameId, String description) {
StringBuffer sf = new StringBuffer();
if(ruleBigTypeId != null) {
sf.append(" AND rule_Big_type_id = " + ruleBigTypeId);
}
if(ruleTypeId != null) {
sf.append(" AND rule_type_id = " + ruleTypeId);
}
if(ruleNameId != null) {
sf.append(" AND id = " + ruleNameId);
}
if(description != null) {
sf.append(" AND description like '%" + description + "%'");
}
return sf.toString();
}
private RuleVo purseVo(SqlRowSet rs) {
RuleVo vo = (RuleVo) ApplicationContextProvider.getApplicationContext().getBean(RuleVo.class);
vo.setId(rs.getInt("id"));
vo.setName(rs.getString("name"));
vo.setSetInfo(rs.getString("set_info"));
vo.setDescription(rs.getString("description"));
vo.setRulePath(rs.getString("rule_path"));
vo.setPassReason(rs.getString("pass_reason"));
vo.setRuleTypeId(rs.getInt("rule_type_id"));
vo.setIsOpen(rs.getInt("is_open"));
vo.setRid(rs.getInt("rid"));
return vo;
}
7.接口格式展示图：
访问路径 + getRuleBigTypeList （获取大中小类下拉框数据）接口图：
访问路径 + getRuleInfoList （获取表格数据）接口图：
总结：以上就是我实现boostrap-table的思路和代码。纯属个人见解，记录一下以防万一。如果您有更好的解决方式，欢迎留言指教。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- Bootstrap Table 实现简单的查询和显示功能
- 【Lucene】使用EasyUI和JQuery配合Lucene实现数据的分页查询以及高亮显示
- 【Lucene】使用EasyUI和JQuery配合Lucene实现数据的分页查询以及高亮显示
- 省市区三级联动菜单实现及三级联动下拉列表框默认值的设置
- bootstrap的bootstrapTable分页查询如何扩展表单参数
- bootstrap-table插件实现ajax服务端分页显示
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
- easyUI实现显示“未找到查询结果”以及在loadtable方法中传递参数
- 省市区三级联动菜单实现及三级联动下拉列表框默认值的设置
- jquery将数据以table的形式显示,实现数据统计，分页，以及动态添加,搜索
- Bootstrap Table 实现简单的查询和显示功能
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
- bootstrap 实现用 table 表格显示list数据
- 自己实现的数据表格控件（dataTable），支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
- 省市区三级联动菜单实现及三级联动下拉列表框默认值的设置
- bootstrap-table当查询后再去点击分页时，后台返回的数据是正确的，前台也显示正确了，但是当我点击分页时，列表会刷新为最初的数据，而不再是本次查询得到的数据