Fatal编程技术网
  • sapui5/
  • Sapui5 如何为链接类型QuickViewGroupElement？；添加单击事件；

Sapui5 如何为链接类型QuickViewGroupElement？；添加单击事件；

sapui5

Sapui5 如何为链接类型QuickViewGroupElement？；添加单击事件；,sapui5,popover,Sapui5,Popover,我有一个像这样的QuickView popover： <core:FragmentDefinition id="table_popover"> <QuickView id="popover_quickView"> <QuickViewPage id="popover_quickViewPage"> <QuickViewGroup id="popover_quickViewGroup"> <QuickVi

我有一个像这样的QuickView popover：

<core:FragmentDefinition id="table_popover">
  <QuickView id="popover_quickView">
    <QuickViewPage id="popover_quickViewPage">
      <QuickViewGroup id="popover_quickViewGroup">
        <QuickViewGroupElement
          id="nav_link"
          type="link"
          value="navTo somePage" />
      </QuickViewGroup>
    </QuickViewPage>
  </QuickView>
</core:FragmentDefinition>
但是发现
QuickViewGroupElement
没有扩展
sap.ui.core.Control
，所以不要借用
attachBrowserEvent

所以，我唯一的选择就是在vanilla js中使用
addEventListener
，或者在jQuery中使用
？还有其他的UI5方式吗



如果jQuery变通方法不起作用，UI5和DOM中的
QuickViewGroupElement
id不相同，如下所示：


QuickView
的唯一ID非常奇怪，我在github中为UI5创建了一个问题：

用户界面：


是的，这是一件复杂的事情。这是你可以尝试的

我已将
afterOpen
事件附加到函数
quickViewOpen

然后我查询具有链接类型的页面和组元素。
接下来，我使用jquery查找链接以附加click事件





MVC
sap.ui.define([
“jquery.sap.global”，
“sap/ui/core/mvc/Controller”，
'sap/ui/model/json/JSONModel'
]，函数（jQuery、控制器、JSONModel）{
“严格使用”；
var oController=Controller.extend（“myView.Template”{
openQuickView:函数（oEvent）{
var quickview=this.getView（）.byId（“popover_quickview”）；
openBy（oEvent.getSource（））；
},
quickViewOpen:函数（）{
var fn=this.quickViewLinkClick；//事件句柄
var oQuickView=this.getView（）.byId（“popover_quickView”）；
//获取链接元素，以便我们可以将这些值与链接单击关联
var linkElements=oQuickView.getPages（）[0].getGroups（）[0].getElements（）.filter（函数（e）{
返回e.getType（）=='link'；
});
//使用jquery查找链接并在单击事件时附加
this.getView（）.byId（“popover_quickView”）.$（）.find（“a.sapMLnk”）.each（函数（i，e）{
var elm=连接元素[i]；
$（e）。单击（函数（）{
fn（elm）；
});
});
},
quickViewLinkClick:函数（elm）{
log（elm.getValue（））；
}
});
返回控制器；
});
var oView=sap.ui.xmlview({
viewContent:jQuery（'#oView'）.html（）
});
oView.placeAt（“内容”）；

解决1@IO问题：
使用Popover+表单+链接模拟QuickView

在2@D.Seah附近工作：
UI团队已批准将此作为一个项目



我还发现
QuickViewGroupElement
不支持启用
。所以
Link
是一个更好的选择

在3点左右工作
ResponsivePopover+QuickViewPage+链接


<ResponsivePopover
  showHeader="true"
  title="{entityPopoverModel>/name}"
  class="sapUiPopupWithPadding" initialFocus="pin">
  <content>
    <!-- do not add QuickView container-->
    <QuickViewPage header="{entityPopoverModel>/name}">
      <QuickViewGroup>
        <QuickViewGroupElement
          label="{i18n>ID}"
          value="{entityPopoverModel>/id}" />
        <QuickViewGroupElement
          label="{i18n>DESCRIPTION}"
          value="{= ${entityPopoverModel>/description} ? ${entityPopoverModel>/description} : '-'}" />
      </QuickViewGroup>
    </QuickViewPage>
    <Link text="hazard" press="onPress" enabled="false"/>
  </content>
