简体   繁体   English

控制器表中的 sapui5 JS 未绑定

[英]sapui5 JS in controller table is not binding

Im trying to create search help using Odata service but my table is showing as undefined in controller, here is my code plz help我正在尝试使用 Odata 服务创建搜索帮助,但我的表在控制器中显示为未定义,这是我的代码请帮助

index.html索引.html

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">

    <title>search_help</title>
    <script id="sap-ui-bootstrap"
        src="../../resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.ui.ux3"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{"search_help": ""}'>
    </script>


    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script>
        sap.ui.getCore().attachInit(function() {
            new sap.m.Shell({
                app: new sap.ui.core.ComponentContainer({
                    height : "100%",
                    name : "search_help"
                })
            }).placeAt("content");
        });
    </script>

</head>
<body class="sapUiBody" id="content">
</body>

view1.view.js视图1.view.js

sap.ui.jsview("search_help.view.View1", {
    getControllerName: function() {
    return "search_help.controller.View1";
},

createContent : function(oController) {
  var oPanel = new sap.ui.commons.Panel({
          text : "Select Order ID"
  });
  var oLayoutMatrix = new sap.ui.commons.layout.MatrixLayout({
                      width : "60%",                         
                      widths : [ "30%", "40%", "30%" ]  
  });
  var oOrderLabel = new sap.ui.commons.Label("idOrderLabel",
          {text: "Order ID"});
  // Input Field for Material Number with Value Help
  var oOrderInput = new sap.ui.commons.ValueHelpField("idOrderInput", {
        valueHelpRequest: function(oEvent){
            var oValueHelpDialog = new sap.ui.ux3.ToolPopup({
                    modal: true,
                    inverted: false,                          
                    title: "Select Order Number",
                    opener:  "idOrderInput",            
                    closed: function (oEvent){
                }
      });
      var oOkButton = new sap.ui.commons.Button({
                    text: "OK",
                    press: function (oEvent) {
                               oEvent.getSource().getParent().close();
                    }
        });
  var oHelpTable = new sap.ui.table.Table("pTab1",{
    selectionMode: sap.ui.table.SelectionMode.Single,
    visibleRowCount: 7,
    width: "300pt"
  });
   oHelpTable.addColumn(
    new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Maintenance Plane"}),
            template: new sap.ui.commons.TextField().bindProperty("value",    "Planplant"),
            sortProperty: "Planplant",
            filterProperty: "Planplant"
    })
  );
      oHelpTable.addColumn(
    new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "Order Number"}),
            template: new sap.ui.commons.TextField().bindProperty("value", "Orderid"),
            sortProperty: "Orderid",
            filterProperty: "Orderid"
    })
  );
  oHelpTable.addColumn(
    new sap.ui.table.Column({
            label: new sap.ui.commons.Label({text: "OrderType"}),
            template: new sap.ui.commons.TextField().bindProperty("value", "OrderType"),
            sortProperty: "OrderType",
            filterProperty: "OrderType"
    })
  );


          oValueHelpDialog.addContent(oHelpTable);
          oValueHelpDialog.addButton(oOkButton);
          oValueHelpDialog.open();

        }          
      });

  oLayoutMatrix.createRow(oOrderLabel, oOrderInput);
  oPanel.addContent(oLayoutMatrix);
  return oPanel;
  }
});

view1.controller.js here otable is showing as undefined view1.controller.js 此处 otable 显示为未定义

sap.ui.define([
"sap/ui/core/mvc/Controller"], function(Controller) {
"use strict";

return Controller.extend("search_help.controller.View1", {
    onInit: function() 

    {
        var oModel = new sap.ui.model.odata.ODataModel("/Gateway_Order/sap/opu/odata/SAP/ZP01_FIORI_SRV_01/");
        var oTable = this.byId("pTab1");
        oTable.setModel(oModel);
        oTable.bindRows("/OrderDataSet");
    }

});
});

Your problem is how you are fetching the Id of your table.您的问题是如何获取表的 ID。

Solution to your problem is :您的问题的解决方案是:

var oTable = sap.ui.getCore().byId("pTab1");

However, let us understand the Id creation and fetching.但是,让我们了解Id的创建和获取。

  1. In JS Views , there are two ways to create Ids.在 JS Views 中,有两种创建 Id 的方法。

    Way 1: : Provide direct Id.方式1::提供直接ID。 Eg:例如:

    var oText = new sap.m.Text('idText'{ text:'Hey!'}); var oText = new sap.m.Text('idText'{ text:'嘿!'});

Now, this id -'idText' is associated with your entire application.现在,这个 id -'idText' 与您的整个应用程序相关联。 So, if you have another view, which has a control with same id, you will see duplicate id error in console.因此,如果您有另一个具有相同 ID 控件的视图,您将在控制台中看到重复 ID 错误。

To fetch controls with ids creating with Way1, use the below method:要获取使用 Way1 创建的 id 控件,请使用以下方法:

var oControl = sap.ui.getCore().byId('idText'); // since this is unique everywhere in your application.

