一. 实体类的注解
这里的@DataGridDisplay是自定以的注解,在下面有介绍
这里的@@ColimnDisplay是自定以的注解,在下面有介绍
二. action 或Controller
返回jsp或h5数据
三.介绍奇特的注解和类
1.DataGridConfig
2.@ColumnDisplay注解
3.@DataGridplay注解的
四. 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');
}