Sapui5 如何使列表项可重新排序？_Sapui5

Sapui5 如何使列表项可重新排序？

sapui5

Sapui5 如何使列表项可重新排序？,sapui5,Sapui5,我必须在SAPUI5中创建一个表（sap.m.table），在该表中可以删除、重新排序行，然后单击以打开一个对话框。到目前为止，我已经发现我可以将表设置为mode=“delete”并将ColumnListItem设置为type=“Navigation”，以实现删除行并单击行以同时打开对话框：是否可以将函数添加到重新排列行中？您可以在视图模型中使用“editModeEnabled”变量将表格模式更改为“SingleSelectLeft”，并显示/隐藏一些按钮。然后在“编辑模式”中，使用一些按钮

我必须在SAPUI5中创建一个表（

sap.m.table

），在该表中可以删除、重新排序行，然后单击以打开一个对话框。到目前为止，我已经发现我可以将表设置为

mode=“delete”

并将ColumnListItem设置为

type=“Navigation”

，以实现删除行并单击行以同时打开对话框：

是否可以将函数添加到重新排列行中？

您可以在视图模型中使用“editModeEnabled”变量将表格模式更改为“SingleSelectLeft”，并显示/隐藏一些按钮。然后在“编辑模式”中，使用一些按钮插入和删除表中的任意项目


带XmlView的MVC
//定义新的（简单的）控制器类型
sap.ui.controller（“my.own.controller”{
onInit:function（）{
变量oViewModelData={
editModeEnabled:false
};
var oViewModel=new sap.ui.model.json.JSONModel（）；
this.getView（）.setModel（oViewModel，“viewModel”）
},
onEditPressed:function（）{
this.getView（）.getModel（“viewModel”）.setProperty（“/editModeEnabled”，true）；
},
onFinishEditPressed:function（）{
this.getView（）.getModel（“viewModel”）.setProperty（“/editModeEnabled”，false）；
},
onUpPressed:功能（oEvent）{
var oSelectedItem=this.getView（）.byId（“myTable”）.getSelectedItem（）；
var oCurrentIndex=this.getView（）.byId（“myTable”）.indexOfItem（oSelectedItem）；
如果（眼流指数>0）{
this.getView（）.byId（“myTable”）.removietem（oSelectedItem）；
this.getView（）.byId（“myTable”）.insertItem（oSelectedItem，oCurrentIndex-1）；
}
},
onDownPressed：功能（oEvent）{
var oSelectedItem=this.getView（）.byId（“myTable”）.getSelectedItem（）；
var oCurrentIndex=this.getView（）.byId（“myTable”）.indexOfItem（oSelectedItem）；
if（oCurrentIndex

我的问题是我不能使用拖放，因为在某些情况下，表中的所有列都充满了输入字段，用户没有任何地方可以单击来启动拖放。我正在尝试向每一行添加按钮，可以用来上下移动行。这是一个很好的处理方法。谢谢

<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta charset="utf-8">

  <title>MVC with XmlView</title>

  <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>


  <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

  <!-- define a new (simple) View type as an XmlView
         - using data binding for the Button text
         - binding a controller method to the Button's "press" event
         - also mixing in some plain HTML
         note: typically this would be a standalone file -->

  <script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
      <Page>
        <Table id="myTable" mode="{= ${viewModel>/editModeEnabled} ? 'SingleSelectLeft' : 'SingleSelectMaster'}" items="{path:'json>/rows'}">
          <headerToolbar>
            <Toolbar>
              <ToolbarSpacer></ToolbarSpacer>
              <Button text="Edit" press="onEditPressed" visible="{= ${viewModel>/editModeEnabled} ? false : true}"></Button>
              <Button icon="sap-icon://slim-arrow-down" press="onDownPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
              <Button icon="sap-icon://slim-arrow-up" press="onUpPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
              <Button text="Finish" press="onFinishEditPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
            </Toolbar>
          </headerToolbar>
          <columns>
            <Column>
              <Text text="Column1" />
            </Column>
            <Column>
              <Text text="Column2" />
            </Column>
          </columns>
          <items>
            <ColumnListItem>
              <Text text="{json>col1}"></Text>
              <Text text="{json>col2}"></Text>
            </ColumnListItem>
          </items>
        </Table>
      </Page>
    </mvc:View>
  </script>


  <script>
    // define a new (simple) Controller type
    sap.ui.controller("my.own.controller", {
      onInit: function(){
        var oViewModelData = {
          editModeEnabled: false
        };
        var oViewModel = new sap.ui.model.json.JSONModel();
        this.getView().setModel(oViewModel, "viewModel")
      },

      onEditPressed: function() {
        this.getView().getModel("viewModel").setProperty("/editModeEnabled", true);
      },

      onFinishEditPressed: function(){
        this.getView().getModel("viewModel").setProperty("/editModeEnabled", false);
      },

      onUpPressed: function(oEvent){
        var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
        var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
        if(oCurrentIndex > 0){
          this.getView().byId("myTable").removeItem(oSelectedItem);
          this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex-1);

        }
      },

      onDownPressed: function(oEvent){
        var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
        var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
        if(oCurrentIndex < this.getView().byId("myTable").getItems().length){
          this.getView().byId("myTable").removeItem(oSelectedItem);
          this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex+1);

        }
      }


    });



    /*** THIS IS THE "APPLICATION" CODE ***/
    // create a Model and assign it to the View

    //Using a small JSON model
    var myData = {
      rows: [
        {
          col1: "Row1Col1",
          col2: "Row1Col2",
        },{
          col1: "Row2Col1",
          col2: "Row2Col2",
        },{
          col1: "Row3Col1",
          col2: "Row3Col2",
        }
      ]
    };
    var oJSONModel = new sap.ui.model.json.JSONModel(myData);
    // instantiate the View
    var myView = sap.ui.xmlview({
      viewContent: jQuery('#view1').html()
    }); // accessing the HTML inside the script tag above
    // Set the Models
    myView.setModel(oJSONModel, 'json');

    myView.placeAt('content');
  </script>

</head>

<body id='content' class='sapUiBody'>
</body>

</html>