从 SAPUI5 中的 <select> 标签获取值的标准方法是什么。如果存在于 Table
What is the standard way to get values from <select> tag in SAPUI5. If is present in Table
假设我们有 Sap.m Table。我们将值绑定到 Sap.m.Select。
那么从 select 标签获取 selected 值的标准方法是什么。
我浏览了很多博客,我发现在这种情况下每个人都使用 for 循环来获取值。
我不想为 table 使用 id。
<Table noDataText="No Activity Data" items="{oModel>/result}">
<items>
<ColumnListItem type="Active">
<cells>
<Select xmlns="sap.m" items="{oModel>results1}">
<!--<items>-->
<core:Item key="{oModel>empno}" text="{oModel>empno}"/>
<!--</items>-->
</Select>
<Select xmlns="sap.m" items="{oModel>results1}">
<!--<items>-->
<core:Item key="{oModel>mobno}" text="{oModel>mobno}"/>
<!--</items>-->
</Select>
<Input value="{oModel>text}"/>
<Button icon="sap-icon://delete" `enter code here`press="deleteActivityRow"/>
</cells>
</ColumnListItem>
</items>
<columns>
<Column>
<header>
<Label text="Activity"/>
</header>
</Column>
<Column>
<header>
<Label text="Object"/>
</header>
</Column>
<Column>
<header>
<Label text="Details"/>
</header>
</Column>
<Column/>
</columns>
</Table>
我把Select的selectedKey
属性绑定到selectedEmpNo和selectedMobNo。由于双向绑定,无论用户选择哪个项目select,其密钥都将存储在模型中。
添加了一个按钮,getMeData
将在控制台中打印数据。
XML代码:
<Button text='getData' press='getData'/>
<Table noDataText="No Activity Data" items="{oModel>/result}">
<items>
<ColumnListItem type="Active">
<cells>
<Select xmlns="sap.m" items="{oModel>results1}" selectedKey='{oModel>selectedEmpNo}'><!--Notice selectedkey bind here -->
<!--<items>-->
<core:Item key="{oModel>empno}" text="{oModel>empno}"/>
<!--</items>-->
</Select>
<Select xmlns="sap.m" items="{oModel>results1}" selectedKey='{oModel>selectedMobNo}'><!--Notice selectedkey bind here -->
<!--Notice selectedkey bind here -->
<!--<items>-->
<core:Item key="{oModel>mobno}" text="{oModel>mobno}"/>
<!--</items>-->
</Select>
<Input value="{oModel>text}"/>
<Button icon="sap-icon://delete" press="deleteActivityRow"/>
</cells>
</ColumnListItem>
</items>
<columns>
<Column>
<header>
<Label text="Activity"/>
</header>
</Column>
<Column>
<header>
<Label text="Object"/>
</header>
</Column>
<Column>
<header>
<Label text="Details"/>
</header>
</Column>
<Column/>
</columns>
</Table>
控制器:
我的虚拟数据:
var data = {
result: [{
text: 'text1',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text2',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text3',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text4',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text5',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}]
};
var oModel = new sap.ui.model.json.JSONModel(data);
this.getView().setModel(oModel, 'oModel');
获取数据函数:
getData: function () {
console.log(this.getView().getModel('oModel').getData());
}
在这里,您不需要获取 table Id 并循环遍历 table 的项目。但是,正如我之前提到的,如果您仍然需要验证单个元素,您仍然需要循环遍历模型中的数据。
希望对您有所帮助。
你可以这样做:
将 selectedKey 属性 设置为 Select 控件,然后在需要时检索它
<Select xmlns="sap.m" items="{oModel>results1}" selectedKey="{oModel>selectedKey}">
<!--<items>-->
<core:Item key="{oModel>empno}" text="{oModel>empno}"/>
<!--</items>-->
</Select>
因此,在您的 deleteActivityRow 方法中,您可以执行类似
的操作
deleteActivityRow: function(oEvent) {
var oModel = oEvent.getParameter("listItem").getBindingContext("oModel");
var selectedKey = oModel.getObject().selectedKey;
// use the selectedValue as you want
}
假设我们有 Sap.m Table。我们将值绑定到 Sap.m.Select。 那么从 select 标签获取 selected 值的标准方法是什么。
我浏览了很多博客,我发现在这种情况下每个人都使用 for 循环来获取值。
我不想为 table 使用 id。
<Table noDataText="No Activity Data" items="{oModel>/result}">
<items>
<ColumnListItem type="Active">
<cells>
<Select xmlns="sap.m" items="{oModel>results1}">
<!--<items>-->
<core:Item key="{oModel>empno}" text="{oModel>empno}"/>
<!--</items>-->
</Select>
<Select xmlns="sap.m" items="{oModel>results1}">
<!--<items>-->
<core:Item key="{oModel>mobno}" text="{oModel>mobno}"/>
<!--</items>-->
</Select>
<Input value="{oModel>text}"/>
<Button icon="sap-icon://delete" `enter code here`press="deleteActivityRow"/>
</cells>
</ColumnListItem>
</items>
<columns>
<Column>
<header>
<Label text="Activity"/>
</header>
</Column>
<Column>
<header>
<Label text="Object"/>
</header>
</Column>
<Column>
<header>
<Label text="Details"/>
</header>
</Column>
<Column/>
</columns>
</Table>
我把Select的
selectedKey
属性绑定到selectedEmpNo和selectedMobNo。由于双向绑定,无论用户选择哪个项目select,其密钥都将存储在模型中。添加了一个按钮,
getMeData
将在控制台中打印数据。
XML代码:
<Button text='getData' press='getData'/>
<Table noDataText="No Activity Data" items="{oModel>/result}">
<items>
<ColumnListItem type="Active">
<cells>
<Select xmlns="sap.m" items="{oModel>results1}" selectedKey='{oModel>selectedEmpNo}'><!--Notice selectedkey bind here -->
<!--<items>-->
<core:Item key="{oModel>empno}" text="{oModel>empno}"/>
<!--</items>-->
</Select>
<Select xmlns="sap.m" items="{oModel>results1}" selectedKey='{oModel>selectedMobNo}'><!--Notice selectedkey bind here -->
<!--Notice selectedkey bind here -->
<!--<items>-->
<core:Item key="{oModel>mobno}" text="{oModel>mobno}"/>
<!--</items>-->
</Select>
<Input value="{oModel>text}"/>
<Button icon="sap-icon://delete" press="deleteActivityRow"/>
</cells>
</ColumnListItem>
</items>
<columns>
<Column>
<header>
<Label text="Activity"/>
</header>
</Column>
<Column>
<header>
<Label text="Object"/>
</header>
</Column>
<Column>
<header>
<Label text="Details"/>
</header>
</Column>
<Column/>
</columns>
</Table>
控制器:
我的虚拟数据:
var data = {
result: [{
text: 'text1',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text2',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text3',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text4',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}, {
text: 'text5',
selectedEmpNo: undefined,
selectedMobNo: undefined,
results1: [{
empno: '',
mobno: ''
}, {
empno: 'EMP1',
mobno: 'Mob1'
}, {
empno: 'EMP2',
mobno: 'Mob2'
}, {
empno: 'EMP3',
mobno: 'Mob3'
}, {
empno: 'EMP4',
mobno: 'Mob4'
}]
}]
};
var oModel = new sap.ui.model.json.JSONModel(data);
this.getView().setModel(oModel, 'oModel');
获取数据函数:
getData: function () {
console.log(this.getView().getModel('oModel').getData());
}
在这里,您不需要获取 table Id 并循环遍历 table 的项目。但是,正如我之前提到的,如果您仍然需要验证单个元素,您仍然需要循环遍历模型中的数据。
希望对您有所帮助。
你可以这样做:
将 selectedKey 属性 设置为 Select 控件,然后在需要时检索它
<Select xmlns="sap.m" items="{oModel>results1}" selectedKey="{oModel>selectedKey}">
<!--<items>-->
<core:Item key="{oModel>empno}" text="{oModel>empno}"/>
<!--</items>-->
</Select>
因此,在您的 deleteActivityRow 方法中,您可以执行类似
的操作deleteActivityRow: function(oEvent) {
var oModel = oEvent.getParameter("listItem").getBindingContext("oModel");
var selectedKey = oModel.getObject().selectedKey;
// use the selectedValue as you want
}