</ResponsivePopover>







您可以尝试，在那里您可以使用任何控件。我以前使用过
ResponsivePopover
，但UX更喜欢
QuickView
。我也尝试过使用
ResponsivePopover
+
页面
+
SimpleForm
模拟
快速查看
，但
SimpleForm
没有显示在
页面
中，这是另一个问题。如果可能，请分享UIUpdate@Inzio的屏幕截图，并与我分享您试图实现的UI。

var oView = this.getView();
var oLink = oView.byId("nav_link");
var sId = oLink.getId(); // "idFirstPage1--nav_link"

// get nothing
var jQueryLink = $("#" + sId); 
var vanillaLink = document.getElementById("document.getElementById("idFirstPage1--nav_link")")

// returns link element, in real application, generated id might be __linkXXX
var realjQueryLink = $("__link0");
var realvanillaLink = document.getElementById("__link0");



<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m,sap.ui.table"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m" 
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
    <Button text="Click" press="openQuickView"></Button>
    <QuickView id="popover_quickView" afterOpen="quickViewOpen">
      <QuickViewPage id="popover_quickViewPage">
        <QuickViewGroup id="popover_quickViewGroup">
          <QuickViewGroupElement
            id="nav_link"
            type="link"
            value="navTo somePage" />
          <QuickViewGroupElement
            id="nav_link2"
            type="link"
            value="navTo otherPage" />
      </QuickViewGroup>
      </QuickViewPage>
    </QuickView>
  </mvc:View>
    </script>
    <script>
      sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel'
      ], function(jQuery, Controller, JSONModel) {
        "use strict";

        var oController = Controller.extend("myView.Template", {
          openQuickView: function(oEvent) {
            var quickview = this.getView().byId("popover_quickView");
            quickview.openBy(oEvent.getSource());
          },
          quickViewOpen: function() {
            var fn = this.quickViewLinkClick; // event handle
            var oQuickView = this.getView().byId("popover_quickView");

            // get the link elements so that we can associate the values with the link click
            var linkElements = oQuickView.getPages()[0].getGroups()[0].getElements().filter(function(e) {
              return e.getType() === 'link';
            });

            // use jquery to look for the links and attach on click event
            this.getView().byId("popover_quickView").$().find("a.sapMLnk").each(function(i, e) {
              var elm = linkElements[i];
              $(e).click(function() {
                fn(elm);
              });
            });
          },
          quickViewLinkClick: function(elm) {
            console.log(elm.getValue());
          }
        });

        return oController;
      });

      var oView = sap.ui.xmlview({
        viewContent: jQuery('#oView').html()
      });

      oView.placeAt('content');
    </script>
  </head>

  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>



var oQuickView = sap.ui.core.Fragment.byId("AssignedTablePopover", "common_quickView");
// unique id workaround
var oNavLink = jQuery.sap.byId(oQuickView.getId() + "-quickView-popover").find('a')[0];

jQuery.sap.byId(oNavLink.getAttribute('id')).click(function(e) {

});



<ResponsivePopover
  showHeader="true"
  title="{entityPopoverModel>/name}"
  class="sapUiPopupWithPadding" initialFocus="pin">
  <content>
    <!-- do not add QuickView container-->
    <QuickViewPage header="{entityPopoverModel>/name}">
      <QuickViewGroup>
        <QuickViewGroupElement
          label="{i18n>ID}"
          value="{entityPopoverModel>/id}" />
        <QuickViewGroupElement
          label="{i18n>DESCRIPTION}"
          value="{= ${entityPopoverModel>/description} ? ${entityPopoverModel>/description} : '-'}" />
      </QuickViewGroup>
    </QuickViewPage>
    <Link text="hazard" press="onPress" enabled="false"/>
  </content>
</ResponsivePopover>