Javascript sapui5-UI5网格表拖放；降什么是等级？

我是SAPUI5的新手

我用过这张桌子- 拖放 我举了一个例子 这些按钮对我不起作用。 :/

这是我写的代码： 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',
                        filters: {path: 'Prodid', 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>

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", this.config.initialprodrank, 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, oDraggedRowContext);
            this.oProductsModel.refresh(true);
        },

        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", iNewprodrank, oSelectedRowContext);
                this.oProductsModel.refresh(true);

                // select the inserted row
                oTable2.setSelectedIndex(0);
            });
        },

        moveSelectedRow: function(sDirection) {
            this.getSelectedRowContext("table2", function(oSelectedRowContext, iSelectedRowIndex, 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")
        }
    });

});