我尝试在openui5表格列中创建自定义排序选项(我知道sap有一个排序和过滤属性,但我不想使用它,因为我已经自定义了表格列(为过滤列添加了文本框)如果我使用默认排序属性,我的自定义过滤器将无法工作)。所以我采取了以下方法。
现在问题是,如果我选择自定义列文本框,则排序下拉菜单正在打开。如果双击该列文本框,我可以筛选列值。我的要求是,如果用户点击一列,它必须按升序或降序排序。当用户点击列时,我不想显示将升序或降序排序为列表值的选项。默认用户第一次单击列时应按升序排序,以便第二次点击降序,如切换。我已添加下面的代码段供您参考。
createContent: function(oController) {
jQuery.sap.require("sap.ui.core.util.Export");
jQuery.sap.require("sap.ui.core.util.ExportTypeCSV");
var oExportlink = new sap.ui.commons.Link({
text: "Export",
press: function() {
// Export();
var exp = oTable.exportData({
exportType: new sap.ui.core.util.ExportTypeCSV()
}).saveFile('sample').always(function() {
this.destroy();
});
}
}).placeAt("content");
var oTable = new sap.ui.table.Table("trans1", {
visibleRowCount: 11,
// firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.None,
navigationMode: sap.ui.table.NavigationMode.Paginator,
//fixedColumnCount: 2
});
//Define Columns to table
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.CheckBox().attachChange(function(oEvent) {
selectedAllRows('checked');
deSelectAllRows('unchecked');
}),
template: new sap.ui.commons.CheckBox({
checked: '{checked}'
}).attachChange(
function(oEvent) {
var selectedrowIndx = this.getParent().getIndex();
oTable.setSelectedIndex(selectedrowIndx);
}
),
width: "30px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "View Transaction Details"
}),
template: new sap.ui.commons.Link({
tooltip: "this is test",
text: "Details",
press: function() {
alert("view details");
}
}),
sortProperty: "details",
width: "50px"
}));
var oColumn = new sap.ui.table.Column("idnum", {
// label:new sap.ui.commons.Label({text:"ID"}),
label: new customcontrol.columnTextfield({
text: "ID",
id: "idnumber"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "ID"),
sortProperty: "ID",
width: "50px"
});
oTable.addColumn(oColumn);
addColumnSorterAndFilter(oColumn);
var oColumn = new sap.ui.table.Column("product_name", {
// label:new sap.ui.commons.Label({text:"Product Name"}),
label: new customcontrol.columnTextfield({
text: "Product Name",
id: "Name"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "Name"),
sortProperty: "Name",
width: "50px"
});
oTable.addColumn(oColumn);
addColumnSorterAndFilter(oColumn);
var oColumn = new sap.ui.table.Column("prod_description", {
// label:new sap.ui.commons.Label({text:"Description"}),
label: new customcontrol.columnTextfield({
text: "description",
id: "Description"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "Descri"),
sortProperty: "Description",
width: "50px"
});
oTable.addColumn(oColumn);
addColumnSorterAndFilter(oColumn);
//Create Model for and bind into table
var oTableModel = new sap.ui.model.json.JSONModel();
jQuery.ajax({
url: serviceurl,
dataType: "json",
success: function(data, textStatus, jqXHR) {
oTableModel.setData({
data: data.value
});
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
oTable.setModel(oTableModel);
oTableModel.getData();
oTable.bindRows("/data");
oTable.placeAt('content');
/*Function for selecting all rows start here*/
function selectedAllRows(checkKey) {
var model = oTable.getModel();
var rowpath = oTable.getBindingInfo('rows').path;
var rows = model.getProperty(rowpath);
var start = oTable.getFirstVisibleRow();
var end = Math.min(start + oTable.getVisibleRowCount(), rows.length);
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
row[checkKey] = (i >= start && i < end);
}
oTable.invalidate();
}
/*Function for selecting all rows ending here*/
/*Function for custom sorting with menu starting here*/
function addColumnSorterAndFilter(oColumn) {
var oTable = oColumn.getParent();
var oCustomMenu = new sap.ui.commons.Menu();
oCustomMenu.addItem(new sap.ui.commons.MenuItem({
text: 'sort ascending',
icon: "sap-icon://sort-ascending",
select: function() {
var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), false);
oTable.getBinding("rows").sort(oSorter);
for (var i = 0; i < oTable.getColumns().length; i++)
oTable.getColumns()[i].setSorted(false);
oColumn.setSorted(true);
oColumn.setSortOrder(sap.ui.table.SortOrder.Ascending);
}
}));
oCustomMenu.addItem(new sap.ui.commons.MenuItem({
text: 'sort desc',
icon: "sap-icon://sort-descending",
select: function(oControlEvent) {
var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), true);
oTable.getBinding("rows").sort(oSorter);
for (var i = 0; i < oTable.getColumns().length; i++)
oTable.getColumns()[i].setSorted(false);
oColumn.setSorted(true);
oColumn.setSortOrder(sap.ui.table.SortOrder.Descending);
}
}));
oColumn.setMenu(oCustomMenu);
return oColumn;
}
/*Function for custom sorting with menu ending here*/
columnTextfield.js
sap.ui.core.Control.extend("customcontrol.columnTextfield", {
metadata: {
properties: {
"text": "string",
"id": "string"
},
events: {
"select": {}
}
},
init: function() {
},
renderer: {
render: function(oRm, oControl) {
oRm.write('<div style="width:100%";>');
oRm.write('<span class="custom_Filter_Column">');
oRm.writeEscaped(oControl.getText());
oRm.write('</span>');
oRm.write('<br>');
oRm.write('<input id="' + oControl.getId() + '" type="text" style="width:100%;">');
// oRm.write('<input id="txtFilter" type="text" style="width:100%;">');
oRm.write('</div>');
}
}
});
任何人都可以帮我这个吗?