DataGrid用在實體類和簡寫jsp和h5
阿新 • • 發佈：2019-01-14
一. 實體類的註解
這裡的@DataGridDisplay是自定以的註解，在下面有介紹
這裡的@@ColimnDisplay是自定以的註解，在下面有介紹
二. action 或Controller
返回jsp或h5資料
三.介紹奇特的註解和類
1.DataGridConfig
四. jsp和其他的不同
1. <link rel="stylesheet" type="text/css" href="${styles}/customer4datagrid.css?v=${frameVersion}">
2 <script type="text/javascript" src="${scripts}/dg.js?v=${frameVersion}"></script>
3. <table class="easyui-datagrid" style="width: 98%;height: 405px;" id="displayDataGrid">
</table>
<div id="Pagination" style="margin-top: 10px"></div>
五，程式碼
1實體類
@Entity @Table(name = "mention_delivery_exception_management") @Polymorphism(type = PolymorphismType.EXPLICIT) @DataGridDisplay(checkBox = true, rowNumbers = false) public class MentionDeliveryExceptionManagement extends LongIdBean implements Serializable { private static final String PRE_MSG = "stms.abnormalManager.AgingHelpDetailed."; /** * */ private static final long serialVersionUID = 1L; /** * 主鍵 */ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "ID", unique = true, nullable = false) private Long id; /** * 操作 共三個<a>標籤:跟進/申請/稽核 */ @ColumnDisplay(index = 0, title = PRE_MSG + "operate", width = 0, formatter = "operator") @Transient private String operate; /** * 主提單號 */ @Column(name = "master_airway_bill_no") @ColumnDisplay(index = 1, title = "stms.producerData.amsInventoryData.mainWaybillNo", width = 150) private String masterAirwayBillNo; /** * 狀態,0未處理，1處理中，2 待稽核，3 完結 */ @Column(name = "status") private Integer status; @ColumnDisplay(index = 2, title = "stms.sysManager.accessCode.Status", width = 80) @Transient private String statusName; /** * 異常產生日期 */ @Column(name = "exception_dt") @ColumnDisplay(index = 3, title = "stms.basicDataManger.suspectedSum.stmsInsertTime", width = 150) private Date exceptionDt; /** * 異常分類 (1 提貨、2發貨) */ @Column(name = "business_type") private Integer businessType; @ColumnDisplay(index = 4, title = "stms.mentionDeliveryEx.businessType", width = 80) @Transient private String businessTypeName; /** * 異常原因 */ @Column(name = "exception_cause") @ColumnDisplay(index = 5, title = "stms.mentionDeliveryEx.exceptionCause", width = 100) private String exceptionCause; /** * 異常結果 */ @Column(name = "lead_to_result") @ColumnDisplay(index =6, title = "stms.abnormalManager.abnormalManagementReport.abnormalResult", width = 100) private String leadToResult; /** * 異常記錄號 */ @Column(name = "abnormal_record_number") @ColumnDisplay(index = 7, title = "stms.mentionDeliveryEx.abnormalRecordNumber", width = 150,link = "reportabnormalRecordNumberw") private String abnormalRecordNumber;
2 action 或Controller
private DataGridConfig dataGridConfig;
@Autowired
private IMentionDeliveryExceptionManagemantBiz mdemb;
/**分頁查詢
* @return
*/
@SuppressWarnings("unchecked")
@Action(value = "queryPage", results = { @Result(type = "json", params = {
"includeProperties", "success,rows.*,dataGridConfig.*,total,msg" }) })
@ActionDef(type = ActionType.AUTHORIZED)
public String queryAbnormalManagementReportPage() {
Map<String, Object> data = mdemb.queryMentionDeliveryExceptionMPage(createRequestParams());
rows = (Collection<MentionDeliveryExceptionManagement>) data.get("dataList")==null?new ArrayList<>():(Collection<MentionDeliveryExceptionManagement>) data.get("dataList");
total = data.get("total") == null ? 0 : (int) data.get("total");
IMessageSource iMsg = this.getMessageSource();
dataGridConfig = DataGridUtil.getDataGridConfig(MentionDeliveryExceptionManagement.class, iMsg);
return SUCCESS;
}3，註解
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface DataGridDisplay {
/**
* 是否新增行號
*/
boolean rowNumbers() default true;
/**
* 行寬是否自適應
*/
boolean fitColumns() default false;
/**
* 是否新增複選框
*/
boolean checkBox() default false;
/**
* 是否在行尾新增編輯選項
*/
boolean edit() default false;
String group() default "";
// boolean lazyQuery() default false;@Target({ElementType.METHOD, ElementType.FIELD})
@Retention(RetentionPolicy.RUNTIME)
@Repeatable(ColumnsDisplay.class)
public @interface ColumnDisplay {
/**
* 展示序號,在第一列為0,第二列為1,以此類推
*/
int index();
String field() default "";
/**
* 中英文展示名稱
* 例:目的地國家程式碼
*/
String title();
/**
* 表格寬度
*/
int width() default 150;
/**
* 對齊方式
* left/right/center
*/
String align() default CENTER;
/**
* 是否是連結
*/
String link() default "";
String groupName() default "";
/**
* 自定義formatter方法
*/
String formatter() default "";
/**
* 自定義樣式方法
*/
String styler() default "";
/**
* 居中對齊
*/
String CENTER = "center";
/**
* 左對齊
*/
String LEFT = "left";
/**
* 右對齊
*/
String RIGHT = "right";
public class DataGridConfig {
public DataGridConfig() {
}
/**
* 是否新增行號
*/
private boolean rowNumbers;
/**
* 行寬是否自適應
*/
private boolean fitColumns;
/**
* 是否新增複選框
*/
private boolean checkBox;
/**
* 列
*/
private List<DataGridColumn> dataGridColumns;
/**
* 是否在行尾新增編輯選項
*/
private boolean edit;
private String[] group;
dg.js
/**
* dg.js v1.0
*
* CopyRight sf-express
*
* Designed and build for sf.ibu.stms.core.web datagrid
*/
+function (win, undefined) {
win.DG = {
pageIndex: 1,
pageSize: 10,
//格式化為連結
linkNames: [],
linkCount: 0,
//------------------------------ 初識化表格 ------------------------------
// 展示列表
query: function () {
if (DGConfig.progress || progress) {
$.messager.progress({//顯示查詢進度條
title: $.i18n.get('prompt'),
msg: $.i18n.get("query.tips"),//查詢中,請稍候...
text: ' '
});
}
$.ajax({
url: DGConfig.queryUrl,
data: $.extend({
"page": this.pageIndex,
"limit": this.pageSize,
"start": 0
}, $('#queryForm').serializeJson()),
success: function (data) {
if (data.hidden && data.hidden === '__forbidden:true__') {
$.messager.alert($.i18n.get('error'), data.msg, 'error');
} else {
$('#Pagination').pagination({
pageSize: 10,
pageNumber: 1,
pageList: [10, 15, 25, 50],
total: data.total,
onSelectPage: function (pageNumber, pageSize) {
$(this).pagination('loading');
$(this).pagination('loaded');
//查詢下一頁
DG.initTable(false, pageNumber, pageSize, (pageNumber - 1) * pageSize, DGConfig.progress);
},
onRefresh: function (pageNumber, pageSize) {
$(this).pagination('refresh');
}
});
if (DGConfig.groupName === undefined) {
DG.selected();
}
if (DGConfig.selectorList === undefined) {
DG.loadGroup(data);
}
//datagrid載入資料
DG.loadConfig(data);
DGConfig.data = data;
DG.loadDataGrid(data);
$("body").i18n();
}
if (DGConfig.progress || progress) {
$.messager.progress('close');//關閉查詢進度條
var endTime = new Date();
}
}
});
},
//在分頁欄點選下一頁執行的操作
initTable: function (flag, pageIndex, pageSize, start, progress) {
if (DGConfig.progress || progress) {
$.messager.progress({//顯示查詢進度條
title: $.i18n.get('prompt'),
msg: $.i18n.get("query.tips"),//查詢中,請稍候...
text: ' '
});
}
Ajax({
url: DGConfig.queryUrl,
data: $.extend({"page": pageIndex, "limit": pageSize, "start": start}, $('#queryForm').serializeJson()),
success: function (data) {
if (flag) {
$('#Pagination1').pagination({
pageSize: 10,
pageNumber: 1,
pageList: [10, 15, 20, 25],
total: data.total
});
}
DGConfig.data = data;
DG.loadDataGrid(data);
$("body").i18n();
if (DGConfig.progress || progress) {
$.messager.progress('close');//關閉查詢進度條
}
}
});
},
//載入由後臺註解生成的datagrid配置
loadConfig: function (data) {
var cfg = data.dataGridConfig;
DGConfig.rownumbers = cfg.rowNumbers;
DGConfig.fitColumns = cfg.fitColumns;
DGConfig.frozenColumns = [[]];
DGConfig.columns = [[]];
var group = cfg.group;
//新增checkBox
if (cfg.checkBox === true) {
DGConfig.columns[0].push({field: 'id', checkbox: true});
}
$.each(cfg.dataGridColumns, function (index, column) {
//新增link的方法
if (column.link !== "") {
// DG.linkNames[column.field] = column.link;
DG.linkNames.push(column.link);
column = DG.linkedColumn(column);
}
//新增自定義的formatter方法
if (column.formatter !== "") {
column.formatter = eval(column.formatter);
}
//新增自定義的styler方法
if (column.styler !== "") {
column.styler = eval(column.styler);
}
//分組隱藏
if (group.length !== 0) {
if (column.groupName.indexOf(DGConfig.groupName) < 0 && column.groupName.length !== 0) {
column.hidden = true;
}
}
//如果是自適應則刪除width屬性
if (cfg.fitColumns) {
delete column.width;
}
DGConfig.columns[0].push(column);
});
//新增 編輯按鈕
if (cfg.edit) {
var col = DG.linkedColumn("edit");
DGConfig.columns[0].push(col);
}
},
//載入展示資料
loadDataGrid: function (data) {
if (data === undefined) {
data = DGConfig.data;
}
$('#displayDataGrid').datagrid({
rownumbers: DGConfig.rownumbers,
data: data,
checkOnSelect: false,
frozenColumns: DGConfig.frozenColumns,
columns: DGConfig.columns,
onHeaderContextMenu: function (e, field) {
e.preventDefault();
if (!frozenMenu) {
DG.createColumnMenu();
}
frozenMenu.menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
},
//------------------------------ 選單 ------------------------------
createColumnMenu: function () {
frozenMenu = $('<div/>').appendTo('body');
frozenMenu.menu({
//點選選單中的列的事件 item為選單中的選項物件
onClick: function (item) {
var len = DGConfig.frozenColumns[0].length;
//如果凍結列為空
if (len === 0) {
DG.frozenSelected(item);
}
//如果現在選擇的凍結的列與之前的不一致,則凍結新的列
else if (DGConfig.frozenColumns[0][len - 1].field !== item.name) {
DG.frozenSelected(item);
}
else {
DG.unfrozenSelected();
}
}
});
var fields = $('#displayDataGrid').datagrid('getColumnFields');
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var col = $('#displayDataGrid').datagrid('getColumnOption', field);
if (col.title === undefined || col.title === $.i18n.get('stms.basicDataManger.edit'))
continue;
frozenMenu.menu('appendItem', {
text: col.title,
name: field,
iconCls: 'icon-empty'
});
}
},
//------------------------------ 凍結 ------------------------------
//凍結選擇列的左側
frozenSelected: function (item) {
//先復位
if (DGConfig.frozenColumns !== [[]]) {
DGConfig.columns[0] = DGConfig.frozenColumns[0].concat(DGConfig.columns[0]);
}
DGConfig.frozenColumns = [[]];
//後設置凍結列和非凍結列
var len = DGConfig.columns[0].length;
for (var i = 0; i < len; i++) {
if (DGConfig.columns[0][i].field === item.name) {
DGConfig.frozenColumns[0].push(DGConfig.columns[0][i]);
DGConfig.columns[0].shift();
break;
}
DGConfig.frozenColumns[0].push(DGConfig.columns[0][i]);
DGConfig.columns[0].shift();
i--;
len--;
}
DG.loadDataGrid(DGConfig.data);
},
//解凍
unfrozenSelected: function () {
//復位
if (DGConfig.frozenColumns !== [[]]) {
DGConfig.columns[0] = DGConfig.frozenColumns[0].concat(DGConfig.columns[0]);
}
DGConfig.frozenColumns = [[]];
DG.loadDataGrid(DGConfig.data);
},
//------------------------------ 連結 ------------------------------
linkedColumn: function (column) {
var col;
if (column === 'edit') {
col = {};
col.field = 'edit';
col.title = $.i18n.get('stms.basicDataManger.edit');
col.align = 'center';
col.width = 150;
col.formatter = DG.editFormatter;
} else {
col = column;
col.formatter = DG.rowFormatter;
}
return col;
},
//------------------------------ 格式化 ------------------------------
//轉換為編輯按鈕,注意,編輯的js方法請命名為"toEdit"
editFormatter: function (value, row, index) {
return "<a onclick='toEdit(" + row.id + ")' class='blue'>" + $.i18n.get("edit") + "</a>";
},
//僅將該欄位變為連結,如需繫結方法,則需要重寫
rowFormatter: function (value, row, index) {
if (DG.linkCount > DG.linkNames.length - 1) {
DG.linkCount = 0;
}
var rowJson = JSON.stringify(row).replace(/\s/g, " ");
var groupName = '';
if ($("#groupSelect").length > 0) {
groupName = $('#groupSelect').combo('getValue');
}
var funcName = DG.linkNames[DG.linkCount] + groupName;
DG.linkCount++;
return "<a onclick='DG.toLinked(" + funcName + "," + rowJson + ")' class='blue'>" + value + "</a>";
},
//根據定義的link查詢
toLinked(funName, rowJson) {
var func = eval(funName);
func(rowJson);
},
//------------------------------ 重置 ------------------------------
reset: function () {
$(document.myFrom).form('reset');
},
//------------------------------ 分組列表 ------------------------------
//載入分組列表
loadGroup: function (data) {
var group = data.dataGridConfig.group;
DGConfig.selectorList = [];
if (group !== undefined) {
DGConfig.selectorList = [{value: group[0], text: group[1], "selected": true}];
DGConfig.groupName = group[0];
for (var i = 2; i < group.length; i += 2) {
var selector;
selector = {value: group[i], text: group[i + 1]};
DGConfig.selectorList.push(selector);
}
}
$('#groupSelect').combobox('clear');
$('#groupSelect').combobox('loadData', DGConfig.selectorList);
},
selected: function () {
$("#groupSelect").combo({
onChange: function (newValue, oldValue) {
DGConfig.groupName = newValue;
}
});
}
}
}(window);
//運單號的全域性變數
var correctMailNos = [];
var errorMailNos = [];
//設定載入方法
$(function () {
//運單號輸入框,如果有$('.token-input')則載入,沒有則不載入
var $input = $('.token-input');
if ($input.length > 0) {
$('input[name="mainWaybillNo"]').focus(function () {
$(this).hide();
$('.form-wrap').show();
$('.token-input').focus();
});
//點選收起
$('#packUp').click(function () {
var mainWaybillNoValues = "";
var mainWaybillNos = $(".correctMailNo").get();
for (var i = 0; i < mainWaybillNos.length; i++) {
mainWaybillNoValues += $(mainWaybillNos[i]).find(".token-label").text() + ",";
}
var newlength = mainWaybillNoValues.substring(0, mainWaybillNoValues.length - 1);
$("input[name='mainWaybillNo']").val(newlength);
$('input[name="mainWaybillNo"]').show();
$(".form-wrap").hide();
});
//點選清空
$('#clear').click(function () {
$('#bill-number').find('div,span').remove();
$input.attr('disabled', false);
$input.val("");
$input.focus();
correctMailNos = [];
errorMailNos = [];
$('[data-error="input-method"]').hide();
$('[data-error="limit-exceeded"]').hide();
$('[data-error="bill-number-format"]').hide();
});
//按下鍵盤事件
$input.keydown(function (event) {
var mainWaybillNo = $(this).val().trim();
var key_code = event.keyCode;
if (key_code === 13 || key_code === 32 || key_code === 188) {//回車，空格，逗號
event.preventDefault();
event.stopPropagation();
handleMailNo(mainWaybillNo);
}
if (key_code === 229) {//中文狀態下的輸入法
$('[data-error="input-method"]').show();
} else {
$('[data-error="input-method"]').hide();
}
});
$input.on('blur', function (event) {
var mainWaybillNo = $(this).val().trim();
if (mainWaybillNo !== '' && mainWaybillNo.length > 0) {
event.preventDefault();
event.stopPropagation();
handleMailNo(mainWaybillNo);
}
});
}
//查詢
DG.query();
var $body = $(document.body);
$body.i18n();
$body.auth();
});
//------------------------ 處理運單號 START------------------------
function handleMailNo(mainWaybillNo) {
var $input = $('.token-input');
var format = /^[0-9]{12}$/;
var correctMailNoDiv = $("<div class='correctMailNo' data-value=" + mainWaybillNo + ">" +
"<span class='token-label'>" + mainWaybillNo + "</span>" +
"<a href='javascript:void(0)' class='close'>×</a>" +
"</div>");
var errorMailNoDiv = $("<span class='errorMailNo' data-value=" + mainWaybillNo + ">" +
"<span class='token-label'>" + mainWaybillNo + "</span>" +
"<a href='javascript:void(0)' class='close'>×</a>" +
"</span> ");
$(correctMailNoDiv).find('.close').click(function () {//給正確的div繫結刪除的點選事件
var index = $(this).parent('div').index();
correctMailNos.splice(index, 1);
$(this).parent().remove();
$input.focus();
if (correctMailNoDiv.length < 10) {//正確的單號小於10
$('[data-error="limit-exceeded"]').hide();
$input.attr('disabled', false);
}
});
$(errorMailNoDiv).find('.close').click(function () {//給錯誤的div繫結刪除的點選事件
$('#bill-number').find("div").removeAttr('style');
errorMailNos.shift();
if (errorMailNos.length === 0) {//沒有錯誤運單號了
$('[data-error="bill-number-format"]').hide();
$input.attr('disabled', false);
}
$(this).parent().remove();
$input.focus();
});
var flag = true;
var index;
for (var i = 0; i < correctMailNos.length; i++) {//遍歷是否有重複的運單號
if (correctMailNos[i] === mainWaybillNo) {
flag = false;
index = i;
break;
}
}
if (format.test(mainWaybillNo) && flag === true) {//驗證運單號為12位數字通過，並且沒有重複的運單號
correctMailNos.push(mainWaybillNo);
$input.before(correctMailNoDiv);
} else {
errorMailNos.push(mainWaybillNo);
$input.before(errorMailNoDiv);
$('[data-error="bill-number-format"]').show();
$input.attr('disabled', true);
}
$input.val('').focus();
if (flag === false) {//有重複運單號
$input.attr('disabled', true);
$(".correctMailNo:eq(" + index + ")").css('color', 'red');
}
if (correctMailNos.length === 10) {//正確的運單號超過10個
$('[data-error="limit-exceeded"]').show();
$('.token-input').attr('disabled', true);
}
$('#bill-number').scrollTop($('#bill-number')[0].scrollHeight);//設定滾動條始終在最底部
}
//------------------------ 處理運單號 END------------------------
//------------------------ 新增並跳轉新的tab START------------------------
//重新整理或新增標籤頁 引數依次為:新模組的中文名,國際化,模組圖示(預設:moduleIcon),url,回撥函式名(新增新的tab後的操作函式名)
var mainTabs = parent.$('#mainTab');
window.refreshOrAddTab = function (id, title, icon, url, afterOpenCall) {
if (url === '' || url === undefined) {
return;
}
var selectedTab = mainTabs.tabs('getSelected');
var selectedIndex = mainTabs.tabs('getTabIndex', selectedTab);
var selectedTitle = selectedTab.panel('options').title;
//已有Tab呼叫自身Tab
if (selectedTitle === title) {
addNewTab(id, title, icon, url);
afterCall(id, afterOpenCall);
mainTabs.tabs('close', selectedIndex);
mainTabs.tabs('select', title);
}
//已有Tab呼叫其它Tab
else if (mainTabs.tabs('exists', title)) {
mainTabs.tabs('update', {
tab: mainTabs.tabs('getTab', title),
options: {
content: "<div class='tab_content_div'><iframe id=\"frame_" + id + "\" class='tab_content_iframe' frameborder=\"no\" scrolling=\"auto\"></iframe></div>"
}
});
parent.$("#frame_" + id).attr('src', addVersionToUrl(url));
mainTabs.tabs('select', title);
afterCall(id, afterOpenCall);
// refreshOrAddTab(id, title, icon, url, afterOpenCall);
}
//新增Tab
else {
addNewTab(id, title, icon, url);
afterCall(id, afterOpenCall);
}
};
//開啟新的頁面
function addNewTab(id, title, icon, url) {
mainTabs.tabs('add', {
id: "tab_" + id,
title: title,
iconCls: icon,
content: "<div class='tab_content_div'><iframe id=\"frame_" + id + "\" class='tab_content_iframe' frameborder=\"no\" scrolling=\"auto\"></iframe></div>",
closable: true,
selected: true
});
parent.$("#frame_" + id).attr('src', addVersionToUrl(url));
}
function afterCall(id, afterOpenCall) {
if (afterOpenCall !== undefined) {
if ($.browser.msie) {
var fm1 = window.frames["frame_" + id];
var fmStChange = function () {
state = fm1.document.readyState;
if ("complete" === state) {
afterOpenCall.call();
}
};
parent.window.document.getElementById("frame_" + id).onreadystatechange = fmStChange;
} else {
parent.window.document.getElementById("frame_" + id).onload = function () {
afterOpenCall.call();
}
}
}
}
function isFullUrl(actionUrl) {
return /^(\w+):\/\//.test(actionUrl);
}
//新增版本號到URL
function addVersionToUrl(wrapUrl) {
if (!isFullUrl(wrapUrl)) {
wrapUrl = contextPath + wrapUrl;
}
if (wrapUrl.indexOf('?') !== -1) {
return wrapUrl + "&v=" + parent.window.frameVersion;
} else {
return wrapUrl + "?v=" + parent.window.frameVersion;
}
}
//載入瀏覽器資訊
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
$.browser = {
webkit: /webkit/.test(userAgent),
chrome: /(chrome)\/([\w.]+)/.test(userAgent),
msie: /(msie\s|trident.*rv:)([\w.]+)/.test(userAgent)
};
//------------------------ 新增並跳轉新的tab END------------------------
//使用查詢條件匯出
function openPostWindow(url, dataField, data, name) {
var tempForm = document.createElement("form");
tempForm.id = "tempForm1";
tempForm.method = "post";
tempForm.action = url;
tempForm.target = name;
for (var i = 0; i < dataField.length; i++) {
var hideInput = document.createElement("input");
hideInput.type = "hidden";
hideInput.name = dataField[i];
hideInput.value = data[i];
tempForm.appendChild(hideInput);
}
$(tempForm).bind("onsubmit", function () {
openWindow(name);
});
document.body.appendChild(tempForm);
tempForm.submit();
document.body.removeChild(tempForm);
}
//根據勾選匯出
function downloadExcel(url, rows) {
$.ajax({
url: url,
data: 'rows="' + rows + '"',
type: 'POST',
success: function (data) {
}
});
}
function openWindow() {
window.open('about:blank', '_blank');
}