Apriso Modern UI样式系列之六 Popup组件实现无刷新弹窗

李英杰同学

发布于 2024-04-18 15:58:35

1130

发布于 2024-04-18 15:58:35

文章被收录于专栏：智能制造社区智能制造社区

概述

在Process Builder通过ACTION绑定popup windows可以实现弹窗，但是默认情况Server Mode模式下会刷新整个界面，用户体验不好。

正如系列一中介绍的，ModernUI中包含了一些扩展的Javascript、CSS和Operation实体，其中也包含了一些非常有用的窗体组件。

本文介绍其中一个实现无刷新弹窗的组件的基本用法，该组件包含：

Javascript：ModernUIPopup.js
Operation：

ModernUI_Popup_Execute：用于Ajax方式实现弹窗

ModernUI_PopupForm_Generate：用于生产弹窗HTML

主要功能：

可以进行html、Operation、Action三种类型的弹窗形式
只支持标准Form View弹窗，不支持Grid View的弹窗，但可以将带有Grid View的界面通过发布成Flexpart进行弹窗

基本用法

▶第一步：编写页面、View以及Popup View：

Popup View：

绑定View Operation为：ModernUI_PopupForm_Generate

▶第二步：添加页面Action（只能在Screen中添加Action，或者override Action 一个View Action）：

设置Action样式：为popup，用于JQuery样式选择

▶第三步：在主界面的View Operation中引入Javascript文件：

<script src="[Apriso]/ModernUI/Controls/ModernUIPopup/ModernUIPopup.js"</script>

▶第四步：在主界面的View Operation中设置ScreenInterfae输入参数Screen为:Session Variable和Sytem Variable等于Screen

▶第五步：引入Ajax Operation：

▶第六步：添加html和Javascript：

<script>
    //声明inputs
    var inputs = {};
    inputs.SomeAttribute = ' SomeAttributeVALUE123ABC ';
    inputs.SomeAttribute2 = ' AAAAABBBBBCCCCC ';
    inputs.TestInput1 = 'AAAAA';
    inputs.TestInput2 = 2222;
    //声明回调函数
    function myCallback(outputs, action) {
        console.log(outputs);
        console.log(action);
    }
    $Context.view.onLoaded(function(){
        $('. popup).unbind('click');        $(document).off("click", ".popup");
        //移除Action默认的onclick和autosubmit属性
        var temp = $('.popup').removeAttr('onclick');         var temp = $('.popup').removeAttr('autosubmit');
         //初始化popup
        // popupOperation : 'ModernUI_Popup_Execute',默认的执行Operation
  // context : '',上下文
  // screen : '',screen名称
  // guid : '',GUID
  // log : false,是否输出日志
  // onOpen : null, 指定onOpen事件回调函数
  // onAJAX : null, 指定onAJAX事件回调函数
  // onClose : null, 指定onClose事件回调函数
  // onActionSuccess : null,指定onActionSuccess事件回调函数
  // onError : null指定onError事件回调函数
        var popup = $('body').modernUIPopup({'screen' : '{ScreenID}', 'context' : $Context, 'log' : true, onActionSuccess : function(outputs, action){ myCallback(outputs, action); } });            
        //绑定click事件,可以赋值输入参数Inputs,设置弹出窗体宽度和高度
        //operation : '',指定弹出Operation
  //view : '', 指定弹出view
  //viewAction : '', 指定弹出viewAction
  //action : '', 指定弹出action
  //html: '',指定淡出html
  //title: '',指定弹窗Title
  //inputs : {},指定输入参数
  //inline : {},指定输入内容
  //width : '',弹窗宽度
  //height : '',弹窗高度
        $(document).on('click', '.popup',  function() { popup.open({'action' : 'POPUP', 'inputs': inputs, 'width' : '600px', 'height' : '600px'}); } );
    });
    $Context.view.onUnloading(function(){
    $('.button').unbind('click'); $(document).off("click", ".button");

});

</script>

▶第七步：运行并进行验证