Хобрук: Ваш путь к мастерству в программировании

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

В настоящее время я создаю древовидную таблицу в представлении 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)

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

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

javascript xml sapui5 treeview
18.02.2017

Ответы:


1

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

Таким образом, путь должен быть

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>

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

Таким образом, ваш файл 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>
18.02.2017
Новые материалы
Введение в контекст React
В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..
Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..
Это оно
Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..
7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...
Базовое руководство по переносу концепций обучения в глубокое обучение
Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..
C в C.R.U.D с использованием React-Redux
Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..
5 обязательных элементов современного инструмента конвейера данных
В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..