表列和行的动态绑定 [英] Dynamic binding of table column and rows
问题描述
我在动态绑定表格列和行时遇到问题.
I'm having troubles getting dynamic binding of both my table columns and rows to work.
假设我有两个模型,一个保存表列信息:
Suppose I have two models, one holding the table column info:
var aColumnData = [
{
columnId : "col1"
},
{
columnId : "col2"
},
{
columnId : "col3"
},
{
columnId : "col4"
},
{
columnId : "col5"
}
];
还有一个数据:
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 col 2",
col3 : "Row 2 col 3",
col4 : "Row 2 col 4",
col5 : "Row 2 col 5"
}
];
然后我设置模型:
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
columns : aColumnData,
rows : aData
});
然后我在视图中创建我的表:
I then create my table in the view:
var oTable = new sap.ui.table.Table();
var oColumnTemplate = new sap.ui.table.Column({
label : "{columnDesc}",
template : new sap.ui.commons.TextView().bindProperty("text", "<this_should_be_dynamic_but_how?>")
});
oTable.bindColumns("/columns", oColumnTemplate);
oTable.bindRows("/rows");
困扰我的部分是TextView模板中当前列的绑定;这应该是动态的(col1"、col2"等)并且是动态完成的——无论如何我认为绑定就是这样——但我无法让它工作......
The part that bugs me is the binding to the current column in the TextView template; this should be dynamic ("col1", "col2", etc) and done on the fly -- that's what bindings are for anyway I assume -- but I can't get it to work...
我想我错过了一些简单而微不足道的东西,但我现在有点迷失了......非常感谢任何帮助!
I guess I'm missing something simple and trivial, but I'm a bit lost now... Any help is highly appreciated!
================================
==============================
我通过遍历列数组并使用 addColumn() 方法使其工作:
jQuery.each(aColumnData, function(i, v) {
oTable.addColumn(new sap.ui.table.Column({
label : v.columnDesc,
template: new sap.ui.commons.TextView().bindProperty("text", v.columnId)
}));
});
...但我希望使用 bindColumns()/bindRows() 方法会有更简洁的方法:
推荐答案
我之前做过类似的事情 使用工厂函数 参见 jsbin 示例 与您类似的示例
I have done something similar before using factory functions see jsbin example for similar example to yours
var oTable = new sap.ui.table.Table({
title: "Table column and data binding",
showNoData : true,
columnHeaderHeight : 10,
visibleRowCount: 7
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var sColumnId = oContext.getObject().columnId;
return new sap.ui.table.Column({
id : sColumnId,
label: sColumnId,
template: sColumnId,
sortProperty: sColumnId,
filterProperty: sColumnId
});
});
oTable.bindRows("/rows");
在这种情况下,您可以使用 2 个全局命名模型,一个用于元数据,一个用于数据例如
you could use 2 globally named models in this scenario, one for the metadata one for the data eg
sap.ui.getCore().setModel(oMetaModel, 'meta');
sap.ui.getCore().setModel(oDataModel, 'data');
..
oTable.bindColumns("meta>/columns" function...
oTable.bindRows("data>/rows");
这是一个示例 基于 OData 元数据的动态列的 jsbin 示例
这篇关于表列和行的动态绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!