Question

我必须在SAPUI5中创建一个表（sap.m.Table），可以在其中删除，重新排序行并单击以打开对话框。到目前为止，我已经知道可以将Table设置为mode="delete"，将ColumnListItem设置为type="Navigation"，以实现删除行并单击行以同时打开对话框：

是否可以将功能添加到重新排序行？

Answer 1

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

Here a snippet

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

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

1 个答案: