:D 沒有看過之前博文的人建議從第三篇開始閱讀->>https://mp.csdn.net/console/editor/html/104677362
整個項目的代碼會在完成這一系列博客後傳至csdn下載或github~
照例有任何問題歡迎下方評論>3<
1 圖片演示
①分類列表（listCategory.jsp）
②編輯分類(editCategory.jsp)
③增加分類(addCategory.jsp)
④刪除分類（確認框）
2 詳細分析
①該模塊在左側導航欄第三個管理的位置，相關具體代碼在index.jsp中位置如下：
（index.jsp的總體代碼在上一篇博文，在此不贅述）
圖示如下：
表面是由listCategory.jsp和addCategory.jsp頁面組成，實則還有editCategory.jsp
②數據庫設計
（總的數據庫設計見之前博文）
|
屬性名 |
類型 |
長度 |
允許空 |
是否主鍵 |
說明 |
|
category_id |
int |
10 |
NOT NULL |
主鍵 |
分類id |
|
catagory_name |
varchar |
20 |
NOT NULL |
|
分類名稱 |
|
parent_id |
int |
10 |
NOT NULL |
|
父分類id |
③總體分析步驟
第一步：Category的實體類（pojo層），與數據庫表中字段相對應
第二步：Category的相關Dao層接口（先思考需要實現那些內容，再寫接口，需要再添加）
第三步：CategoryDao接口的實現類CategoryDaoImpl類
第四步：listCategory.jsp的頁面，寫相關的servlet層接口，如listPageCategory接口
第五步：editCategory.jsp的頁面，接收傳過來的參數，寫相關的servlet層接口，如editCategory接口
（且該頁面是藉助listCategory.jsp頁面的彈出層來完成的）
第六步：addCategory.jsp的頁面，寫相關的servlet層接口，如listCategory接口
（以下詳細介紹各個頁面以及數據交互的過程）
④listCategory.jsp與editCategory.jsp設計
（1）使用layui裏的經典的數據表格佈局，這就對他從後臺傳回來的數據有一定的要求，官網要求如下：
（詳細介紹及擴展部分見官網：https://www.layui.com/doc/modules/table.htm l）
（2）layui的table佈局中有三種渲染方法：方法渲染、自動渲染、靜態表格渲染，這裏使用的是方法渲染，要求如下：
cols裏面各個field對應於每一列的表頭，其field的值應該與後臺傳過來的屬性變量名是一樣的，這裏我的命名和數據庫中字段名也是一樣的
url對應的是servlet層的數據接口地址
（3）利用layui的templet來實現field爲'parent_id'的數據模板化
（比如，傳過來的數據是0，然後我要讓他變成無，需要兩步。）
第一步：創建一個模板，注意類型是text/html
代碼圖示如下：
第二步：增加一個屬性在你想要模塊上的那個field上，注意id要對應。
代碼圖示如下：
（4）listCatrgory.jsp渲染數據表格時還使用了分頁效果，相關步驟如下：
第一步：設置開啓table的分頁效果（page:true）
第二步：servlet層先獲取limit（默認10）和page（默認1）參數值
第三步：再通過CategoryDaoImpl.java的getPageCategory(page,limit)方法返回相關分類每頁數據，是ArrayList對象
代碼圖示如下：
第四步：再通過CategoryDaoImpl.java裏getAllCategory()方法返回分類總數據，是ArrayList對象
(在這裏其實只需返回一個int變量，因爲後來還需用它，所以我返回ArrayList對象)
代碼圖示如下：
第五步：前臺回調數據實現分類列表時，具體來說接收的是符合一定規則的json數據，這裏我掌握了兩個方法
First Method：3.1 先使用map集合，保存相關數據格式------>>
3.2 再利用google的json解析包將map格式轉爲string格式，google的json包目錄如下
3.3 然後返回給前臺，ajax回調時選擇json格式就會自動把其轉換爲json格式
（這裏要注意它使用的是PrintWriter對象的write方法寫到前臺）
Second Method: 也是先使用map存儲數據，再利用json的jar包，首先你需要如下jar包:
代碼圖示如下：
（這裏要注意它使用的是PrintWriter對象的print方法寫到前臺）
（4）綜上，listAdm.jsp頁面的詳細步驟如下：
第一步：運用方法渲染的格式，其table的id值與渲染表格的elem值要對應
圖示如下：
第二步：使用layui的數據表格table結構，在url裏寫入對應的數據接口（分類列表的數據接口）
圖示如下：
第三步：寫入對應的工具條模板，就相當於操作模板，注意script的type值
圖示如下：
第四步：監聽工具條，layEvent對應
舉例如下：
第五步：(1)點擊某一項的編輯按鈕時，它就觸發監聽工具條的事件,通過layEvent確定觸發的是“編輯”事件
(2)利用彈出層的content屬性，走到servlet層，同時將category_id傳回去
(3)它獲取category_id是通過data.category_id的方法
(因爲之前渲染數據時數據接口返回的值都存在data裏頭)
圖示如下：
(4)4.1它先走selectServlet這個控制層的接口，
4.2然後從Dao層的getOneCategory()通過category_id讀取對應的一條管理員的數據，
4.3返回的是Category對象，將其對應信息保存在request屬性中，
4.4最後1再將數據轉發到editCategory.jsp頁面
圖示如下：
(5)編輯彈出層主要是利用layui的form組件，利用getAttribute()方法獲得上一步存儲的屬性值
第六步：(1)點擊某一項的刪除按鈕時，它就觸發監聽工具條的事件,通過layEvent確定觸發的是“刪除”事件
(2)利用layui提供的confirm彈出對話框，提示用戶執行下一步操作
(3)當用戶點擊“確定”時，先刪除對應行的DOM結構（假刪除），
再通過ajax向服務端發送刪除指令，調用delCategory接口，傳過去category_id（真刪除），
(4)table重新加載——table.reload('demo');
其中demo是table的id名
圖示如下：
(5)在delCategory接口中，先獲得傳過來的id，再利用Dao層的delete(int id)方法，返回值爲布爾值
(6)將這個boolean值返回給前端，然後前端通過這個值判斷是否刪除成功
圖示如下：
⑤addCategory.jsp的設計
（1）addCategory.jsp主要是以layui裏的form表單實現分類的增加，設計爲一個下拉框、輸入框、重置按鈕和提交按鈕
圖示如下：
（2）addCategory.jsp的下拉框是獲取父類別名稱，這裏設計的是一個無限分類的，當然也可以滿足二層分類需求
第一步：首先設計這個下拉框，默認有一個選項，選中這個選項的就代表是頂層分類，我給其id值設爲0
圖示如下：
第二步：在打開這個頁面時，用ajax要動態獲取後臺傳過來的數據，這裏主要走listCategory這個接口
圖示如下：
第三步：後臺返回的數據result是一個object類型，參數如下：
（3）用戶點擊提交後的處理過程，如圖所示：
3 具體代碼
①Category.java
package pojo;
public class Category {
private int category_id;
private int parent_id;
private String category_name;
public int getCategory_id() {
return category_id;
}
public void setCategory_id(int category_id) {
this.category_id = category_id;
}
public int getParent_id() {
return parent_id;
}
public void setParent_id(int parent_id) {
this.parent_id = parent_id;
}
public String getCategory_name() {
return category_name;
}
public void setCategory_name(String category_name) {
this.category_name = category_name;
}
}
②CategoryDao.java
package dao;
import java.util.ArrayList;
import pojo.Category;
public interface CategoryDao {
//1.增加分類
public boolean insertCategory(int parent_id,String category_name);
//2.獲取所有的分類
public ArrayList<Category> getAllCategory();
//3.根據id到數據庫中查詢分類
public Category getOneCategory(int category_id);
//4.修改分類
public boolean update(Category category);
//5.刪除分類
public boolean delete(int category_id);
//6.獲得一級目錄
public ArrayList<Category> getFirstCategory();
//7.獲得二級目錄
public ArrayList<Category> getSecondCategory(int parent_id);
//8.獲取分頁分類
public ArrayList<Category> getPageCategory(int page,int limit);
//9.通過子分類查父分類
public int getParentCategory(int category_id);
}
③CategoryDaoImpl.java
package dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import util.DBUtil;
import pojo.Adm;
import pojo.Category;
import pojo.ChangePage;
public class CategoryDaoImpl implements CategoryDao {
//1.增加分類
@Override
public boolean insertCategory(int parent_id,String category_name) {
//System.out.println("1.你走了我這個方法哦");
Connection conn = DBUtil.getConnection();
// 在數據庫中添加記錄
String sql = "insert into dai_category(parent_id,category_name) values(?,?)";
// 預編譯
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1, parent_id);
prep.setString(2, category_name);
prep.executeUpdate();
return true;
} catch (SQLException e) {
e.printStackTrace();
return false;
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//2.獲取所有的分類
@Override
public ArrayList<Category> getAllCategory() {
ArrayList<Category> c = new ArrayList<Category>();
Connection conn = DBUtil.getConnection();
// 在數據庫中添加記錄
String sql = "select * from dai_category";
// 預編譯
try {
PreparedStatement prep = conn.prepareStatement(sql);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
//3.根據id到數據庫中查詢分類
@Override
public Category getOneCategory(int category_id) {
//System.out.println("又到了萬衆矚目的測試環節啦！！！");
Category c = null;
Connection conn = DBUtil.getConnection();
// 在數據庫中修改記錄
String sql = "select * from dai_category where category_id = ?";
// 預編譯
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1,category_id);
ResultSet rst = prep.executeQuery();
c = new Category();
if(rst.next()) {
c.setCategory_id(rst.getInt("category_id"));
c.setCategory_name(rst.getString("category_name"));
c.setParent_id(rst.getInt("parent_id"));
return c;
}
}catch(Exception e) {
e.printStackTrace();
}finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
//4.修改分類
@Override
public boolean update(Category category) {
Connection conn = DBUtil.getConnection();
// 在數據庫中修改記錄
String sql = "update dai_category set category_name = ?,parent_id = ? where category_id=?";
// 預編譯
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setString(1,category.getCategory_name());
prep.setInt(2, category.getParent_id());
prep.setInt(3, category.getCategory_id());
prep.executeUpdate();
return true;
} catch (SQLException e) {
e.printStackTrace();
return false;
}finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//5.刪除分類
@Override
public boolean delete(int category_id) {
Connection conn = DBUtil.getConnection();
// 在數據庫中刪除記錄
String sql = "delete from dai_category where category_id = ?";
// 預編譯
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1, category_id);
prep.executeUpdate();
return true;
} catch (SQLException e) {
e.printStackTrace();
return false;
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//獲得一級目錄
@Override
public ArrayList<Category> getFirstCategory() {
System.out.println("獲得一級目錄");
ArrayList<Category> c = new ArrayList<Category>();
Connection conn = DBUtil.getConnection();
// 在數據庫中添加記錄
String sql = "select * from dai_category where parent_id = 0";
// 預編譯
try {
PreparedStatement prep = conn.prepareStatement(sql);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
System.out.println("一級目錄下有"+c.size()+"條數據");
return c;
}
//獲得二級目錄
@Override
public ArrayList<Category> getSecondCategory(int parent_id) {
System.out.println("獲得二級目錄");
ArrayList<Category> c = new ArrayList<Category>();
Connection conn = DBUtil.getConnection();
// 在數據庫中添加記錄
String sql = "select * from dai_category where parent_id = ?";
// 預編譯
try {
PreparedStatement prep = conn.prepareStatement(sql);
prep.setInt(1, parent_id);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
@Override
public ArrayList<Category> getPageCategory(int page, int limit) {
ArrayList<Category> c = new ArrayList<Category>();
ChangePage cp = new ChangePage();
cp.setLimit(limit);
cp.setPage(page);
int startRow = cp.getStartRow();
Connection conn = DBUtil.getConnection();
// 在數據庫中添加記錄
String sql = "select * from dai_category limit "+startRow+","+limit+"";
// 預編譯
try {
PreparedStatement prep = conn.prepareStatement(sql);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
@Override
public int getParentCategory(int category_id) {
Category c = null;
Connection conn = DBUtil.getConnection();
// 在數據庫中修改記錄
String sql = "select * from dai_category where category_id = ?";
// 預編譯
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1,category_id);
ResultSet rst = prep.executeQuery();
c = new Category();
if(rst.next()) {
c.setCategory_id(rst.getInt("category_id"));
c.setCategory_name(rst.getString("category_name"));
c.setParent_id(rst.getInt("parent_id"));
return c.getParent_id();
}
}catch(Exception e) {
e.printStackTrace();
}finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c.getParent_id();
}
}
④ListPageCategory.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
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 dao.CategoryDao;
import dao.CategoryDaoImpl;
import net.sf.json.JSONObject;
import pojo.Category;
import util.JsonUtil;
/**
* Servlet implementation class ListPageCategory
*/
@WebServlet("/listPageCategory")
public class ListPageCategory extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ListPageCategory() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int limit = 0;
int page = 0;
PrintWriter writer = null;
try {
limit = Integer.parseInt(request.getParameter("limit"));
page = Integer.parseInt(request.getParameter("page"));
CategoryDao c = new CategoryDaoImpl();
ArrayList<Category> aList = c.getAllCategory();
ArrayList<Category> aPageList = c.getPageCategory(page, limit);
Map<String, Object> map = new HashMap<String, Object>();
map.put("code", 0);
map.put("msg", "");
map.put("count", aList.size());
map.put("data", aPageList);
// String jsonStr = JsonUtil.beanToString(map);
// writer= response.getWriter();
// writer.write(jsonStr);
writer = response.getWriter();
JSONObject jsonStr = JSONObject.fromObject(map);
writer.print(jsonStr);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
⑤ListCategory.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
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 javax.xml.ws.ResponseWrapper;
import dao.CategoryDao;
import dao.CategoryDaoImpl;
import pojo.Category;
import util.JsonUtil;
/**
* Servlet implementation class ListCategory
*/
@WebServlet("/listCategory")
public class ListCategory extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ListCategory() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//response.setContentType("application/json;charset=utf-8");
PrintWriter writer = null;
try {
CategoryDao c = new CategoryDaoImpl();
ArrayList<Category> aList = c.getAllCategory();
Map<String, Object> map = new HashMap<String, Object>();
map.put("code", 0);
map.put("msg", "");
map.put("count", aList.size());
map.put("data", aList);
String jsonStr = JsonUtil.beanToString(map);
writer= response.getWriter();
writer.write(jsonStr);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
⑥SelectServlet.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
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 dao.CategoryDao;
import dao.CategoryDaoImpl;
import pojo.Category;
import util.JsonUtil;
/**
* Servlet implementation class SelectServlet
*/
@WebServlet("/selectServlet")
public class SelectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public SelectServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
int category_id = Integer.parseInt(request.getParameter("category_id"));
CategoryDao c = new CategoryDaoImpl();
Category c1 = c.getOneCategory(category_id);
if(c1!=null) {
request.setAttribute("category_id", c1.getCategory_id());
request.setAttribute("category_name",c1.getCategory_name());
request.setAttribute("parent_id", c1.getParent_id());
request.getRequestDispatcher("category/editCategory.jsp").forward(request, response);//轉發到成功頁面
}
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
⑦AddServlet.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
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 dao.CategoryDao;
import dao.CategoryDaoImpl;
/**
* Servlet implementation class AddServlet
*/
@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AddServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String result = "false";
PrintWriter writer = null;
try {
int parent_id = Integer.parseInt(request.getParameter("parent_id"));
String category_name = request.getParameter("category_name");
CategoryDao c = new CategoryDaoImpl();
boolean flag = c.insertCategory(parent_id, category_name);
if(flag) {
result="true";
}
writer = response.getWriter();
writer.write(result);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
⑧DelCategory.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
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 dao.CategoryDao;
import dao.CategoryDaoImpl;
/**
* Servlet implementation class DelCategory
*/
@WebServlet("/delCategory")
public class DelCategory extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DelCategory() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String result = "false";
PrintWriter writer = null;
try {
int id = Integer.parseInt(request.getParameter("category_id"));
CategoryDao c = new CategoryDaoImpl();
boolean flag = c.delete(id);
if(flag) {
result="true";
}
writer = response.getWriter();
writer.write(result);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
⑨addCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="../base.jsp"%>
<!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">
<link href="../css/base.css" rel="stylesheet" media="screen" />
<title>增加分類</title>
</head>
<body>
<div id="box">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">父類別名稱:</label>
<div class="layui-input-block">
<select name="city" lay-verify="" id="pid">
<option id="0">請選擇父類別:可不選</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">類別名稱:</label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="title"
autocomplete="off" placeholder="請輸入類別名稱" class="layui-input"
id="category_name" name="category_name">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">立即提交</div>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
layui.use([ 'layer' ], function() {
// 點擊提交執行的內容
$('#sub').click(function() {
//或者取長度
if ($("#category_name").val() == "") {
layer.msg("類別不能輸入爲空哦！", {
icon : 2
});
return;
} else {
var str = $("#pid :selected").attr("id");
$.post("${ctx}/addServlet",//後臺地址
{
parent_id:str,
category_name:$("#category_name").val()
},//需要提交到後臺的數據
function(result) {
//alert(typeof result);
if (result) {
//添加成功
layer.msg("添加成功", {
icon : 1
});
}else{
alert("難道我是大笨蛋？")
}
},//回調函數
"json");
}
//清空表單
$("#category_name").val("");
});
});
</script>
<script type="text/javascript">
function getDataList() {
$.post("${ctx}/listCategory", {}, function(result) {
console.log("result"+result);
with (result) {
console.log("---------");
console.log(result);
console.log(data);
for (var i = 0; i < data.length; i++) {
var option = "<option id="+data[i].category_id+">"
+ data[i].category_name + "</option>";
$("#pid").append(option);
layui.form.render('select');
}
}
}, "json");
$.ajaxSetup({cache:false});
}
layui.use('form', function() {
var form = layui.form;
getDataList();
form.render();
});
</script>
</body>
</html>
⑩editCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file ="../base.jsp" %>
<!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>編輯分類</title>
</head>
<body>
<!-- session由服務器產生，保存在服務器的內存中，sessionid會返回給客戶端 -->
<%
int category_id = (int)request.getAttribute("category_id");
int parent_id = (int)request.getAttribute("parent_id");
String category_name = (String)request.getAttribute("category_name");
%>
<form class="layui-form" action="">
<!-- hidden = "hidden" -->
<input value = "<%=category_id %>" hidden = "hidden" id = "tid">
<div class="layui-form-item">
<label class="layui-form-label">parent_id:</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="title" lay-verify="title"
autocomplete="off" placeholder="請輸入parent_id" class="layui-input"
id="parent_id" name="topicname" value = "<%=parent_id%>">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">類別名稱:</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="title" lay-verify="title"
autocomplete="off" placeholder="請輸入類別名稱" class="layui-input"
id="category_name" name="topicname" value = "<%=category_name%>">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">立即提交</div>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script type="text/javascript">
layui.use([ 'layer' ], function() {
$("#sub").click(function(){
if($("#category_name").val() == ""){
layer.msg("不能輸入爲空哦！", {
icon : 2
});
return;
}else{
$.post("${ctx}/editCategory",//後臺地址
{
parent_id : $("#parent_id").val(),
category_name : $("#category_name").val(),
category_id : $("#tid").val()
},//需要提交到後臺的數據
function(result) {
if (result) {
//修改成功
layer.msg("修改成功", {
icon : 1
});
//假設這是iframe頁
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉
}
},//回調函數
"json");
}
});
});
</script>
</body>
</html>
⑪listCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="../base.jsp"%>
<!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">
<link href="../css/base.css" rel="stylesheet" media="screen" />
<title>分類列表</title>
</head>
<body>
<div id="box">
<table id="demo" lay-filter="test"></table>
</div>
</body>
<script>
layui.use('table', function() {
var table = layui.table;
//開始渲染表格
table.render({
elem : '#demo',//要渲染的表格id
height : 480,//表格的高度
width : 586,
url : '${ctx}/listPageCategory', //數據接口
page : true, //開啓分頁
cols : [ [ //表頭
{
field : 'category_id',
title : 'ID',
width : 100,
sort : true,
fixed : 'left'
},
{
field : 'parent_id',
title : '父類名',
width : 120,
templet:'#manageParentId'
},
{
field : 'category_name',
title : '類名',
width : 180
}, {
title : '操作',
toolbar : '#barDemo',
width : 180
} ] ]
});
//監聽工具條
table.on('tool(test)', function(obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data; //獲得當前行數據
var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
var tr = obj.tr; //獲得當前行 tr 的DOM對象
if (layEvent === 'detail') { //查看
/*
後來可以查看父id的值
*/
layer.msg("你今天真好看！！", {
icon : 1
});
//alert(data.category_id);
//do somehing
} else if (layEvent === 'del') { //刪除
layer.confirm('真的刪除該分類麼？？', function(index) {
obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
layer.close(index);
//向服務端發送刪除指令
$.post("${ctx}/delCategory", {
category_id : data.category_id
}, function(result) {
if (result) {
layer.msg("刪除成功！！", {
icon : 1
});
table.reload('demo');
}
}, "json");
});
layer.close(index);
} else if (layEvent === 'edit') { //編輯
//彈出層
layer.open({
title : ["編輯分類","text-align:center"],
type : 2,
offset : [ "80px" ],//位置
area : [ "500px", "220px" ],//大小
content : ['${ctx}/selectServlet?category_id=' + data.category_id,"no"], //這裏content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
anim:1,
//當窗口關閉時執行
end : function() {
table.reload('demo');
}
});
}
});
});
</script>
<!--工具條模板 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<!-- 處理父類 -->
<script type="text/html" id="manageParentId">
<div>
{{# var fu = function(){
var eType = d.parent_id;
if(eType == 0){return "無";}
else if(eType == 3){return "雜談";}
else if(eType == 4){return "技術筆記";}
else{return "其它";}
}
}}
{{fu()}}
</div>
</script>
</html>
以後重複的知識點我就不贅寫了，這篇博文實在寫太久了。
正好待疫情過去企業的人要來學校授課，我會把這個項目到時候抽空改一下，不用後臺框架感覺在重複造輪子。