本文主要介绍了如何使用Bootstrap框架解析后端获取的数据。首先，我们定义了实体类来映射数据库中的信息。接着，详细阐述了后端如何查询并返回数据。在前端部分，利用Bootstrap组件展示数据。最后，通过引入的index.js文件实现了前后端的交互逻辑。
1、实体类
package cn.jpp.entity;
import cn.jpp.util.Page;
/**
* Created by 景佩佩 on 2017/1/16.
*/
public class UserInfo extends Page {
private String id;
private String username;
private String password;
private Integer age;
private String sex;
private String role;
private String email;
private String account;
private Integer sign;
private String authority;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getRole() {
return role;
}
public void setRole(String role) {
this.role = role;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public Integer getSign() {
return sign;
}
public void setSign(Integer sign) {
this.sign = sign;
}
public String getAuthority() {
return authority;
}
public void setAuthority(String authority) {
this.authority = authority;
}
public UserInfo() {
}
public UserInfo(String id, String username, String password, Integer age, String sex, String role, String email, String account, Integer sign, String authority) {
this.id = id;
this.username = username;
this.password = password;
this.age = age;
this.sex = sex;
this.role = role;
this.email = email;
this.account = account;
this.sign = sign;
this.authority = authority;
}
}
package cn.jpp.util;
public class Page {
private int pageNumber; //每页的条数
private int offset; //数据库查询索引
public int getPageNumber() {
return pageNumber;
}
public void setPageNumber(int pageNumber) {
this.pageNumber = pageNumber;
}
public int getOffset() {
return offset;
}
public void setOffset(int offset) {
this.offset = offset;
}
}
package cn.jpp.util;
import java.util.ArrayList;
import java.util.List;
/**
* 返回数据实体类
* @param <T>
*/
public class ReturnData <T>{
//数据集合
private List<T> rows = new ArrayList<T>();
//数据总条数
private int total;
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
}
2、后端查询数据
@RequestMapping(value = "/userList", method = RequestMethod.GET)
@ResponseBody
public Object showUserInfo(HttpServletRequest request, HttpSession session,UserInfo userInfo){
ReturnData<UserInfo> peopleData = new ReturnData<UserInfo>();
//得到总页数
int totle = iUserInfoService.getTatlo();
peopleData.setTotal(totle);
userInfo.setPageNumber(1);
userInfo.setOffset(10);
//得到user数据对象
List<UserInfo> plist = iUserInfoService.selectAllUser1(userInfo);
peopleData.setRows(plist);
return peopleData;
}
3、前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>用户列表</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/Scripts/jquery-1.10.2.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/Content/bootstrap/bootstrap.js"></script>
<link href="${pageContext.request.contextPath}/resources/js/Content/bootstrap/bootstrap.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/resources/js/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/Content/bootstrap-table/bootstrap-select.js"></script>
<link href="${pageContext.request.contextPath}/resources/js/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/resources/js/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/Scripts/Home/Index.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css?t=2" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/common.css?t=2" media="all">
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
<%-- <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.3.3/cjs/popper.min.js"></script>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js?t=2"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/common.js?t=2"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/reset.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/base.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/custom.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/custom_930.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/index.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/Shop/ShopListData.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/User/AuthManager.js"></script>
<!-- jq -->
<%-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!-- 样式 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<!-- js文件 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- 中文压缩包 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>--%>
<style>
.main-container .main-content .section-container .auction-container .auction-item {
margin-bottom: 25px;
}
#table1 tr{
height: 50px;
}
.auction-name{
text-align: right;
}
</style>
</head>
<style type="text/css" id="LAY_layadmin_theme"></style>
<body>
<div class="layui-card-body">
<table class="table table-bordered" style="text-align: center" id="info">
<caption style="margin-bottom: 20px">用户信息显示</caption>
<thead>
<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>
<table id="tb_departments"></table>
</div>
</table>
</div>
</body>
4、引入的index.js
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
$("button").attr("aria-expanded", "true");
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '../user/userList.ht', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
clickToSelect: true, //是否启用点击选中行
height: 500,
visible: true,
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [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: false, //是否显示父子表 field对应的对象的字段名
columns: [{
checkbox: true
}, {
field: 'username',
title: '用户名',
align: 'center',
valign: 'middle'
}, {
field: 'password',
title: '密码'
}, {
field: 'age',
title: '年龄'
}, {
field: 'sex',
title: '性别'
}, {
field: 'email',
title: '邮件'
}, {
field: 'account',
title: '账户',
sortable: true
}]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
order: params.order,
ordername: params.sort,
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
$("#btn_add").click(function () {
$("#myModalLabel").text("新增");
$("#myModal").find(".form-control").val("");
$('#myModal').modal()
postdata.DEPARTMENT_ID = "";
});
$("#btn_edit").click(function () {
var arrselections = $("#tb_departments").bootstrapTable('getSelections');
if (arrselections.length > 1) {
toastr.warning('只能选择一行进行编辑');
return;
}
if (arrselections.length <= 0) {
toastr.warning('请选择有效数据');
return;
}
$("#myModalLabel").text("编辑");
$("#txt_departmentname").val(arrselections[0].DEPARTMENT_NAME);
$("#txt_parentdepartment").val(arrselections[0].PARENT_ID);
$("#txt_departmentlevel").val(arrselections[0].DEPARTMENT_LEVEL);
$("#txt_statu").val(arrselections[0].STATUS);
postdata.DEPARTMENT_ID = arrselections[0].DEPARTMENT_ID;
$('#myModal').modal();
});
$("#btn_delete").click(function () {
var arrselections = $("#tb_departments").bootstrapTable('getSelections');
if (arrselections.length <= 0) {
toastr.warning('请选择有效数据');
return;
}
Ewin.confirm({message: "确认要删除选择的数据吗？"}).on(function (e) {
if (!e) {
return;
}
$.ajax({
type: "post",
url: "/Home/Delete",
data: {"": JSON.stringify(arrselections)},
success: function (data, status) {
if (status == "success") {
toastr.success('提交数据成功');
$("#tb_departments").bootstrapTable('refresh');
}
},
error: function () {
toastr.error('Error');
},
complete: function () {
}
});
});
});
$("#btn_submit").click(function () {
postdata.DEPARTMENT_NAME = $("#txt_departmentname").val();
postdata.PARENT_ID = $("#txt_parentdepartment").val();
postdata.DEPARTMENT_LEVEL = $("#txt_departmentlevel").val();
postdata.STATUS = $("#txt_statu").val();
$.ajax({
type: "post",
url: "/Home/GetEdit",
data: {"": JSON.stringify(postdata)},
success: function (data, status) {
if (status == "success") {
toastr.success('提交数据成功');
$("#tb_departments").bootstrapTable('refresh');
}
},
error: function () {
toastr.error('Error');
},
complete: function () {
}
});
});
$("#btn_query").click(function () {
$("#tb_departments").bootstrapTable('refresh');
});
};
return oInit;
};
function queryParams(params) {
/**
* 查询条件与分页数据
* @return {object} 返回参数对象
*/
//排序方式
params.order = "modify_time desc";
//第几页：指定跳转
params.nowPage = this.pageNumber;
//name
params.custName = $("#search-name").val();
//工具栏 参数
console.log("查询条件");
console.log(params);
return params;
}
扫一扫
1513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
