我遇到麻烦,我的表列和行的动态绑定工作.
假设我有两个模型,一个持有表列信息:
var aColumnData = [
{
columnId : "col1"
},
{
columnId : "col2"
},
{
columnId : "col3"
},
{
columnId : "col4"
},
{
columnId : "col5"
}
];
Run Code Online (Sandbox Code Playgroud)
和一个数据:
var aData = [
{
col1 : "Row 1 col 1",
col2 : "Row 1 col 2",
col3 : "Row 1 col 3",
col4 : "Row 1 col 4",
col5 : "Row 1 col 5"
},
{
col1 : "Row 2 col 1",
col2 : "Row 2 …Run Code Online (Sandbox Code Playgroud) 这个问题来自于深入研究原始问题:如何根据表行数据在表下拉列表中设置过滤器
背景
我想在SAPUI5下拉控件上使用过滤器,我在其中根据模型属性设置过滤器值(数据绑定)
问题
如果我使用过滤器,其中过滤器值value1由数据绑定指定:
new sap.ui.model.Filter({
path : "division",
operator : sap.ui.model.FilterOperator.EQ,
value1 : "{/someProperty}"
})
Run Code Online (Sandbox Code Playgroud)
然后下拉列表不会呈现任何项目
但是,如果我在属性上硬编码值value1:
new sap.ui.model.Filter({
path : "division",
operator : sap.ui.model.FilterOperator.EQ,
value1 : "Test"
})
Run Code Online (Sandbox Code Playgroud)
然后过滤器按预期工作.
问题
我们不能使用数据绑定来指定过滤器值吗?或者我应该以另一种方式实现它?
我的一小部分实际上可以理解,使用来自同一模型的值在控件的模型上设置过滤器可能会引起一些参考问题,但是当使用两个不同的命名模型时会出现这种情况(一个用于下拉,一个用于过滤价值)
任何帮助是极大的赞赏!
假设我有以下XML视图:
<mvc:View xmlns:mvc="sap.ui.core.mvc" ...>
<Page>
<content>
<l:VerticalLayout>
<l:content>
<core:Fragment fragmentName="my.static.Fragment" type="XML" />
</l:content>
</l:VerticalLayout>
</content>
</Page>
</mvc:View>
Run Code Online (Sandbox Code Playgroud)
片段my.Fragment是静态加载的.但是,我现在想要动态更改要加载的片段(理想情况下使用绑定fragmentName属性的数据,但任何其他方法也应该没问题),即.这样的事情:
<mvc:View xmlns:core="sap.ui.core.mvc" ...>
<Page>
<content>
<l:VerticalLayout>
<l:content>
<core:Fragment fragmentName="{/myDynamicFragment}" type="XML" />
</l:content>
</l:VerticalLayout>
</content>
</Page>
</mvc:View>
Run Code Online (Sandbox Code Playgroud)
但是,后者不起作用,Fragment定义不允许数据绑定......我可能错过了一些东西,但是如何基于参数/模型属性/ etc动态更改XML视图中的Fragment?
现在,我已经使用自定义控件而不是直接在我的视图中使用片段,并让该控件执行调度到相应的片段,但我觉得应该有一个更容易,开箱即用的方式. ..
我无法获取绑定到RowRepeater元素的当前JSON模型元素.使用表和列表,我只需检索当前索引(或索引),并根据这些值,指向我的JSON模型中的匹配元素.
但是,RowRepeater元素没有当前索引属性.因为我觉得我应该能够直接检索当前元素,而不是间接地通过当前索引检索,是否有更好,统一的方法来检索当前元素?
型号示例代码:
var mydata = {
"data": [
{
"key": "67b895bf-8d89-11e3-94a7-0000005341de",
"name": "my 1st item"
},
{
"key": "7780de05-8d83-11e3-bec4-0000005341de",
"name": "my 2nd item"
}
]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dummydata);
sap.ui.getCore().setModel(oModel);
Run Code Online (Sandbox Code Playgroud)
RowRepeater的示例代码(我想在按下删除图标时检索当前的'键'):
var oRowRepeater = new sap.ui.commons.RowRepeater();
//create the template control that will be repeated and will display the data
var oRowTemplate = new sap.ui.commons.layout.MatrixLayout();
var matrixRow, matrixCell, control;
// main row
matrixRow = new sap.ui.commons.layout.MatrixLayoutRow();
//Text
control = new sap.ui.commons.TextView();
control.bindProperty("text","name");
//add content to cell, cell …Run Code Online (Sandbox Code Playgroud) 我在设置表的行数时遇到了麻烦,无法自动填充其封装容器的可用空间.
根据API,将visibleRowCountMode属性设置为sap.ui.table.VisibleRowCountMode.Auto应该将表呈现为
"[...]自动填充周围容器的高度 .visibleRowCount属性会相应地自动更改.所有行都需要相同的高度,否则自动模式并不总是按预期工作."
我使用了以下代码:
var oTable = new sap.ui.table.Table( {
rowHeight : 30,
height : "100%",
// The below property is seemingly ignored... What did I do wrong?
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});
Run Code Online (Sandbox Code Playgroud)
...但正如你在这个jsbin示例中看到的那样http://jsbin.com/vazuz/1/edit它只显示默认的10行,当然不会"相应地改变visibleRowCount属性":-(
有人有解决方案吗?提前致谢!
=====================
编辑:感谢@ matz3的回答,我最终能够解决这个问题.
将周围的容器DIV设置为100%,这似乎被忽略了.然而,将其设置为固定高度,效果很好.但我真正想要的是,如果用户调整窗口大小,则需要相应地调整可用行数.因此将其设置为固定高度不是一个选择......
然而,诀窍在于一些额外的CSS:不仅需要将DIV设置为100%高度,还需要将BODY和HTML(!!)设置为100%的高度:
html, body {
height: 100%
}
div#uiArea {
height: 100%
}
Run Code Online (Sandbox Code Playgroud)
现在,表格跨越可用视口的整个高度,并且调整窗口大小可以很好地调整表格.请参阅此处的最终工作解决方案:http://jsbin.com/bosusuya/3/edit
Matz3,谢谢你的帮助!
在 SAPUI5 的 JSView 中,将当前控件引用传递给格式化函数非常容易:
oTable.bindItems("/rows", new sap.m.ColumnListItem({
cells : [ new sap.m.Text().bindProperty("text", {
parts: [
{ path: "someInteger" }
],
formatter: function(iValue) {
var idText = this.getId(); //this references the current control
return iValue;
}
})]
}));
Run Code Online (Sandbox Code Playgroud)
(当然,“简单”部分是因为this在控件的内部格式化程序函数中引用了)
但是,对于 XMLViews,我还没有设法在格式化程序函数中获取对当前控件的引用:
<Table items="{/rows}">
<columns>
<Column>
<Text text="Some Integer" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{ path : 'someInteger', formatter : '.formatCell' }" />
</cells>
</ColumnListItem>
</items>
</Table>
Run Code Online (Sandbox Code Playgroud)
和格式化程序:
formatCell : function (sValue) {
var a = this; …Run Code Online (Sandbox Code Playgroud)