text="{Status}"
colorScheme="{
path: 'Status',
formatter: '.formatter.getStatusColorScheme'
}"
/>
代码解释:前端代码中colorScheme属性需要接受一个整型数字,不同的数字代表不同的颜色。针对这一个属性,我们调用了一个格式化器。其中path为我们的输入参数,这个参数会传递到js代码中对应的函数中。formatter属性指定的就是我们要调用的js函数。
formatter: {
getStatusColorScheme: function (sStatus) {
// Check the value of Status and return the corresponding colorScheme
if (sStatus === "Available") {
return 7;
} else if (sStatus === "Occupied") {
return 3;
} else {
// Return a default value if none of the above conditions match
return "defaultColorScheme";
}
},
},
代码解释:在js代码中,我们接受前端传递过来的参数,根据前端传递过来的不同参数返回不同的值,这个返回的值就会直接赋值给colorScheme属性,从而根据不同的内容动态的改变不同颜色的标签。
4.常用的一些UI5的内部类
在布局过程中,通常会使用Margin或者Padding,UI5提供了一些内置的布局类,如:
sapUiTinyMarginBottom
其中Tiny还可以是Small,Large等参数 Bottom还可以是Top Begin End
5.数据绑定
在这个项目的代码中,用到了两个JSON模型,涉及到一些关于数据绑定的问题。JSON数据如下:
var oModel = new JSONModel({
ToolNumberCollection: [
{ ToolNumber: "RP0001", Description: "这是一个测试", Status: "Available", ToolGroup: "Tool Group NO.1" },
{ ToolNumber: "RP0002", Description: "这是一个测试", Status: "Available", ToolGroup: "Tool Group NO.1" },
{ ToolNumber: "RP0003", Description: "这是一个测试", Status: "Available", ToolGroup: "Tool Group NO.2" },
{ ToolNumber: "RP0004", Description: "这是一个测试", Status: "Occupied", ToolGroup: "Tool Group NO.1" },
{ ToolNumber: "RP0005", Description: "这是一个测试", Status: "Occupied", ToolGroup: "Tool Group NO.2" },
{ ToolNumber: "RP0006", Description: "这是一个测试", Status: "Occupied", ToolGroup: "Tool Group NO.1" },
{ ToolNumber: "RP0007", Description: "这是一个测试", Status: "Occupied", ToolGroup: "Tool Group NO.3" },
{ ToolNumber: "RP0008", Description: "这是一个测试", Status: "Occupied", ToolGroup: "Tool Group NO.3" },
{ ToolNumber: "RP0009", Description: "这是一个测试", Status: "Available", ToolGroup: "Tool Group NO.2" },
{ ToolNumber: "RP0010", Description: "这是一个测试", Status: "Available", ToolGroup: "Tool Group NO.2" },
{ ToolNumber: "RP0011", Description: "这是一个测试", Status: "Available", ToolGroup: "Tool Group NO.3" },
]
});
var orders = new JSONModel({
Orders: [
{ Type: "领头生产订单", OrderNumber: "1603212332", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 25%", precent: 25, Count: "45", Status: "Processing" },
{ Type: "可选生产订单", OrderNumber: "1603212331", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 87%", precent: 87, Count: "41", Status: "Available" },
{ Type: "可选生产订单", OrderNumber: "1603212333", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 57%", precent: 57, Count: "35", Status: "Available" },
{ Type: "可选生产订单", OrderNumber: "1603212331", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 54%", precent: 54, Count: "41", Status: "Available" },
{ Type: "可选生产订单", OrderNumber: "1603212333", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 25%", precent: 25, Count: "35", Status: "Available" },
{ Type: "可选生产订单", OrderNumber: "1603212331", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 32%", precent: 32, Count: "41", Status: "Available" },
{ Type: "可选生产订单", OrderNumber: "1603212333", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 56%", precent: 56, Count: "35", Status: "Available" },
{ Type: "可选生产订单", OrderNumber: "1603212331", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 43%", precent: 43, Count: "41", Status: "Available" },
{ Type: "可选生产订单", OrderNumber: "1603212333", Description: "物料描述:机加工阀体 MFH-22-3-3", Rate: "挂具占比: 54%", precent: 54, Count: "35", Status: "Available" },
]
});
this.getView().setModel(orders, "orders");
this.getView().setModel(oModel);
上面这个例子中创建了两个模型,并设置到了view中。在xml中我们要将这些模型绑定到对应的List中去。对于第一个模型,因为设置的时候没有设置名字,那么名字就为空this.getView().setModel(oModel)
那么在xml代码中应该采用下面的方式进行数据绑定
id="toolList2"
items="{
path: '/ToolNumberCollection',
sorter: {
path: 'ToolGroup',
group: true
},
}"
mode="SingleSelectMaster"
selectionChange="onselectionchange"
>"
需要注意path: '/ToolNumberCollection'
此外,我们要想访问模型对应的某一些字段的值,应该如下操作:
发表评论