控制器表中的sapui5 JS没有绑定

时间:2017-01-03 05:53:24

标签: javascript html sap sapui5

我尝试使用Odata服务创建搜索帮助,但我的表在控制器中显示为未定义,这是我的代码plz help

的index.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

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 这里的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");
    }

});
});

2 个答案:

答案 0 :(得分:3)

您的问题是如何获取表格的ID。

您的问题的解决方案是:

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

但是,让我们了解Id的创建和提取。

  1. 在JS视图中,有两种方法可以创建ID。

    方式1::提供直接ID。例如:

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

  2. 现在,这个id -'idText'与您的整个应用程序相关联。因此,如果您有另一个视图,其控件具有相同的ID,您将在控制台中看到重复的ID错误。

    要使用Way1创建ID来获取控件,请使用以下方法:

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

    现在,让我们假设有两个或更多开发人员在应用程序中工作,他们正在为应用程序创建不同的视图。他们可能(很有可能)创建具有相同id的控件。由于重复的id错误,我们整合两个视图时应用程序将崩溃。怎么解决这个问题?

    方式2 :我们可以使用控制器的 createId()方法来创建前缀为视图ID的ID。所以,这种方式即使两个开发人员使用相同的id,由于视图ID不同,他们最终会得到不同的控件ID。 所以,让我们认为我们有两个视图,View1(id:view1)和view2(id:view2)。

    如果我在两个控件中创建一个具有相同Id的控件(使用控制器的createId()方法),将生成两个唯一的id,并且永远不会引发重复的id错误。

    所以,View 1(id:view1):

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

    视图1中的oText的ID:view1 - idText

    类似地,

    查看2(id:view2):

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

    视图2中oText的ID:view2 - idText

    干得好。但是如果视图的Id是自动生成的,我可能不知道我的视图ID是什么?好问题。

    解决方案是方法: this.byId()。在控件的id以view的id作为前缀的情况下,请始终使用 this.byId()方法。它将为您附加视图的ID,然后搜索并返回该视图的唯一控件。

    因此,要获取View1的oText,您将使用(在View1的控制器中);

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

    再次获取View2的oText,您将使用(在View2的控制器中);

    var oText = this.byId('idText')// will fetch view2--idText
    
    1. IN XML Views ,控件的ID始终自动以框架为视图的id。这类似于JS的Way 2。 (XML视图中的JS方法1永远不可能)。
    2. 查看代码:

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

      因此,当您使用XML视图时,始终通过以下方式获取ID:

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

答案 1 :(得分:0)

我将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();
  }
});
});