2016-05-03 23 views
0
<html> 

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

     <title>OData Date Table Multiple Sorters</title> 
     <link rel="stylesheet" type="text/css" href=""> 

     <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection"> 
     </script> 
     <script> 
      var airsideTableDataOriginal= 
       //{"genericTableModel": 
       [ 
       {"columnId":"col1","WS":"WS 1","Status":0}, 
       {"columnId":"col 2","WS":"WS 2","Status":1}, 
       {"columnId":"col3","WS":"WS 3","Status":2}, 
       {"columnId":"col4","WS":"WS 4","Status":3}, 
       {"columnId":"col5","WS":"WS 5","Status":4}, 

       ]; 
     var aColumnData = [{ 
      columnId: "col1" 
     }, { 
      columnId: "col 2" 
     }, { 
      columnId: "col3" 
     }, { 
      columnId: "col4" 
     }, { 
      columnId: "col5" 
     }]; 


     var aData = [{ 

      "col 2": "WS 2", 
      col3: "WS 3", 
      col4: "WS 4", 
      col5: "WS 5" 
     }]; 
     var oModel = new sap.ui.model.json.JSONModel(); 

     oModel.setData({ 
      columns: aColumnData, 
      rows: aData 
     }); 

     var oTable = new sap.ui.table.Table({ 
      title: "Table column and data binding", 
      showNoData : true, 
      columnHeaderHeight : 10, 
      visibleRowCount: 7 
     }); 
     oTable.setModel(oModel); 

     oTable.bindColumns("/columns", function(index, context) { 
      var sColumnId = context.getObject().columnId; 
      var tempJson=airsideTableDataOriginal; 


      return new sap.ui.table.Column({ 
       id : sColumnId, 
       label: sColumnId, 
       template: new sap.ui.commons.Button({ 
       text : { 
       path: sColumnId, 
        formatter: function(value){ 
        if(value!=null){ 
       var specificJson= $.grep(tempJson, function(n, i) { 
       return n.columnId === sColumnId.toString() && n.WS === value.toString(); 
       }); 
        if(specificJson[0].Status == 1){ 
        this.setIcon("sap-icon://accept"); 
        this.setStyle(sap.ui.commons.ButtonStyle.Accept);    
       } 
       } 
        if(value === "" || value == undefined){ 
        this.setVisible(false); 
       } 
         return value ; 
       } 
       }, 
       }), 


       sortProperty: sColumnId, 
       filterProperty: sColumnId 
      }); 
     }); 
     oTable.bindRows("/rows"); 
     oTable.placeAt("content"); 
     </script> 
    </head> 
    <body class="sapUiBody" id="body" role="application"> 
     <div id="content"></div> 
    </body> 
    </html> 

空間則根據上面的代碼有col 2其給出錯誤"col 2" is not a valid ID.之間space。這裏是bin。但是,當我用col2替換col 2時,它工作正常。但實時我在數據中獲得空間,所以如何解決它,以便它可以與空間一起工作。不能結合列數據時,有在JSON

+0

什麼阻止您刪除空格或用下劃線替換它們? – Qualiture

+0

@Qualiture ..客戶要求。我按照你說的那樣做了,但是客戶想要空間。那有什麼辦法。 –

+1

這是檢查ID是否有效的功能。正則表達式不允許空格:https://github.com/SAP/openui5/blob/9103a24a1800aacd02a5337f763270953c9aefe3/src/sap.ui.core/src/sap/ui/core/library.js#L871你可以建議添加\ s到正則表達式來允許空格 – Marc

回答

1

我猜想,該錯誤來自於Column對象的無效ID:id : sColumnId,return new sap.ui.table.Column({後的第一行),而不是從捆綁。

像馬克在他的評論中說的元素ID不能包含空格。但是ID對用戶不可見,您可以在分配時替換Column.id的空格,或者可以跳過標識賦值以獲取自動生成的id。

+0

註釋掉id只是正常工作。然而我試過這個'id:{s:{sColumnId, formatter:function(value){return value.replace(//g,'');}},但它不起作用。 –

+0

id不可綁定。你可以在你的代碼中這樣做:'id:sColumnId.replace(//g,''),'' – schnoedel

0

誰在自己ID的需求空間我會1)絕對轉向明朗,如果這是不可能的,2)教育他們,他們的「要求」,是說一個客戶端[...]

儘管如此,我只會用下劃線代替空格(這是很簡單的Javascript):

airsideTableDataOriginal.forEach(function(obj) { 
    obj.columnId = obj.columnId.replace(/ /g,"_"); 
}); 

aColumnData.forEach(function(obj) { 
    obj.columnId = obj.columnId.replace(/ /g,"_"); 
}); 

aData.forEach(function(obj) { 
    for (var property in obj) { 
     if (obj.hasOwnProperty(property)) { 
      if (~property.indexOf(" ")) { 
       var newProperty = property.replace(/ /g,"_"); 
       obj[newProperty] = obj[property]; 
       delete obj[property]; 
      } 
     } 
    } 
});