FineUI 页面弹窗

Posted 2021-03-15 alex-mercer

FineUI页面弹出功能

需求分析

• 页面增加一个触发器
• 触发器触发弹框，弹框引用其他页面
• 返回值填写在触发器里面

1.页面增加一个触发器

    F.RenderField().HeaderText("主字段").DataField("标识字段").Width(100)
                                                        .Editor( F.TriggerBox().ID("触发器").TriggerIcon(TriggerIcon.Search).Listener("triggerclick", "JS函数").LabelWidth(65).Width(180))

2.触发器触发弹框，弹框引用其他页面

• section body 增加一个隐藏的页面弹框

    //section body 增加一个隐藏的页面弹框，
    @(F.Window().Hidden(true).Height(550).Width(850).IsModal(true).Target(Target.Top).EnableResize(true).EnableMaximize(true).EnableIFrame(true).Title("详细信息").ID("Window1"))

• JS 增加一个触发器单击的客户端事件

    function JS函数(event) {
        var iframeWindowUrl = '@Url.Content("~/跳转URl地址")';
        F.ui.Window1.show(iframeWindowUrl+"?id=root", '部门选择 ', 500, 500);//?中可在URL传值，并且在弹出页面获取到该值。 后面依次是  页面标题，宽度，高度
    }

3.返回值填写在触发器里面

• 弹出页面的JS事件

//本案例弹出页面是树状图，需要注册单击事件 Listener("nodedblclick", "onTree1NodeClick")
 function onTree1NodeClick(event, nodeId) {
             var tree = this; 
            var nodeData = tree.getNodeData(nodeId); 
              var activeWindow = F.getActiveWindow(); //获取激活页面
            activeWindow.hide();
            //var queryId = F.queryString('id');  选取URL的参数值
             activeWindow.window.调用父页面返回JS(nodeData);
        }

• 父页面接受返回值并且赋值

 function 调用父页面返回JS(nodeData) {
            F.ui.root.setText(nodeData.id);
        }