操作 table 最后一行的图标属性
Manipulate icon properties for the last row of table
在 XML 视图中我有:
<Table id="testtable" xmlns="sap.ui.table"
rows="{/testdata}"
alternateRowColors="true">
<columns>
<Column hAlign="Center" label="Col1">
<template>
<m:Text text="{dataX}" wrapping="false" />
</template>
</Column>
<Column hAlign="Center" label="Col2">
<template>
<m:Text text="{dataY}" wrapping="false" />
</template>
</Column>
<Column label="Col3">
<template>
<m:HBox>
<core:Icon src="sap-icon://show" color="{ parts : [ 'test'], formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://edit" color="{ parts : [ 'test' ], formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://print" color="{ parts : [ 'test' ], formatter: '.setIconColour'}" />
</m:HBox>
</template>
</Column>
</columns>
</Table>
在控制器中(格式化函数如下):
setIconColour: function (value) {
if (value === 1) {
return "#007bff";
} else if (value === 2) {
return "Positive";
} else if (value === 3) {
return "Negative";
}
}
样本数据如下:
{"testdata": [
{ "dataX": 1, "dataY": "testdata", "test": 0},
{ "dataX": 2, "dataY": "testdata", "test": 2},
{ "dataX": 3, "dataY": "testdata", "test": 3},
{ "dataX": 4, "dataY": "testdata", "test": 1}
]}
这会根据 test
值更改图标属性的颜色,在此之后我可能知道如何仅更改最后一行图标的颜色或(仅行)如果仅存在一行(其余都有与每个格式化程序函数相同的属性)
我正在尝试这样做:
var tabItems = this.byId("testtable").getRows();
var cells = tabItems[testdata.length-1].getCells(); // get last row cells
cells[8].mAggregations.items[0].setColor(
"#000000"); // at this path i have all 3 icons and trying to set color here (items[0],items[1],items[2] --> 3 icons)
但是这种方法无法按预期工作,直到页面刷新才会出现奇怪的结果,希望有更好的方法,非常感谢任何帮助或指导链接 TIA
也许你可以添加索引你的 JSON 然后你可以给你的格式化程序 JSON 的索引和长度。
JSON 像这样:
{"testdata": [
{ index: 1, "dataX": 1, "dataY": "testdata", "test": 0},
{ index: 2, "dataX": 2, "dataY": "testdata", "test": 2},
{ index: 3, "dataX": 3, "dataY": "testdata", "test": 3},
{ index: 4, "dataX": 4, "dataY": "testdata", "test": 1}
]}
格式化程序:
setIconColour: function (value, index, length) {
//
}
在 XML 视图中我有:
<Table id="testtable" xmlns="sap.ui.table"
rows="{/testdata}"
alternateRowColors="true">
<columns>
<Column hAlign="Center" label="Col1">
<template>
<m:Text text="{dataX}" wrapping="false" />
</template>
</Column>
<Column hAlign="Center" label="Col2">
<template>
<m:Text text="{dataY}" wrapping="false" />
</template>
</Column>
<Column label="Col3">
<template>
<m:HBox>
<core:Icon src="sap-icon://show" color="{ parts : [ 'test'], formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://edit" color="{ parts : [ 'test' ], formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://print" color="{ parts : [ 'test' ], formatter: '.setIconColour'}" />
</m:HBox>
</template>
</Column>
</columns>
</Table>
在控制器中(格式化函数如下):
setIconColour: function (value) {
if (value === 1) {
return "#007bff";
} else if (value === 2) {
return "Positive";
} else if (value === 3) {
return "Negative";
}
}
样本数据如下:
{"testdata": [
{ "dataX": 1, "dataY": "testdata", "test": 0},
{ "dataX": 2, "dataY": "testdata", "test": 2},
{ "dataX": 3, "dataY": "testdata", "test": 3},
{ "dataX": 4, "dataY": "testdata", "test": 1}
]}
这会根据 test
值更改图标属性的颜色,在此之后我可能知道如何仅更改最后一行图标的颜色或(仅行)如果仅存在一行(其余都有与每个格式化程序函数相同的属性)
我正在尝试这样做:
var tabItems = this.byId("testtable").getRows();
var cells = tabItems[testdata.length-1].getCells(); // get last row cells
cells[8].mAggregations.items[0].setColor(
"#000000"); // at this path i have all 3 icons and trying to set color here (items[0],items[1],items[2] --> 3 icons)
但是这种方法无法按预期工作,直到页面刷新才会出现奇怪的结果,希望有更好的方法,非常感谢任何帮助或指导链接 TIA
也许你可以添加索引你的 JSON 然后你可以给你的格式化程序 JSON 的索引和长度。
JSON 像这样:
{"testdata": [
{ index: 1, "dataX": 1, "dataY": "testdata", "test": 0},
{ index: 2, "dataX": 2, "dataY": "testdata", "test": 2},
{ index: 3, "dataX": 3, "dataY": "testdata", "test": 3},
{ index: 4, "dataX": 4, "dataY": "testdata", "test": 1}
]}
格式化程序:
setIconColour: function (value, index, length) {
//
}