在我的view.xml文件中:
<html:div class="container-fluid">
<html:div class="row">
<Table id="ConnectorModuleTable"
items="{
path: '/datalist'}">
<columns>
<Column ><Text text="Connector Module"/></Column>
<Column ><Text text="Setting A"/></Column>
<Column ><Text text="Setting B"/></Column>
<Column ><Text text="Custom Pin"/></Column>
<Column ><Text text="Actions"/></Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Connectormodule}" wrapping="false" />
<Text text="{settingA}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
</cells>
</ColumnListItem>
</items>
</Table>
</html:div>
</html:div>
我正在尝试拖放此表的行
我已将文档中显示为列表的链接称为:Documentation example link here
我对控制器中的表应用的相同为:
attachDragAndDrop: function () {
var oList = this.byId("MyTable");
oList.addDragDropConfig(new DragInfo({
sourceAggregation: "items"
}));
oList.addDragDropConfig(new DropInfo({
targetAggregation: "items",
dropPosition: "Between",
dropLayout: "Vertical",
drop: this.onDrop.bind(this)
}));
},
onDrop: function (oInfo) {
var oDragged = oInfo.getParameter("draggedControl"),
oDropped = oInfo.getParameter("droppedControl"),
sInsertPosition = oInfo.getParameter("dropPosition"),
oDraggedParent = oDragged.getParent(),
oDroppedParent = oDropped.getParent(),
oDragModel = oDraggedParent.getModel(),
oDropModel = oDroppedParent.getModel(),
oDragModelData = oDragModel.getData(),
oDropModelData = oDropModel.getData(),
iDragPosition = oDraggedParent.indexOfItem(oDragged),
iDropPosition = oDroppedParent.indexOfItem(oDropped);
// remove the item
var oItem = oDragModelData[iDragPosition];
oDragModelData.splice(iDragPosition, 1);
if (oDragModel === oDropModel && iDragPosition < iDropPosition) {
iDropPosition--;
}
// insert the control in target aggregation
if (sInsertPosition === "Before") {
oDropModelData.splice(iDropPosition, 0, oItem);
} else {
oDropModelData.splice(iDropPosition + 1, 0, oItem);
}
if (oDragModel !== oDropModel) {
oDragModel.setData(oDragModelData);
oDropModel.setData(oDropModelData);
} else {
oDropModel.setData(oDropModelData);
}
},
initData: function (datalist) {
this.byId("MyTable").setModel(new JSONModel([
datalist
]));
}
这里datalist
具有JSON中的所有行数据(供参考)
但是这不起作用,任何帮助或指导链接都值得赞赏
我在您的onDrop()中使用了以下视图,并且可以正常工作。您能描述什么不起作用吗?
<Table id="MyTable" items="{/}">
<columns>
<Column ><Text text="Connector Module"/></Column>
<Column ><Text text="Setting A"/></Column>
<Column ><Text text="Setting B"/></Column>
</columns>
<dragDropConfig>
<dnd:DragDropInfo
sourceAggregation="items"
targetAggregation="items"
dropPosition="Between"
drop=".onDrop"/>
</dragDropConfig>
<items>
<ColumnListItem>
<cells>
<Text text="{Connectormodule}" wrapping="false" />
<Text text="{settingA}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
</cells>
</ColumnListItem>
</items>
</Table>
您可以在原始表格中看到数据吗?模型的设置不正确:JSONModel构造函数需要一个对象,而不是initData
函数中列出的数组。对我来说似乎是一个有约束力的问题...
我只是尝试如下修改您的代码,并且一切正常:
onDrop: function (oInfo) {
var oDragged = oInfo.getParameter("draggedControl"),
oDropped = oInfo.getParameter("droppedControl"),
sInsertPosition = oInfo.getParameter("dropPosition"),
oDraggedParent = oDragged.getParent(),
oDroppedParent = oDropped.getParent(),
oDragModel = oDraggedParent.getModel(),
oDropModel = oDroppedParent.getModel(),
oDragModelData = oDragModel.getData(),
oDropModelData = oDropModel.getData(),
iDragPosition = oDraggedParent.indexOfItem(oDragged),
iDropPosition = oDroppedParent.indexOfItem(oDropped);
// remove the item
var oItem = oDragModelData.datalist[iDragPosition];
oDragModelData.datalist.splice(iDragPosition, 1);
if (oDragModel === oDropModel && iDragPosition < iDropPosition) {
iDropPosition--;
}
// insert the control in target aggregation
if (sInsertPosition === "Before") {
oDropModelData.datalist.splice(iDropPosition, 0, oItem);
} else {
oDropModelData.datalist.splice(iDropPosition + 1, 0, oItem);
}
if (oDragModel !== oDropModel) {
oDragModel.setData(oDragModelData);
oDropModel.setData(oDropModelData);
} else {
oDropModel.setData(oDropModelData);
}
},
initData: function (datalist) {
//just an example
var oData = {
datalist: [{
Connectormodule: "one",
settingA: "one",
settingB: "one"
}, {
Connectormodule: "two",
settingA: "two",
settingB: "two"
}, {
Connectormodule: "three",
settingA: "three",
settingB: "three"
}]
};
var oModel = new sap.ui.model.json.JSONModel(oData);
this.byId("ConnectorModuleTable").setModel(oModel);
},