手动 Sort/Filter 个不同大小的列表项（列表中的列表）[Nested/Deep 结构绑定]

Question

我有一个 List 和 CustomListItem，每个 CustomListItem 中存储了不同数量的文件。当我尝试对列表项进行排序和过滤时：

排序功能因以下原因失败：

排序前后：

在排序后的屏幕截图中，最上面的行不应该有那么多白色space，第二个最上面的行与之前的照片有相同数量的白色space（它应该't).就像这些行中有幻影控件一样，它们还没有被排序移动。此外，包含 10 个文件的原始最顶行现在显示为只有 1 个文件的行（此处未显示）——这是分配给原始底行条目的白色 space 的数量。为什么会这样，我该如何解决？

当我在白色上检查元素时space，那里有不可见的控件..

过滤器功能也让我大吃一惊。当我按导致第一个条目（包含 10 个文件的条目）不出现的条件进行过滤时，我按使其再次出现的条件进行过滤 - 结果如下：

如此处所见，我动态实例化的10个文件都不见了！亵渎！我该如何解决这些明显的问题？

背景：在为每个文件动态实例化图标+Link控件之前，我在视图中设置了其中的10个。但是数据会 return 空行，留下过多的白色 space。不仅如此，当我 Sort/Filter 这些行时，这里也会发生同样的问题......我不知道如何使 Sort/Filter 与 non-uniform-sized CustomListItems[=22 一起工作=]

我的代码：

that.getView().setModel(new JSONModel(oData.results), "noteAttach");
var aModelData = that.getView().getModel("noteAttach").oData;
var iModelDataLength = aModelData.length;
var aListItems = oList.getItems();
for (var j = 0; j < iModelDataLength; j++) { //sift through each DataEntry in the model
  for (var i = 1; i < 11; i++) { //in each DataEntry, find ppty Title1,Title2...up to Title10 & remove the ppties thatre empty. if not empty, create a downloadLink & icon for it
    if (aModelData[j]["DocType" + i].length === 0) delete aModelData[j]["DocType" + i] //remove the key-value pair entirely (both the key and the value)
    if (aModelData[j]["Title" + i].length === 0) delete aModelData[j]["Title" + i]
    else {
      var oEmptyVBox = aListItems[j].getContent()[0].getItems()[2]; // CustomListem.VBox.VBox
      oEmptyVBox.addItem(new HBox({
        items: [
          new Icon({
            src: {
              path: 'noteAttach>DocType' + i,
              formatter: formatter.customFileIcon
            }
          }).addStyleClass("sapUiTinyMarginEnd"), new Link({
            href: {
              parts: [{
                path: 'noteAttach>ObjectId'
              }, {
                path: 'noteAttach>Viewname'
              }, {
                path: 'noteAttach>Title' + i
              }],
              formatter: formatter.fileDownloadHref.bind(that) //'this' becomes controller instance instead of control instance
            },
            target: "_blank",
            text: {
              path: 'noteAttach>Title' + i
            }
          })
        ]
      }));
    }
  }
}

<List id="listNotesAttachments" items="{noteAttach>/}" mode="None">
  <CustomListItem>
    <VBox class="sapUiSmallMargin">
      <HBox justifyContent="SpaceBetween" class="sapUiTinyMarginBottom sapUiTinyMarginEnd">
        <Title text="{noteAttach>CreatorName}" />
        <Text text="{parts:[{path:'noteAttach>NotesType'},{path:'noteAttach>CreatedOn'}], formatter:'.formatter.formattedDate'}" />
      </HBox>
      <Text class="sapUiTinyMarginBottom" text="{noteAttach>NotesData}" />
      <VBox/>
    </VBox>
  </CustomListItem>
</List>

此外，这里是模型属性，您可以在需要时参考：

Answer 1

这种不良行为来自您将项目添加到第二个 VBox 的方式。我在每个自定义列表项中尝试了类似的第二个列表，在按名称排序后，一切看起来都如你所愿。

排序前后：

这是视图和控制器的详细信息：

var oData = new JSONModel({
  elements: [{
    text: "hello",
    text2: "bye",
    children: [{
      name: "a",
      id: "1"
    }, {
      name: "b",
      id: "2"
    }, {
      name: "c",
      id: "3"
    }, {
      name: "c",
      id: "4"
    }, {
      name: "c",
      id: "5"
    }, {
      name: "c",
      id: "6"
    }]
  }, {
    text: "kajsdfl",
    text2: "byasdfse",
    children: [{
      name: "ab",
      id: "12"
    }, {
      name: "ba",
      id: "23"
    }, {
      name: "ce",
      id: "34"
    }]
  }, {
    text: "he123321llo",
    text2: "by45556e",
    children: [{
      name: "a1234",
      id: "123"
    }]
  }]
});

this.getView().setModel(oData, "mockup");

<List id="listNotesAttachments" items="{mockup>/elements}" mode="None">
  <CustomListItem>
    <VBox class="sapUiSmallMargin">
      <HBox justifyContent="SpaceBetween" class="sapUiTinyMarginBottom sapUiTinyMarginEnd">
        <Title text="{mockup>text}" />
        <Text text="{mockup>text2}" />
      </HBox>
      <Text class="sapUiTinyMarginBottom" text="{mockup>text}" />
      <List items="{path: 'mockup>children', templateShareable:false}">
        <CustomListItem>
          <core:Icon src="sap-icon://BusinessSuiteInAppSymbols/icon-traffic-lights" />
          <Link href="{mockup>id}" target="_blank" text="{mockup>id}" />
        </CustomListItem>
      </List>
    </VBox>
  </CustomListItem>
</List>

因此，我建议您尝试一种不同的方法，为第一个列表条目创建实体集，为第二个列表的关联创建第二个实体集。这样一来，就像对我所做的那样，所有对您不起作用的事情都会像您期望的那样起作用。

手动 Sort/Filter 个不同大小的列表项（列表中的列表）[Nested/Deep 结构绑定]

Manual Sort/Filter of Different Size List Items (List within a List)[Nested/Deep Structure Binding]

sapui5