Now, let us think 2 or more developers are working in an application and they are creating different views for the application.现在,让我们想想 2 个或更多的开发人员在一个应用程序中工作,他们正在为应用程序创建不同的视图。 They may ( with high possibility), create controls with same id.他们可能(很有可能)创建具有相同 ID 的控件。 The application will crash when we integrate both views due to duplicate id error.由于重复的 id 错误,当我们集成两个视图时,应用程序将崩溃。 How to solve this?如何解决这个问题?

Way 2 : We can use the method createId() of the controller to create a Id for prefixed with view's id.方式二:我们可以使用控制器的createId()方法来创建一个以视图id为前缀的Id。 So, this way even if two developers are using the same id, they will end up with different id for controls due to different view Id.因此,这样即使两个开发人员使用相同的 id,由于不同的视图 ID,他们最终会得到不同的控件 id。 So, let us think we have two views, View1 ( id: view1) and view2 ( id:view2).所以,让我们认为我们有两个视图,View1(id:view1)和view2(id:view2)。

If I create a control with same Id in both the controls (using createId() method of controller), two unique id will be generated and duplicate id error will never be raise.如果我在两个控件中创建一个具有相同 Id 的控件(使用控制器的 createId() 方法),将生成两个唯一 id 并且永远不会引发重复 id 错误。

So, View 1( id: view1):因此,视图 1(id:view1):

var oText = new sap.m.Text(oController.createId('idText'),{ text:'Hey!'});

Id of oText in view 1 : view1--idText视图 1 中 oText 的 ID:view1--idText

Similarly,相似地,

View 2( id: view2):视图 2(ID:view2):

var oText = new sap.m.Text(oController.createId('idText'),{ text:'Hey!'});

Id of oText in view 2 : view2--idText视图 2 中 oText 的 ID:view2--idText

Nicely done.做得很好。 But what if Id of view is auto generated and I might not know what is my view Id?但是,如果视图 ID 是自动生成的,而我可能不知道我的视图 ID 是什么? Good question.好问题。

Solution is the method : this.byId() .解决方案是方法: this.byId() In the cases, where id of controls are prefixed with view's id, always use the method this.byId() .在控件的 id 以视图的 id 为前缀的情况下,始终使用this.byId()方法。 It will append the view's id for you and then search and return the control unique to that view.它将为您附加视图的 id,然后搜索并返回该视图独有的控件。

So, to fetch oText of View1, you will use (in View1's controller);因此,要获取 View1 的 oText,您将使用(在 View1 的控制器中);

var oText = this.byId('idText')// will fetch view1--idText

Again to fetch oText of View2, you will use (in View2's controller);再次获取 View2 的 oText,您将使用(在 View2 的控制器中);

var oText = this.byId('idText')// will fetch view2--idText
  1. IN XML Views , Id of controls are always prefixed with view's id by framework automatically.在 XML 视图中,控件的 id 总是由框架自动以视图的 id 为前缀。 This is similar to our Way 2 of JS.这类似于我们的 JS 方式 2。 ( Way 1 of JS is never possible in XML Views). (在 XML 视图中,JS 的方式 1 永远不可能)。

View code:查看代码:

<Text id='idText' text='hey! /> <!-- Id generated is: 'viewid--idText' -->

Hence, when you use XML views, fetching of ID is always done by:因此,当您使用 XML 视图时,总是通过以下方式获取 ID:

var oControl = this.byId('idText');

I got the output list from odata service to the valuehelprequest table but not able to filter the data.我从 odata 服务获得了 valuehelprequest 表的输出列表,但无法过滤数据。

    sap.ui.define([
"sap/ui/core/mvc/Controller
      ], function(Controller) {
"use strict";

return Controller.extend("Xml_Search.controller.View1", {
 handlef4: function(){
    var oInput= this.getView().byId("Orderid");
    if(!this._oValueHelpDialog){
        this._oValueHelpDialog= new sap.ui.comp.valuehelpdialog.ValueHelpDialog("idValueHelp",{
        // supportRanges: true,
        key: "Orderid",
        descriptionKey: "OrderType",
        ok: function(oEvent){
            var aTokens= oEvent.getParameter("tokens");
            oInput.setTokens(aTokens);
            this.close();
        },
        cancel: function(){
            this.close();
        }
        });
    }
    var oColModel = new sap.ui.model.json.JSONModel();
    oColModel.setData({
        cols: [
                 {label: "Orderid", template: "Orderid"},
                 {label: "OrderType", template: "OrderType"},
                 {label: "Planplant", template: "Planplant"}
            ]
    });
    var oTable = this._oValueHelpDialog.getTable();
    oTable.setModel(oColModel,"columns");
            var oModel = new     sap.ui.model.odata.ODataModel("/Gateway_Order/sap/opu/odata/SAP/ZP01_FIORI_SRV_01/");
    oTable.setModel(oModel);
oTable.bindRows({path: "/OrderDataSet", filters:  [new     
sap.ui.model.Filter("Orderid",sap.ui.model.FilterOperator.EQ,null, oInput)]}
 );
this._oValueHelpDialog.open();
  }
});
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM