关于sapui5：如何拖放表格的行

How to drag and drop rows of a table

在我的 view.xml 文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<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>

我正在尝试拖放此表的行

我已将显示列表的文档中的链接称为：
此处的文档示例链接

我对控制器中的表应用的相同：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

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 格式的所有行数据(供参考)

但这不起作用，感谢任何帮助或指导链接

你能看到原始表格中的数据吗？
模型设置不正确：JSONModel 构造函数需要一个对象，而不是 initData 函数中列出的数组。这对我来说似乎是一个绑定问题...

我只是尝试如下修改您的代码，一切正常：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

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);
},