Приложение UI5 (в WebIDE): sap.m.ColumnListItem: Изменить цвет всей строки в зависимости от значения в одном столбце. Что не так? - PullRequest
Новая
       8

Приложение UI5 (в WebIDE): sap.m.ColumnListItem: Изменить цвет всей строки в зависимости от значения в одном столбце. Что не так?

0 голосов
/ 21 сентября 2018

Я гуглил, как изменить цвет строки внутри таблицы (ColumnListItem) на основе значения внутри столбца.Я нашел много результатов Google и из всех результатов я выбрал тот, который избегает использования предопределенных (или индивидуально определенных) CSS внутри папки моего проекта.Кстати, даже внутри F12-browser-tools (изменение CSS или таких вещей на внешнем интерфейсе), похоже, не работает должным образом.

Я следовал этому подходу (довольно старый пост) и не могу заставить его работать:

https://archive.sap.com/discussions/thread/3360580

Строка таблицы просто должна стать зеленой, желтой или красной.

Это мой код, пока внутри onInit (первая часть, создание шаблона) 

var oTable = this.byId("companySecret"); 
        var oView = this.getView();

        var oTemplate = new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text: "{Col1}"
                }),
                new sap.m.Text({
                    text: "{Col2}"
                }),
                new sap.m.Text({
                    text: "{Col3}"
                }),
                //
                // ALL OTHER COLUMNS
                // 
                // The only difference is that I do this inside the "loop".

                new sap.ui.commons.TextView({
                text: "{Color}"
                }).bindProperty("text", "Color",function(cellValue)
                    {
                        var backgroundColor = "red";         

                        var cellId = this.getId();

                        var row_col = $("#"+cellId);

                        // As You see, I am quite desperate
                        $("#"+cellId).css("background-color","#FF0000");
                        $("#"+cellId).parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().css("background-color",'#FF0000');
                        $("#"+cellId).parent().parent().parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().parent().parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().parent().parent().parent().css("background-color","#FF0000");


                        return cellValue;
                    })

            ]
        });

Сразу после этих строк привязка инициируется так: 

        var sUrl = "/sap/opu/odata/sap/Z_COMPANY_SECRET/";
        var oModel = new sap.ui.model.odata.v2.ODataModel(sUrl, false);
        oTable.setModel(oModel);
        oTable.bindAggregation("items", {path: "/Company_Secret", template: oTemplate });

Итак, что мне не хватает?В указанной ссылке принятый ответ помечен как «полезный», поэтому он ДОЛЖЕН работать.Есть намеки?Спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

Я знаю, что это уже старый вопрос, но, возможно, сможет помочь другим.

Ответ Йорга , вероятно, более чистый подход.Я также использую тот же подход.

Как правило, чище и намного безопаснее избегать использования и доступа к автоматически сгенерированным Control-ID (особенно с селектором jQuery), так как эти идентификаторы, скорее всего, изменятся всякий раз, когдамодель, к которой он привязан, обновляется.

Используя подход CustomData-CSS, вы можете воспользоваться преимуществами привязки и не беспокоиться об изменении идентификаторов или поиске правильного идентификатора для элемента списка / строки, который обязательно должен измениться.в любом случае, когда модель обновляется.

Вам просто нужно поддерживать CSS.Что проще и намного чище.:)

Если это поможет, я преобразовал ваш код в соответствии с ответом Йорга.См. Ниже: 

new sap.ui.commons.TextView({
    text: "{Color}"
}).addCustomData(new sap.ui.core.CustomData({
    key: "color",
    value: "{= $(argument) ? 'red' : 'green'}",
    writeToDom: true
}));

И в CSS он должен быть таким же, как у Йорга: 

tr[data-color="red"] {
   background-color: red;
}

Надеюсь, это поможет!

0 голосов
/ 22 сентября 2018

Чтобы манипулировать строкой таблицы, я обычно использую пользовательский атрибут строки через XML: 

<Table>
  <columns>
    <Column><Text text="value"/></Column>
  </columns>
  <items>
    <ColumnListItem type="Active">
      <customData>
        <core:CustomData key="color" value="{= ${MyArgument} ? 'red' : 'green'}" writeToDom="true" />
      </customData>          
      <cells>
        <ObjectIdentifier text="{Value}"/>
      </cells>
    </ColumnListItem>
  </items>
</Table>

Это записывает атрибут данных с именем data-color в элемент tr в DOM со значениемлибо red, либо green.Расширьте это с помощью своей собственной логики или используйте средство форматирования, как для любого другого значения, если проверка слишком длинная или громоздкая.

Затем вы можете манипулировать атрибутом с помощью прилагаемого файла CSS: 

tr[data-color="red"] {
   background-color: red;
}

Работает для меня.

Возможно, вы сможете сделать что-то вроде 

document.querySelectorAll('tr[data-color="red"]').forEach(s => s.style.backgroundColor = 'red');
...