我的html
<body class="sapUiBody" role="application">
<div id="content"></div>
<div id="content1"></div>
<div id="content2"></div>
</body>
我的Js
var myData= {
user:[{id:"1",firstname:"x",lastname:"k"},
{id:"2",firstname:"y",lastname:"k"},
{id:"3",firstname:"z",lastname:"k"}],
expense:[{expenseno:"1",uid:"1",item:"c",amount:"1500"},
{expenseno:"2",uid:"2",item:"t",amount:"1150"},
{expenseno:"3",uid:"3",item:"p",amount:"500"},
{expenseno:"4",uid:"1",item:"y",amount:"1000"},
{expenseno:"5",uid:"2",item:"t",amount:"3500"},
{expenseno:"6",uid:"3",item:"s",amount:"3500"},
{expenseno:"7",uid:"1",item:"q",amount:"900"}],
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(myData);
sap.ui.getCore().setModel(oModel);
// user table
var oTable = new sap.ui.table.DataTable({
title : "Users",
width : "100%",
visibleRowCount : 3,
selectionMode : sap.ui.table.SelectionMode.Single,
editable : false
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "User ID"}),
template: new sap.ui.commons.TextField({value:"{id}"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField({value:"{firstname}"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextField({value:"{lastname}"})
}));
oTable.bindRows("/user");
oTable.placeAt("content");
// expense table
var oTable2 = new sap.ui.table.DataTable({
title : "Expense",
width : "100%",
visibleRowCount : 5,
selectionMode : sap.ui.table.SelectionMode.Single,
editable : false
});
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "User Id"}),
template: new sap.ui.commons.TextField({value:"{uid}"})
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Expense No"}),
template: new sap.ui.commons.TextField({value:"{expenseno}"})
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Items"}),
template: new sap.ui.commons.TextField({value:"{item}"})
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Amount"}),
template: new sap.ui.commons.TextField({value:"{amount}"})
}));
oTable2.bindRows("/expense");
oTable2.placeAt("content1");
// bar graph
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
axis : 1,
name :"Item",
value : "{item}"
}],
measures : [ {
name :"Amount",
value : "{amount}"
} ],
data : {
path : "/expense",
//filters : how to filter on the basis of row selected on first table,
}
});
var column = new sap.viz.ui5.Column({
width : "95%",
height : "400px",
showLegend : false,
plotArea : {
//'colorPalette' : d3.scale.category20().range()
},
title : {
visible : true,
text : "Item vs Amount"
},
dataset : dataset
});
column.placeAt("content2");
oTable.attachRowSelect(function(oEvent){
// get the binding context of the first selected row
var selectedRowContext = oEvent.getParameter("rowContext");
var selectedUserId = oModel.getProperty("id", selectedRowContext);
// filter expenses
var listBinding = oTable2.getBinding();
var oFilter = new sap.ui.model.Filter("uid", sap.ui.model.FilterOperator.EQ, selectedUserId);
listBinding.filter([oFilter]);
// how to filter graph
});
到目前为止我做了什么:
- 创建了两张表格和一张条形图。如果我从我的中选择一行 第一个表(用户)，第二个表(费用)在此基础上更新 已选择用户 ID。[使用 AttachRowSelect(function(oEvent)- 代码帮助 来自 sapui5.netweaver.ondemand.com]
现在我想根据第一个表中选择的用户 ID 来更新条形图。假设我选择第 1 行(用户 ID 1)，则条形图应仅显示费用数据集中与用户 ID 1 相关的项目和金额。
谢谢，请帮忙。
最佳答案
虽然我没有完全得到你的要求。根据您的理解，以下内容可能对您有所帮助。
var datasetBinding = dataset.getBinding("data");
var oFilter2 = new sap.ui.model.Filter("uid", sap.ui.model.FilterOperator.EQ, selectedUserId);
datasetBinding.filter([oFilter2]);
关于javascript - 如何使用数据绑定(bind)将数据动态加载到 sapui5 表和条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32057646/