问题描述
我是SAPUI5的新手。
我用过桌子- 拖放 我举一个例子 https://sapui5.hana.ondemand.com/#/entity/sap.ui.table.Table/sample/sap.ui.table.sample.DnD/ 这些按钮对我不起作用。 ：/
这是我写的代码： XML
<mvc:View controllerName="Ztest.Ztest.controller.View3"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns:m="sap.m" xmlns="sap.ui.table" xmlns:dnd="sap.ui.core.dnd" xmlns:c="sap.ui.core" height="100%">
<m:Shell id="shell">
<m:App id="app">
<m:pages>
<m:Page id="page" title="{i18n>title}" showHeader="false"
enableScrolling="false"
class="sapUiContentPadding">
<m:content>
<m:HBox renderType="Bare">
<Table
id="table1"
selectionMode="Single"
ariaLabelledBy="title"
rows="{
path: '/zGetProductsSet',filters: {path: 'Prodid',operator: 'EQ',value1: '0'}
}"
visibleRowCount="15">
<extension>
<m:OverflowToolbar id="infobar">
<m:Title id="title" text="Available Products"/>
</m:OverflowToolbar>
</extension>
<columns>
<Column
sortProperty="Name"
filterProperty="Name">
<m:Text text="Name" />
<template>
<m:Text text="{Prodname}" wrapping="false" />
</template>
</Column>
<Column
sortProperty="Proddescription"
filterProperty="Proddescription">
<m:Text text="description" />
<template>
<m:Text text="{Proddescription}" wrapping="false" />
</template>
</Column>
<Column
sortProperty="Prodprice"
filterProperty="Prodprice">
<m:Text text="price" />
<template>
<m:Text text="{Prodprice}" wrapping="false" />
</template>
</Column>
<Column
sortProperty="Prodcompany"
filterProperty="Prodcompany">
<m:Text text="company" />
<template>
<m:Text text="{Prodcompany}" wrapping="false" />
</template>
</Column>
<Column
sortProperty="Prodweight"
filterProperty="Prodweight">
<m:Text text="weight" />
<template>
<m:Text text="{Prodweight}" wrapping="false" />
</template>
</Column>
</columns>
<dragDropConfig>
<dnd:DragInfo
groupName="movetoTable2"
sourceAggregation="rows"
dragStart="onDragStart" />
<dnd:DropInfo
groupName="movetoTable1"
drop="onDropTable1" />
</dragDropConfig>
</Table>
<m:VBox justifyContent="Center" class="sapUiTinyMarginBeginEnd">
<m:Button
class="sapUiTinyMarginBottom"
icon="sap-icon://navigation-right-arrow"
tooltip="Move to selected"
press="movetoTable2"/>
<m:Button
icon="sap-icon://navigation-left-arrow"
tooltip="Move to available"
press="movetoTable1"/>
</m:VBox>
<Table
id="table2"
selectionMode="Single"
ariaLabelledBy="title2"
rows="{
path: '/zGetProductsSet',operator: 'GT',value1: '0'},sorter: {path: 'Prodid',descending: false}
}"
visibleRowCount="15"
noData="Please drag-and-drop products here.">
<extension>
<m:OverflowToolbar>
<m:Title id="title2" text="Selected Products"/>
<m:ToolbarSpacer/>
<m:Button
icon="sap-icon://navigation-up-arrow"
tooltip="Move up"
press="moveUp"/>
<m:Button
icon="sap-icon://navigation-down-arrow"
tooltip="Move down"
press="moveDown"/>
</m:OverflowToolbar>
</extension>
<columns>
<Column>
<m:Text text="Name" />
<template>
<m:Text text="{Prodname}" wrapping="false" />
</template>
</Column>
<Column>
<m:Text text="price" />
<template>
<m:Text text="{Prodprice}" wrapping="false" />
</template>
</Column>
<Column>
<m:Text text="company" />
<template>
<m:Text text="{Prodcompany}" wrapping="false" />
</template>
</Column>
<Column>
<m:Text text="quantity" />
<template>
<m:Input onmousedown="updateQuantity">
</m:Input>
</template>
</Column>
</columns>
<dragDropConfig>
<dnd:DragInfo
groupName="movetoTable1"
sourceAggregation="rows"
dragStart="onDragStart" />
<dnd:DropInfo
groupName="movetoTable2"
targetAggregation="rows"
dropPosition="Between"
drop="onDropTable2" />
<dnd:DragDropInfo
sourceAggregation="rows"
targetAggregation="rows"
dropPosition="Between"
dragStart="onDragStart"
drop="onDropTable2" />
</dragDropConfig>
</Table>
</m:HBox>
</m:content>
</m:Page>
</m:pages>
</m:App>
</m:Shell>
</mvc:View>
JS
sap.ui.define([
"sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel","sap/m/Messagetoast","sap/m/ToolbarSpacer","sap/ui/table/Row","jquery.sap.sjax"
],function (Controller,JSONModel,Messagetoast,ToolbarSpacer,TableRow,jQuery) {
"use strict";
return Controller.extend("Ztest.Ztest.controller.View3",{
onInit: function () {
var oView = this.getView();
//set explored app's demo model on this sample
this.oProductsModel = this.initSampleProductsModel();
oView.setModel(this.oProductsModel);
/*sap.ui.require(["sap/ui/table/sample/TableExampleUtils"],function(TableExampleUtils) {
var oTb = oView.byId("infobar");
oTb.addContent(new ToolbarSpacer());
// oTb.addContent(TableExampleUtils.createInfoButton("sap/ui/table/sample/DnD"));
},function(oError){/*ignore*/
},onExit: function() {
this.oProductsModel.destroy();
},config: {
initialprodrank: 0,defaultprodrank: 1024,prodrankAlgorithm: {
Before: function(iprodrank) {
return iprodrank + 1024;
},Between: function(iprodrank1,iprodrank2) {
// limited to 53 rows
return (iprodrank1 + iprodrank2) / 2;
},After: function(iprodrank) {
return iprodrank / 2;
}
}
},initSampleProductsModel: function() {
/* var oData = jQuery.sap.sjax({
url: sap.ui.require.toUrl("sap/ui/demo/mock/products.json"),dataType: "json"
}).data;
// prepare and initialize the prodrank property
oData.ProductCollection.forEach(function(oProduct) {
oProduct.prodrank = this.config.initialprodrank;
},this);
var oModel = new JSONModel();
oModel.setData(oData);
return oModel;*/
var that = this;
var sServiceUrl = this.getServiceUrl();
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,true);
oModel.read('/zGetProductsSet',{success: function(data) {
console.log('success');
},error : function(event) {
console.log('error');
}
})
/*
oModel.read('/getallproductsSet').forEach(function(blabla) {
blabla.prodrank = this.config.initialprodrank;
},this);
*/
//this.getView().setModel(this.oModel);
return oModel;
},getServiceUrl : function() {
var sUrl;
var sPath="/sap/opu/odata/sap/Z_SALESAGENT_SRV";
sUrl=sPath;
return sUrl;
},getSelectedRowContext: function(sTableId,fnCallback) {
var oTable = this.byId(sTableId);
var iSelectedindex = oTable.getSelectedindex();
if (iSelectedindex === -1) {
Messagetoast.show("Please select a row!");
return;
}
var oSelectedContext = oTable.getContextByIndex(iSelectedindex);
if (oSelectedContext && fnCallback) {
fnCallback.call(this,oSelectedContext,iSelectedindex,oTable);
}
return oSelectedContext;
},onDragStart: function(oEvent) {
var oDraggedRow = oEvent.getParameter("target");
var oDragSession = oEvent.getParameter("dragSession");
// keep the dragged row context for the drop action
oDragSession.setComplexData("draggedRowContext",oDraggedRow.getBindingContext());
},onDropTable1: function(oEvent) {
var oDragSession = oEvent.getParameter("dragSession");
var oDraggedRowContext = oDragSession.getComplexData("draggedRowContext");
if (!oDraggedRowContext) {
return;
}
// reset the prodrank property and update the model to refresh the bindings
this.oProductsModel.setProperty("prodrank",this.config.initialprodrank,oDraggedRowContext);
this.oProductsModel.refresh(true);
},movetoTable1: function() {
this.getSelectedRowContext("table2",function(oSelectedRowContext,iSelectedRowIndex,oTable2) {
// reset the prodrank property and update the model to refresh the bindings
this.oProductsModel.setProperty("prodrank",oSelectedRowContext);
this.oProductsModel.refresh(true);
// select the prevIoUs row when there is no row to select
var oNextContext = oTable2.getContextByIndex(iSelectedRowIndex + 1);
if (!oNextContext) {
oTable2.setSelectedindex(iSelectedRowIndex - 1);
}
});
},onDropTable2: function(oEvent) {
var oDragSession = oEvent.getParameter("dragSession");
var oDraggedRowContext = oDragSession.getComplexData("draggedRowContext");
if (!oDraggedRowContext) {
return;
}
var oConfig = this.config;
var iNewprodrank = oConfig.defaultprodrank;
var oDroppedRow = oEvent.getParameter("droppedControl");
if (oDroppedRow && oDroppedRow instanceof TableRow) {
// get the dropped row data
var sDropPosition = oEvent.getParameter("dropPosition");
var oDroppedRowContext = oDroppedRow.getBindingContext();
var iDroppedRowprodrank = oDroppedRowContext.getProperty("prodrank");
var iDroppedRowIndex = oDroppedRow.getIndex();
var oDroppedTable = oDroppedRow.getParent();
// find the new index of the dragged row depending on the drop position
var iNewRowIndex = iDroppedRowIndex + (sDropPosition === "After" ? 1 : -1);
var oNewRowContext = oDroppedTable.getContextByIndex(iNewRowIndex);
if (!oNewRowContext) {
// dropped before the first row or after the last row
iNewprodrank = oConfig.prodrankAlgorithm[sDropPosition](iDroppedRowprodrank);
} else {
// dropped between first and the last row
iNewprodrank = oConfig.prodrankAlgorithm.Between(iDroppedRowprodrank,oNewRowContext.getProperty("prodrank"));
}
}
// set the prodrank property and update the model to refresh the bindings
this.oProductsModel.setProperty("prodrank",iNewprodrank,movetoTable2: function() {
this.getSelectedRowContext("table1",function(oSelectedRowContext) {
var oTable2 = this.byId("table2");
var oFirstRowContext = oTable2.getContextByIndex(0);
// insert always as a first row
var iNewprodrank = this.config.defaultprodrank;
if (oFirstRowContext) {
iNewprodrank = this.config.prodrankAlgorithm.Before(oFirstRowContext.getProperty("prodrank"));
}
this.oProductsModel.setProperty("prodrank",oSelectedRowContext);
this.oProductsModel.refresh(true);
// select the inserted row
oTable2.setSelectedindex(0);
});
},moveSelectedRow: function(sDirection) {
this.getSelectedRowContext("table2",oTable2) {
var iSiblingRowIndex = iSelectedRowIndex + (sDirection === "Up" ? -1 : 1);
var oSiblingRowContext = oTable2.getContextByIndex(iSiblingRowIndex);
if (!oSiblingRowContext) {
return;
}
// swap the selected and the siblings prodrank
var iSiblingRowprodrank = oSiblingRowContext.getProperty("prodrank");
var iSelectedRowprodrank = oSelectedRowContext.getProperty("prodrank");
this.oProductsModel.setProperty("prodrank",iSiblingRowprodrank,oSelectedRowContext);
this.oProductsModel.setProperty("prodrank",iSelectedRowprodrank,oSiblingRowContext);
this.oProductsModel.refresh(true);
// after move select the sibling
oTable2.setSelectedindex(iSiblingRowIndex);
});
},moveUp: function() {
this.moveSelectedRow("Up");
},moveDown: function() {
this.moveSelectedRow("Down");
},updateQuantity: function(){
alert("bubu")
}
});
});
RANK中的某些内容无法更新..
我很高兴获得帮助。 谢谢：）
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）