UI5 - TreeTable с проблемой рендеринга модели XML

Question

В настоящее время я создаю таблицу деревьев в представлении XML с XML-моделью данных.

Ниже Мой XML:

<?xml version="1.0" encoding="utf-8"?> 
<Rowsets> 
    <Rowset> 
     <Row> 
      <root> 
       <id>root</id> 
       <level>root</level> 
       <children> 
        <id>01</id> 
        <level>01</level> 
        <name>Case Packer</name> 
        <children> 
         <id>0101</id> 
         <level>0101</level> 
         <name>Unscheduled</name> 
        </children> 
        <children> 
         <id>0102</id> 
         <level>0102</level> 
         <name>Lunch</name> 
        </children> 
        <children> 
         <id>0103</id> 
         <level>0103</level> 
         <name>Scheduled Operations</name> 
         <children> 
          <id>010301</id> 
          <level>010301</level> 
          <name>Cleaning</name> 
         </children> 
         <children> 
          <id>010302</id> 
          <level>010302</level> 
          <name>Major Changeover</name> 
         </children> 
         <children> 
          <id>010303</id> 
          <level>010303</level> 
          <name>Paid Break</name> 
         </children> 
         <children> 
          <id>010304</id> 
          <level>010304</level> 
          <name>Running Production</name> 
          <children> 
           <id>01030401</id> 
           <level>01030401</level> 
           <name>Lowrater</name> 
          </children> 
          <children> 
           <id>01030402</id> 
           <level>01030402</level> 
           <name>Labeler 1</name> 
          </children> 
          <children> 
           <id>01030403</id> 
           <level>01030403</level> 
           <name>Depalletizer</name> 
          </children> 
          <children> 
           <id>01030404</id> 
           <level>01030404</level> 
           <name>Filler</name> 
          </children> 
          <children> 
           <id>01030405</id> 
           <level>01030405</level> 
           <name>Bottle Coder</name> 
          </children> 
         </children> 
        </children> 
       </children> 
      </root> 
     </Row> 
    </Rowset> 
</Rowsets> 

Ниже Мой XML Вид:

<?xml version="1.0" encoding="utf-8" ?> 
<core:View 
    xmlns:core="sap.ui.core" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns:l="sap.ui.layout" 
    xmlns="sap.m" 
    xmlns:t="sap.ui.table" 
    controllerName="treetabledemo.TreeTableDemo" 
    xmlns:commons="sap.ui.commons" 
    xmlns:common="sap.suite.ui.commons" 
    xmlns:h="http://www.w3.org/1999/xhtml"> 
    <Page showHeader="false" enableScrolling="false" class="donuts"> 
     <l:Splitter orientation="Vertical"> 
      <l:contentAreas> 
       <Page title="TreeTableDemo"> 
        <content> 
        <t:TreeTable id="idProductionTable" rows="{path:'/Rowsets/Rowset/Row/root', parameters: {arrayNames:['/children']}}"> 

          <t:toolbar> 
           <Toolbar> 
            <Title text="Production"/> 
           </Toolbar> 
          </t:toolbar> 
          <t:columns> 
           <t:Column width="130px" demandPopin="true" id="idProdReportNode" showSortMenuEntry="false" 
                 minScreenWidth="Tablet"> 
            <Label text="NAME" design="Bold" class="TableLabelColor" /> 
            <t:template> 
             <ObjectIdentifier text="{name}" /> 
            </t:template> 
           </t:Column> 
           <t:Column width="130px" demandPopin="true" id="idProdReportProdCount" showSortMenuEntry="false" 
                 minScreenWidth="Tablet" hAlign="End"> 
            <Label text="Level" design="Bold" class="TableLabelColor" /> 
            <t:template> 
             <ObjectIdentifier text="{level}" /> 
            </t:template> 
           </t:Column> 
          </t:columns> 
         </t:TreeTable> 
        </content> 
       </Page> 
      </l:contentAreas> 
     </l:Splitter> 
    </Page> 
</core:View> 

Ниже мой контроллер:

sap.ui.controller("treetabledemo.TreeTableDemo", { 

onInit: function() { 

    var sPath = "resources/data/treedata.xml"; 
    var oModel = new sap.ui.model.xml.XMLModel(sPath); 
    var that = this; 

    var oTable = this.byId("idProductionTable"); 
    oTable.setModel(oModel);  

    }, 

}); 

