Struts2+DataTables外掛整合,封裝互動Json資料
1.開發環境
1.1 Struts2框架相關jar包
1.2 json-lib-2.2.3-jdk15.jar
1.3 jquery.dataTables.min.js版本為1.10.8和jQuery相關js
2.編寫目的
將DataTables外掛與Struts2互動變得更簡單易用,程式碼整潔化!
3.核心程式碼
3.1 前端封裝DataTables外掛的相關js程式碼
datatables-pack.js
/** *處理DataTable的資料 *公共部分 */ var DataTablePack = function(){ //漢化分頁條 var language = { paginate:{ first:'首頁', last:'末頁', previous:'上一頁', next:'下一頁' }, lengthMenu:'顯示 _MENU_ 條', zeroRecords:'沒有檢索到有效資料!', info:'顯示 _START_ 到 _END_ 條記錄', infoEmpty:'沒有檢索到有效資料!', search:'查詢:', processing:'正在載入資料,請稍候...', infoFiltered:'共計 _TOTAL_ 條記錄' } /* 全選以及選中效果功能 */ function checkAll(table){ //全選功能 table.find('.checkall').change(function () { var allCheck = table.find('tbody input[type=checkbox]'); if(jQuery(this).is(":checked")){ allCheck.each(function(){ jQuery(this).attr('checked',true); jQuery(this).parent().addClass('checked'); //used for the custom checkbox style }); }else{ allCheck.each(function(){ jQuery(this).attr('checked',false); jQuery(this).parent().removeClass('checked'); //used for the custom checkbox style }); } }); //選中效果 table.on('change', 'tbody tr .check', function () { $(this).parents('tr').toggleClass("active"); if(jQuery(this).is(":checked")){ jQuery(this).attr('checked',true); jQuery(this).parent().addClass('checked'); }else{ jQuery(this).attr('checked',false); jQuery(this).parent().removeClass('checked'); } }); // table.parent().parent().find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown } /** 公開呼叫方法 **/ var DataTablePublic = { /* 處理處理靜態資料 */ baseTable:function(table){ var oTable = table.dataTable({ 'language':language,//漢化工具條 'lengthMenu':[10,20,30,50,100],//顯示每頁大小的下拉框中的選項 'dom': "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'f><'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable 'pagingType':'full_numbers',//分頁樣式 'columnDefs':[{ 'targets':[0,1], 'orderable':false }],//預設列引數 "order":[ [2, "asc"] ] //預設排序的列 }); checkAll(table);//全選功能 return oTable; }, /* 即時後臺獲取資料*/ serverTable:function(table,url,reqData,columns,startNum){ //alert(url); var oTable = table.dataTable({ 'ajax':{ dataType:'json', /////contentType:'application/json', type:'post',//更改Ajax的請求方式 url:url,//從一個ajax資料來源讀取資料給表格內容 data:function(aoData){ reqData['dtJson'] = JSON.stringify(aoData); return reqData; }, //data:'{"username":"admin","userpwd":"123456"}', error:function (resp){ alert(JSON.stringify(resp)); }//新增額外的引數傳送到伺服器 }, 'serverSide':true,//是否開啟伺服器模式 'stateSave':true,//儲存狀態 - 在頁面重新載入的時候恢復狀態(頁碼等內容) 'processing':true,//當表格處在處理過程(例如排序)中時,啟用或者禁止 'processing'指示器的顯示。 'displayStart':startNum,//初始化顯示的時候從第幾條資料開始顯示(一開始顯示第幾頁) 'columns':columns, 'language':language,//漢化工具條 'lengthMenu':[10,20,30,50,100],//顯示每頁大小的下拉框中的選項 'dom': "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'f><'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable 'sPaginationType':'full_numbers',//分頁顯示所有按鈕 'columnDefs':[{ 'targets':[0,1], 'orderable':false }],//預設列引數 "order":[ [2, "asc"] ] //預設排序的列 }); checkAll(table);//全選功能 return oTable; } }; return DataTablePublic; }();
3.2 頁面使用DataTables外掛,先引入3.1的js檔案
jQuery(document).ready(function(){ var table = jQuery('#protable'); var columns = [ { 'data':null, 'render':function(data,type,full){ var content = '<div class="checker"><span>'; content += '<input class="check" type="checkbox" value="'+data.id+'">'; content += '</span></div>'; return content; } }, {'data':'name'}, {'data':'url'}, {'data':'descmark'}, {'data':'logopath'}, {'data':'role_type'}, { 'data':null, 'render':function(data,type,full){ var content = '<a href="javascript:;" class="btn default btn-xs purple">'; content += '<i class="fa fa-edit"></i> Edit </a>'; return content; } } ]; var reqData = {"menu.name":"admin","menu.url":"123456"}; DataTablePack.serverTable(table,'manage/menuajaxShow.action',reqData,columns,1); });
3.3 後端封裝DataTables外掛引數實體
3.3.1 DataTables.java
package llcrm.base.action.datatables; import java.util.ArrayList; import java.util.List; /** * <p>Class:DataTables</p> * <p>Description: DataTables外掛引數物件</p> * @author XQL * @Date 2015年9月9日 下午5:40:33 */ public class DataTables { //請求傳遞引數 private int draw = 0; private List<Columns> columns = new ArrayList<Columns>(); private List<Order> order = new ArrayList<Order>(); private int start; private int length; private Search search = new Search(); //相應傳遞引數 private Object data; private int recordsTotal = 0; private int recordsFiltered = 0; public int getDraw() { return draw; } public void setDraw(int draw) { this.draw = draw; } public List<Columns> getColumns() { return columns; } public void setColumns(List<Columns> columns) { this.columns = columns; } public List<Order> getOrder() { return order; } public void setOrder(List<Order> order) { this.order = order; } public int getStart() { return start; } public void setStart(int start) { this.start = start; } public int getLength() { return length; } public void setLength(int length) { this.length = length; } public Search getSearch() { return search; } public void setSearch(Search search) { this.search = search; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } public int getRecordsTotal() { return recordsTotal; } public void setRecordsTotal(int recordsTotal) { this.recordsTotal = recordsTotal; } public int getRecordsFiltered() { return recordsFiltered; } public void setRecordsFiltered(int recordsFiltered) { this.recordsFiltered = recordsFiltered; } @Override public String toString() { return "DataTables [draw=" + draw + ", columns=" + columns.get(0).toString() + ", order=" + order.get(0).toString() + ", start=" + start + ", length=" + length + ", search=" + search + ", data=" + data + ", recordsTotal=" + recordsTotal + ", recordsFiltered=" + recordsFiltered + "]"; } }
3.3.2 Columns.java
package llcrm.base.action.datatables;
/**
* <p>Class:Columns</p>
* <p>Description: 包裝DataTables欄位資訊</p>
* @author XQL
* @Date 2015年9月9日 下午6:10:23
*/
public class Columns {
private String data;
private String name;
private boolean searchable;
private boolean orderable;
private Search search;
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isSearchable() {
return searchable;
}
public void setSearchable(boolean searchable) {
this.searchable = searchable;
}
public boolean isOrderable() {
return orderable;
}
public void setOrderable(boolean orderable) {
this.orderable = orderable;
}
public Search getSearch() {
return search;
}
public void setSearch(Search search) {
this.search = search;
}
@Override
public String toString() {
return "Columns [data=" + data + ", name=" + name + ", searchable=" + searchable + ", orderable=" + orderable
+ ", search=" + search.toString() + "]";
}
}
3.3.3 Order.java
package llcrm.base.action.datatables;
/**
* <p>Class:Order</p>
* <p>Description: 包裝DataTables排序資訊</p>
* @author XQL
* @Date 2015年9月9日 下午6:11:17
*/
public class Order {
private int column;
private String dir;
public int getColumn() {
return column;
}
public void setColumn(int column) {
this.column = column;
}
public String getDir() {
return dir;
}
public void setDir(String dir) {
this.dir = dir;
}
@Override
public String toString() {
return "Order [column=" + column + ", dir=" + dir + "]";
}
}
3.3.4 Search.java
package llcrm.base.action.datatables;
/**
* <p>Class:Search</p>
* <p>Description: 包裝DataTables查詢資訊</p>
* @author XQL
* @Date 2015年9月9日 下午6:11:54
*/
public class Search {
private String value;
private boolean regex;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public boolean isRegex() {
return regex;
}
public void setRegex(boolean regex) {
this.regex = regex;
}
@Override
public String toString() {
return "Search [value=" + value + ", regex=" + regex + "]";
}
}
3.4 將前端傳遞的Json字串[包含了DataTables外掛的引數和自定義引數]封裝成DataTables物件
注意:這裡利用了struts2的自定義型別轉換器
DataTablesConvert.java
package llcrm.base.action.convert;
import java.util.HashMap;
import java.util.Map;
import com.opensymphony.xwork2.conversion.impl.DefaultTypeConverter;
import llcrm.base.action.datatables.Columns;
import llcrm.base.action.datatables.DataTables;
import llcrm.base.action.datatables.Order;
import net.sf.json.JSONObject;
/**
* <p>Class:DataTablesConvert</p>
* <p>Description: 將前端的DataTables外掛轉為Datatables物件</p>
* @author XQL
* @Date 2015年9月9日 下午5:39:39
*/
public class DataTablesConvert extends DefaultTypeConverter{
@Override
@SuppressWarnings("rawtypes")
public Object convertValue(Map context, Object value, Class toType){
String json = ((String[])value).length > 0 ? json = ((String[])value)[0] : "";
System.out.println("|-00-|"+json);
DataTables dt = null;
if(toType == DataTables.class){
JSONObject jsonobj = JSONObject.fromObject(json);
Map<String, Class> clsMap = new HashMap<String, Class>();
clsMap.put("columns", Columns.class);
clsMap.put("order", Order.class);
dt = (DataTables)JSONObject.toBean(jsonobj,DataTables.class,clsMap);
System.out.println("|-01-|"+dt.toString());
}
return dt;
}
}
3.5 配置檔案以及後端呼叫DataTables的引數,以及各種應用
BaseAction-conversion.properties
dtJson = llcrm.base.action.convert.DataTablesConvert
BaseAction.java
package llcrm.base.action;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.apache.struts2.util.ServletContextAware;
import com.opensymphony.xwork2.ActionSupport;
import llcrm.base.action.datatables.DataTables;
public class BaseAction extends ActionSupport implements ServletRequestAware,ServletResponseAware, ServletContextAware{
private static final long serialVersionUID = -7588102526595752037L;
public HttpServletRequest request;
public HttpServletResponse response;
public ServletContext context;
private DataTables dtJson;
public DataTables getDtJson() {
return dtJson;
}
public void setDtJson(DataTables dtJson) {
this.dtJson = dtJson;
}
public void setServletRequest(HttpServletRequest request) {
this.request = request;
}
public void setServletResponse(HttpServletResponse response) {
this.response = response;
}
public void setServletContext(ServletContext context) {
this.context = context;
}
}
AdminMenuAction.java
package llcrm.admin.action;
import java.util.ArrayList;
import java.util.List;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import llcrm.base.action.BaseAction;
import llcrm.base.action.datatables.Columns;
import llcrm.base.action.datatables.Order;
import llcrm.entity.Lc_AdminMenu;
import llcrm.service.Lc_AdminMenuService;
@Controller("adminMenuAction")
@Scope("prototype")
public class AdminMenuAction extends BaseAction {
private static final long serialVersionUID = 1L;
private Lc_AdminMenuService lc_AdminMenuService;
public Lc_AdminMenu menu;
public String gotoPage(){
return "page";
}
public String ajaxShow(){
System.out.println(menu.getName()+"|||"+menu.getUrl());
System.out.println("查詢:");
System.out.println("檢索條件:"+super.getDtJson().getSearch().getValue());
System.out.println("檢索條件是否匹配正則表示式:"+super.getDtJson().getSearch().isRegex());
System.out.println("排序:");
for(Order ord : super.getDtJson().getOrder()){
List<Columns> cols = super.getDtJson().getColumns();
System.out.println("排序欄位:"+cols.get(ord.getColumn()).getData());
System.out.println("排序方式:"+ord.getDir());
}
List<Lc_AdminMenu> list = new ArrayList<Lc_AdminMenu>();
for(int i=0;i<10;i++){
Lc_AdminMenu lc_menu = new Lc_AdminMenu();
lc_menu.setDescmark("descmark"+i);
lc_menu.setId(i);
lc_menu.setLogopath("logopath"+i);
lc_menu.setName("name"+i);
lc_menu.setParent(null);
lc_menu.setRole_type(i);
lc_menu.setUrl("url"+i);
list.add(lc_menu);
}
super.getDtJson().setData(list);
super.getDtJson().setRecordsFiltered(20);
super.getDtJson().setRecordsTotal(100);
return "json";
}
public Lc_AdminMenu getMenu() {
return menu;
}
public void setMenu(Lc_AdminMenu menu) {
this.menu = menu;
}
}
注意事項:BaseAction的屬性dtJson物件的名稱和datatables-pack.js裡的dtJson的名稱一致.
相關推薦
Struts2+DataTables外掛整合,封裝互動Json資料
1.開發環境 1.1 Struts2框架相關jar包 1.2 json-lib-2.2.3-jdk15.jar 1.3 jquery.dataTables.min.js版本為1.10.8和jQuery相關js 2.編寫目的 將DataTables外掛與Struts2互
idea ssm專案出現日誌中文亂碼,封裝的json中的msg欄位中文亂碼(但是json封裝的bean中的欄位不亂碼)等其他各種專案下的中文亂碼解決方案
開頭劃重點!(敲黑板):rebuild和mvn package的迴圈往復好幾次的操作是解決這個問題的最主要的方法! 經過多次試驗,發現這樣做就可以正常顯示中文了 我說為什麼有時候亂碼,有時候中文正常,原來下面的這些地方都必須設定好,特別是 rebuild和m
idea ssm項目出現日誌中文亂碼,封裝的json中的msg字段中文亂碼(但是json封裝的bean中的字段不亂碼)等其他各種項目下的中文亂碼解決方案
exp model static supported 文件的 support ppi enc pat 開頭劃重點!(敲黑板):rebuild和mvn package的循環往復好幾次的操作是解決這個問題的最主要的方法! 經過多次試驗,發現這樣做就可以正常顯示中文了
struts2和spring整合,基於註解的方法
直接碼程式碼專案目錄1.匯入struts和spring各自需要的jar包, 再匯入兩者整合需要的jar包2.UserDao.javapackage com.ssh.dao; import org.springframework.stereotype.Repository;
jQuery.Post到Struts2的action處理,並返回json物件到前端
之前雖然一直在用jQuery.post函式,將前端頁面的請求傳送到struts中的action處理,但是用的是公司寫好的一套東西,基本都是複製貼上,反而對基本的post功能沒有深入瞭解。下面簡單配置說明action中接收處理post的請求。 用的是struts2,web.
將mysql的datetime型別資料,封裝成json時遇到的問題
1.首先,直接使用jdbc將資料取資料,注意使用getTimestamp,而不是getTime方法 //在資料庫中的時間型別時datetime,在此處要通過getTimeStamp將值取出來 vo.setDepCreateTime(rs.getTimestamp(8));
python爬取ajax請求,返回的json資料格式化報錯json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)
python爬取ajax請求,返回Json資料中帶有<html><head></head><body><prestyle="word-wrap: break-word; white-space: pre-wrap;"></pre>
PHP對接APP的介面類,可返回json資料,xml資料
<?php /* * APP資料處理類 * 作 者:永樂開發 * 日 期:2017.7.31 * 郵 箱:[email protected] * 博 客:http://www.isu5.cn http://it.alipea.com */ class R
Jackson 2.9.8 釋出,Java 處理 JSON 資料類庫
Jackson 2.9.8 已釋出,更新內容如下: core Streaming #488: Fail earlier on coercions from "too big" BigInteger into fixed-size types (in
解決WebApi,Mvc返回json資料遇見日期帶T
我們用webapi自帶的json序列化時,遇見資料庫datetime型別的日期中間會多加一個T,就像2017-09-09 22:11:26.267,而經過自帶的json處理後會變成2017-09-09T22:11:26.267。 解決辦法: 我們可以看到自帶的json有三
okhttp傳送post請求攜帶json資料,並接收json資料
okhttp工具類: package tools; import com.squareup.okhttp.*; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; /
java,返回的json資料中Date型別格式的轉換
轉載自:http://blessht.iteye.com/blog/2018901 返回json資料時,資料庫中的Date型別是這種格式:"planTime":{"date":22,"day":6,"hours":0,"minutes":0,"month":3,"sec
將資料封裝為Json資料示例
1. List集合轉換成json程式碼 List list = new ArrayList(); list.add( "first" ); list.add( "second" ); JSONArray jsonArray2 = JSONArray.fro
vue-cli專案中用json-sever搭建mock伺服器,模擬本地json資料
在使用vue-cli開發專案時,無論後臺介面是否開發完成,我們都可以自己使用本地json資料用於模擬,但這些json資料要作為介面開發,json server 作為模擬工具就提供了這樣的功能,並且使用十分方便。 前提:已經使用vue-cli搭建好了專案 1、全域性安裝json-s
關於jmeter關聯資料,以及遇到json資料時的處理
說到jmeter關聯資料,偶爾提一句loadrunner的關聯: loadrunner的關聯是放在其執行步驟的前面,那是因為loadrunner之中的關聯屬於函式需要被申明;而jmeter的關
struts2跟easyui 示例一 後臺生成json資料傳到前臺html頁面
目標:使用struts2和easyui實現後臺生成json資料,前臺html中table展示資料 步驟:1、建立struts2 2、新增json 相關包 3、新增easyui 1、*建立web專案struts2easyui;
為什麼很多第三方介面,都改成了基於http,直接傳遞json資料的方式來代替webservice?
問題: 曾經不同系統間互動問題時,總是優先考慮webserivce,現在看到除了一些老牌的公司,比如 amazonk 對眾的介面還是webservice的方 式,其他很多國內新專案的介面都開始轉向直接傳 JSON 的方式。我知道的優勢之一,就是webservice的訊息體
將資料封裝為Json資料格式
1. List集合轉換成json程式碼 List list = new ArrayList(); list.add( "first" ); list.add( "second" ); JSONArra
用jquery +ajax 實現與php後臺互動json資料
因為做了前段用jquery和ajax傳送post或get請求到後端伺服器,伺服器我是用nginx ,你也可以用apache, 後端技術使用php,例子很簡單,主要是理解了,擴充套件到複雜就沒有什麼問題。 程式碼給出,希望對大家有用: 這個是端html,你需要下載jquer
FireFox外掛RESTClient POST請求帶json資料
火狐外掛RestClient用於傳送Http請求還是很方便。 如何發Json資料 1、設定header 選擇costom-header後設置Json資料格式 Content-type:application/json 設定成功後 設