不理解请回复，基本每天在线！！！！
阅读路线：1.jsp页面:
2.js页面:(重点看，有可能会：迷闻经累劫,悟则刹那间)
3.Controller:
4.自己做的开发类向前台传递json数据工具类
jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BootStrap Table使用</title>
<!-- @*1、Jquery组件引用*@ -->
<script src="js/jquery.min.js"></script>
<!-- @*2、bootstrap组件引用*@ -->
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- @*3、bootstrap table组件以及中文包的引用*@ -->
<script src="bootstrap-table/bootstrap-table.js"></script>
<link href="bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- @*4、页面Js文件的引用*@ -->
<script src="js/bootstrap-table-fang.js"></script>
</head>
<body>
<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" method="post">
<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></body>
</html>
js页面
var str;$(function() {
// 1.初始化Table
var oTable = new TableInit();
oTable.Init();
// 2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function() {
var oTableInit = new Object();
// 初始化Table
oTableInit.Init = function() {
$('#tb_departments').bootstrapTable({
url : '/BootstrapTest/UserServlet?flag=showtest', // 请求后台的URL（*）连接一般是项目名加controller
method : 'post', // 请求方式（*）
toolbar : '#toolbar', // 工具按钮用哪个容器
striped : true, // 是否显示行间隔色
cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination : true, // 是否显示分页（*）
sortable : false, // 是否启用排序
sortOrder : "asc", // 排序方式
queryParamsType:"undefined",
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, // 是否显示父子表
responseHandler:function (res) {
return{
//"total":res//总页数
"rows":res,//数据
}
},
return{
//"total":res//总页数
"rows":res,//数据
}
},
columns : [ {
checkbox : true
}, {
field : 'Name',
title : '部门名称'
}, {
field : 'ParentName',
title : '上级部门'
}, {
field : 'Level',
title : '部门级别'
}, {
field : 'Desc',
title : '描述'
},
{
field:'goodsId',
title:'操作',
formatter:function(value,row,index){
var ret='<button class="btn btn-info" οnclick="handler.goodsBuy('+value+');">购买</button>';
return ret;
}
}]
});
};
// 得到查询的参数
oTableInit.queryParams = function(params) {
var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit : params.limit, // 页面大小
offset : params.offset, // 页码
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() {
// 初始化页面上面的按钮事件
};
return oInit;
};
Controller页面
package com.fang.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fang.dao.UserDAO;
import com.fang.daoImp.UserDAOImp;
import com.fang.entity.UserEntity;
import com.fang.util.AjaxRequestUntils;
/**
* Servlet implementation class UserServlet
*/
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private UserDAO dao=new UserDAOImp();
/**
* Default constructor.
*/
public UserServlet() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.先置统一字符串
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name=request.getParameter("username");
String pass=request.getParameter("password");
String flag=request.getParameter("flag");
if("login".equals(flag)){
int a=dao.login(name,pass);
if(a>0){
//把用户名通过session传递出去
request.getSession().setAttribute("username", name);
request.getRequestDispatcher("bootstrap-table-fang.jsp").forward(request, response);
}else{
response.sendRedirect("Login.jsp");
}
}
if("off".equals(flag)){
request.getSession().removeAttribute("username");
request.getRequestDispatcher("Login.jsp").forward(request, response);
}if("showtest".equals(flag)){//展示数据
System.out.println("来到这里了吗?");
showRsb(request,response);
}
}
/**
* 新添加的方法
* @param limit
* @param offset
* @param departmentname
* @param statu
* @return
*/
public void showRsb(HttpServletRequest request,HttpServletResponse response)
{
List<Map<String, Object>> list=dao.showRsb();
AjaxRequestUntils.AjaxAndJsonArray(list, request, response);
}
}
贡献一个自己开发的untils工具类
package com.fang.util;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
/**
* ajax异步请求
* @author fang
*
*/
public class AjaxRequestUntils {
/**
* ajax与json相互调用
*
* @param jsonArray
* @param request
* @param response
*/
public static void AjaxAndJsonArray(List list, HttpServletRequest request, HttpServletResponse response) {
JSONArray jsonArray = new JSONArray(list);// 转换成JSon传给jsp
try {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("text/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonArray);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* AjaxAndJsonObject
*
* @param object
* @param request
* @param response
*/
public static void AjaxAndJsonObject(Object object, HttpServletRequest request, HttpServletResponse response) {
try {
response.setHeader("Access-Control-Allow-Origin", "*");
// 这是一种输出流,
response.setContentType("text/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(object);
} catch (IOException e) {
e.printStackTrace();
}
}
}
947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