Но это дает мне следующую ошибку:

Uncaught Error: Path path:'/Rowsets/Rowset/Row/root', parameters: {arrayNames:['/children']} must start with a/
    at d.a.getContext (sap-ui-core.js:1549) 
    at f.c.applyFilter (sap-ui-core.js:1381) 
    at f.c.checkUpdate (sap-ui-core.js:1386) 
    at f.B.initialize (sap-ui-core.js:1313) 
    at f.h._bindAggregation (sap-ui-core.js:511) 
    at f.z._bindAggregation (Table.js:6) 
    at f.h.updateBindings (sap-ui-core.js:517) 
    at f.h.setModel (sap-ui-core.js:528) 
    at constructor.onInit (TreeTableDemo.controller.js:15) 
    at f.a.fireEvent (sap-ui-core.js:449) 

Я пробовал различные перестановки и комбинации, но он, похоже, не работает.

Что я здесь делаю неправильно?

Answer 1

Для моделей XML корень не должен быть включен в путь. Вы должны удалить /Rowsets по пути привязки, как описано в документе here.

Так й путь должен быть

rows="{path:'/Rowset/Row/root', parameters: {arrayNames:['/children']}}" 

Однако теперь вы будете иметь вторую проблему, для вашего TreeTable будет выглядеть примерно так.

Это потому, что модели XML будут работать по-другому по сравнению с моделью JSON, что делает синтаксис пути привязки несколько сложным.

<children> 
       <id>01</id> 
       <level>01</level> 
       <name>Case Packer</name> 
       <children> 
        <id>0101</id> 
        <level>0101</level> 
        <name>Unscheduled</name> 
       </children> 
</children> 

В приведенном выше примере модель рассмотрит дочерний узел root с 4 дочерними узлами. Чтобы исправить это, имя id, level & должно быть атрибутом дочернего объекта.

Так что ваш treedata.xml должен быть чем-то вроде этого.

<?xml version="1.0" encoding="utf-8"?> 
<Rowsets> 
    <Rowset> 
     <Row> 
      <root id="root" level="root"> 
       <children id="01" level="01" name="Case Packer"> 
        <children id="0101" level="0101" name="Unscheduled" /> 
        <children id="0102" level="0102" name="Lunch" /> 
        <children id="0103" level="0103" name="Scheduled Operations"> 
         <children id="010301" level="010301" name="Cleaning" />                    
         <children id="010302" level="010302" name="Major Changeover" />                    
         <children id="010303" level="010303" name="Paid Break" />                    
         <children id="010304" level="010304" name="Running Production">                    
          <children id="01030401" level="01030401" name="Lowrater" />                     
          <children id="01030402" level="01030402" name="Labeler 1" />                     
          <children id="01030403" level="01030403" name="Depalletizer" />                     
          <children id="01030404" level="01030404" name="Filler" />                     
          <children id="01030405" level="01030405" name="Bottle Coder" />                     
         </children> 
        </children> 
       </children> 
      </root> 
     </Row> 
    </Rowset> 
</Rowsets> 

С этим можно связать атрибуты как {@Id}, {@level}, {} @name

<t:TreeTable id="idProductionTable" rows="{path:'/Rowset/Row/root/', parameters: {arrayNames:['/children']}}"> 

         <t:toolbar> 
          <Toolbar> 
           <Title text="Production"/> 
          </Toolbar> 
         </t:toolbar> 
         <t:columns> 
          <t:Column width="130px" demandPopin="true" id="idProdReportNode" showSortMenuEntry="false" 
                minScreenWidth="Tablet"> 
           <Label text="NAME" design="Bold" class="TableLabelColor" /> 
           <t:template> 
            <ObjectIdentifier text="{@name}" /> 
           </t:template> 
          </t:Column> 
          <t:Column width="130px" demandPopin="true" id="idProdReportProdCount" showSortMenuEntry="false" 
                minScreenWidth="Tablet" hAlign="End"> 
           <Label text="Level" design="Bold" class="TableLabelColor" /> 
           <t:template> 
            <ObjectIdentifier text="{@level}" /> 
           </t:template> 
          </t:Column> 
         </t:columns> 
        </t:TreeTable>