接上一篇springboot整合mybatis
Ace Admin資源地址
簡單說就是一個bootstrap的后臺管理系統模板，也整合了很多其他的插件如jqgrid
資源下載后，將靜態資源粘貼到resources的static目錄，將html粘貼到templates目錄

框架搭建完畢，開始擼代碼
這里主要介紹一下jqgrid，因為后臺管理系統一個很重要的功能就是表格展示，而jqgrid功能非常強大

先看一下頁面jqgrid.html，頁面比較大，我們需要把靜態內容換成從java后臺獲取的動態內容。我們主要用到一小部分功能，詳細的jqgridApi。
原諒我的馬賽克。。

1、請求參數
- url：是后臺的請求地址
- postData：額外的請求參數
- datatype：數據格式
分頁的參數信息是默認的，我封裝到了PageVo 中，每次查詢會默認攜帶的參數

package com.hueason.pojo;/*** Created by Administrator on 2017/7/18.*/ public class PageVo {private String page;//需要查詢第幾頁的數據private String rows;//每頁顯示的記錄條數private String sidx;//查詢排序的條件，數據庫字段明或者POJO屬性private String sord;//查詢排序的方式 asc，desc // private String _search; //是否是查詢public String getPage() {return page;}public void setPage(String page) {this.page = page;}public String getRows() {return rows;}public void setRows(String rows) {this.rows = rows;}public String getSidx() {return sidx;}public void setSidx(String sidx) {this.sidx = sidx;}public String getSord() {return sord;}public void setSord(String sord) {this.sord = sord;}@Overridepublic String toString() {return "PageVo{" +"page='" + page + '\'' +", rows='" + rows + '\'' +", sidx='" + sidx + '\'' +", sord='" + sord + '\'' +'}';} }

這里的_search字段，我沒有用。這個字段默認是false，在使用過濾查詢時，就會變成true，同時會將過濾條件傳到后臺。我沒有寫這么復雜。。
其他四個字段就是分頁的和排序的參數，其中sord字段每次點擊表格上方字段名就會變化，從而實現升降序切換

2、返回數據字段也是固定的，jqgrid會根據獲取到的數據進行解析
我封裝了ResultVo

package com.hueason.pojo;/*** Created by Administrator on 2017/7/18.*/ public class ResultVo {private String total;//總頁數private String page;//當前頁private String records;//總記錄數private Object rows;//記錄public String getTotal() {return total;}public void setTotal(String total) {this.total = total;}public String getPage() {return page;}public void setPage(String page) {this.page = page;}public String getRecords() {return records;}public void setRecords(String records) {this.records = records;}public Object getRows() {return rows;}public void setRows(Object rows) {this.rows = rows;} }

2、Controller中需要寫兩個方法，一個跳轉到jqgrid頁面，另一個是頁面加載事件中的jqgrid加載方法

import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;/*** 管理中心* Created by Administrator on 2017/7/6.*/ @Controller @RequestMapping("/management") public class managementController {@Autowiredprivate CompanyService companyService;@RequestMapping("/getCompany")public String getCompany(){return "jqgrid";}@RequestMapping("/companyInfo")@ResponseBodypublic ResultVo companyInfo(String name,String type,PageVo vo){return companyService.queryCompanyData(name, type, vo);} }

3、service和dao的就不寫了，大家自己完成吧

最后在介紹一個插件，autocomplete，用于自動補全功能的，特別好用
首先頁面引入js

<script src="/assets/js/jquery-ui-1.10.3.full.min.js"></script>

和css<link rel="stylesheet" href="/assets/css/jquery-ui-1.10.3.full.min.css" />

$(function(){$( "#companyName" ).autocomplete({source: "/management/queryCompanyName"});}) //模糊查詢公司名稱@RequestMapping("/queryCompanyName")@ResponseBodypublic List<String> queryCompanyNameByCondition(String term){return companyService.queryCompanyNameByCondition(term);}

1、頁面加載事件中，獲取需要的input調用autocomplete，source：就是后臺的調用方法
2、返回list或者數組類型的json
3、需要注意的是，傳給后臺的參數是固定的 “term” ，然后根據term模糊查詢就可以了
就是這么簡單好用。。。

總結

以上是生活随笔為你收集整理的springboot整合aceadmin的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。