如何拖放 table 的行

Question

在我的 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>

我正在尝试拖放此 table

的行

我从显示列表的文档中引用了 link 作为： Documentation example link here

我在控制器中对 table 进行了同样的应用：

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 中的所有行数据（供参考）

但这没有用，感谢任何帮助或指导link

Answer 1

我将以下视图与您的 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>

Answer 2

你能看到原始数据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);
    },

如何拖放 table 的行

How to drag and drop rows of a table

sapui5