fly coding 数据回显,解决框架保存、更新结果回显问题

67 阅读1分钟

此前一直着重于框架功能问题,有一个小功能没有添加,就是当用户保存或更新时,页面关闭并且表格刷新同步刷新问题。

接下来,我将采用此前实现的“前端功能通信”功能实现该功能。

由于该框架支持两种模式(弹窗、标签弹出),所以我在接下来的实现中,将兼容以上两种方式。

一、关闭函数

该关闭为通用函数,我将在基础引擎(BasicEngine.js)中提供对应的关闭功能函数。

/**
 * 关闭引擎功能
 */
engine.closeEngine = function () {
  // 判断是否在弹窗之内
  if (engine.isPopup()) {
    layFactory.closeLayer(engine.getPopupIndex());
  } else {
    engineCommon.closeTab(window.location.href);
  }
};

二、元素事件功能

该框架采用的是按钮绑定元素事件方式,故而我将在元素事件工厂(ElementEventFactory.js)请求操作成功时调用关闭函数。

我可以通过元素事件对象中的(javaScriptCode)属性,进行判断该事件是“更新”或“保存”。因为“保存”和“更新”两种元素事件,我都已经绑定了默认的js执行代码,故而可以通过此种方式判断。

如图所示

eventParams.params = params;
if (isContinue && engineCommon.isEnable(elementEvent.isStartRequestService)) {// 请求服务数据
  this.eventRequest(eventParams, function (data, message, result) {
    // 表单保存、更新方式
    if ("FORM_PAGE_SAVE_CODE_JS" == elementEvent.javaScriptCode || "FORM_PAGE_UPDATE_CODE_JS" == elementEvent.javaScriptCode) {
      engine.closeEngine();
      // 通知表格页面
      EventEmitter.emitFunc(engine.getNotifyKey(FuncShowType.TABLE), PageNotifyUtil.TYPE.REFRESH, data);
    }
  });
} else {
  engine.closeLoading();
  if (this.engine && this.engine.afterElementEvent) {
    this.engine.afterElementEvent(this);
  }
}

三、监听回调功能

此上,已实现了在“保存”、“更新”时进行通知功能,接下来,我只需要实现回调函数,然后调用对应的重载方法即可。

/**
 * 实现回调通知函数
 *
 * @param type
 * @param data
 */
this.onNotifyCallBack = function (type, data) {
  if (PageNotifyUtil.TYPE.REFRESH == type) {
    this.reloadData();
  }
}

四、功能实现效果

  • 标签方式实现效果

  • 弹窗方式实现效果