在SAPUI5中使所选行的单元格可编辑

Question

我得到了一个表格，我需要编辑所选行的2个单元格，我首先使用此代码垃圾自行尝试，因为获取行总是得到0-9的索引，而我的getSelectedIndices得到真正的索引。

var oTable1 = this.byId("table1");
var haveToChange = oTable1.getSelectedIndices();
var rows = oTable1.getRows();
for (i = 0; i < haveToChange.length; i++) {
    var cells = rows[haveToChange[i]].getCells();
    if (cells[10].mProperties.editable == false) {
        cells[10].setEditable(true);
        cells[12].setEditable(true);
        cells[13].setEditable(true);
    }
    else
    {
        cells[10].setEditable(false);
        var getit = cells[10].getValue();


        if (cells[6]._sRenderedValue.indexOf(",") > -1)
        {
            var Woerter = cells[6]._sRenderedValue.split(',');
            var zahl = Woerter[0] + ".";
            for (var i = 1 ; i < Woerter.length; i++) {
                zahl = zahl + Woerter[i];
            }
            if (getit.indexOf(".") > -1)
            {
                var arrays = getit.split(".");
                getit = "";
                for(var i = 0; i<arrays.length; i++)
                {            
                    getit = getit + arrays[i];
                }
            }


            var honorar = parseInt(getit) * parseFloat(zahl);
        }
        else
        {
            var zahl = "";
            if (cells[6]._sRenderedValue.indexOf(".") > -1) {
                var Woerter = cells[6]._sRenderedValue.split('.');
                for ( var i = 0 ; i < Woerter.length; i++) {
                    zahl = zahl + Woerter[i];
                }
                if (getit.indexOf(".") > -1) {
                    var arrays = getit.split(".");
                    getit = "";
                    for (var i = 0; i < arrays.length; i++) {
                        getit = getit + arrays[i];
                    }
                }


            }
            honorar = parseInt(getit) * parseInt(zahl);
        }
        cells[11].setValue(x);
        cells[12].setEditable(false);
        cells[13].setEditable(false);
    }
}

}

其次我试着遵循一些教程，问题是它使完整的行可编辑，但是统计编辑也不在我的行上，所以这无论如何都不会起作用：

var model = this.getView().getModel("jsonmodel");
var rowPath = this.byId("table1").getBindingInfo('rows').path;
var rows = model.getProperty(rowPath);
var haveToChange = this.byId("table1")..getSelectedIndices();
for (x = 0; x < haveToChange.length; x++) {
    for (i = 0; i < rows.length; i++) {
        row = rows[i];
        if (i == haveToChange[x]) {
            row['edit'] = true; // make the selected row editable and rest non editable
        } else {
            row['edit'] = false;
        }
    }
}

那么，如果索引为10，我怎么能让单元格10和12可编辑？

Answer 1

通常，如果您需要修改UI行为（启用/禁用，显示/隐藏等），您应该使用数据绑定的强大功能

在您的情况下，您可以使用表格单元格editable控件的TextField属性在选择时切换编辑/只读状态，在本例中我定义了属性isEnabled：< / p>

<TextField value="{col1}" editable="{isEnabled}" />

这意味着您为表使用JSONModel，因此您可以添加额外的UI特定属性，但由于您要编辑表，因此在这种情况下ODataModel无论如何都没有多大意义; - ）< / em>的

表的rowSelectionChange事件可以调用一个方法然后设置属性，并切换可编辑状态：

toggleEditableFields : function(oEvent) {
    var aIndices = oEvent.getSource().getSelectedIndices(),
        myData = this.getView().getModel().getProperty("/data"),
        that = this;

    // first, set all the isEnabled properties of all records to readonly state
    $.each(myData,function(i, v){
        that.getView().getModel().setProperty("/data/" + v + "/isEnabled", false);
    });
    // then, set all the isEnabled properties of the selected records to editable state
    $.each(aIndices,function(i, v){
        that.getView().getModel().setProperty("/data/" + v + "/isEnabled", true);
    });
}

请参阅此工作示例：使用表的行选择器单击表中的一行或多行，并相应地启用/禁用输入字段的可编辑状态：

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            data : [
                {
                    "col1": "at curabitur vestibulum",
                    "col2": "porttitor pharetra rutrum",
                    "col3": 93,
                    "isEnabled": false
                },
                {
                    "col1": "hendrerit dui fringilla",
                    "col2": "adipiscing suspendisse lorem",
                    "col3": 36,
                    "isEnabled": false
                },
                {
                    "col1": "placerat vel placerat",
                    "col2": "suspendisse quis sit",
                    "col3": 9,
                    "isEnabled": false
                },
                {
                    "col1": "sagittis at sed",
                    "col2": "malesuada aliquam sit",
                    "col3": 26,
                    "isEnabled": false
                },
                {
                    "col1": "donec donec sed",
                    "col2": "dui tempor nunc",
                    "col3": 38,
                    "isEnabled": false
                },
                {
                    "col1": "sed vitae fringilla",
                    "col2": "vestibulum pretium dolor",
                    "col3": 17,
                    "isEnabled": false
                }
            ],
            selectedIndices : [],
        });

        this.getView().setModel(oModel);
    },

    toggleEditableFields : function(oEvent) {
        var aIndices = oEvent.getSource().getSelectedIndices(),
            myData = this.getView().getModel().getProperty("/data"),
            that = this;
        
        $.each(myData,function(i, v){
            that.getView().getModel().setProperty("/data/" + v + "/isEnabled", false);
        });
        $.each(aIndices,function(i, v){
            that.getView().getModel().setProperty("/data/" + v + "/isEnabled", true);
        });
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<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-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.ui.commons"
      xmlns:l="sap.ui.commons.layout"
      xmlns:t="sap.ui.table"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <t:Table id="tbl" rows="{/data}" selectionMode="MultiToggle" navigationMode="Paginator" rowSelectionChange="toggleEditableFields" visibleRowCount="{/data/length}">
            <t:columns>
                <t:Column>
                    <t:label><Label text="col1" /></t:label>
                    <t:template><TextField value="{col1}" editable="{isEnabled}" /></t:template>
                </t:Column>
                <t:Column>
                    <t:label><Label text="col2" /></t:label>
                    <t:template><TextField value="{col2}" editable="{isEnabled}" /></t:template>
                </t:Column>
            </t:columns>
        </t:Table>
    </mvc:View>
</script>

注意：我使用XMLViews因为我发现这些更容易编写，但同样适用于Javascript视图

Answer 2

由于Table仅为可见行创建控件，因此我不建议直接修改行的控件。如果选择不可见的行（在视图外滚动），则无法修改其控件，因为它们不存在。

相反，我建议在行的模型对象中添加一个属性（仅在onEditRow方法的客户端上）并绑定可编辑的属性。如果未在模型中定义，则使用表达式绑定将值强制为false：

<TextField id="SatzNeu" editable="{= !!${jsonmodel>editable}}" value="{jsonmodel>SatzNeu}" />

Table.getSelectedIndices()返回的索引可用于获取行的绑定上下文，并使用它们获取模型中所选行的路径（jsbin）：

var oTable1 = this.byId("table1");
var haveToChange = oTable1.getSelectedIndices();
haveToChange.forEach(function(index){
  var context = oTable1.getContextByIndex(index);
  var path = context.getPath();
  context.getModel().setProperty(path+"/editable", true);
});  

但如果我做对了，你想让取消选择的行也不可编辑，所以你必须迭代所有项目以适当地禁用/启用（jsbin）：

var oTable1 = this.byId("table1");
var haveToChange = oTable1.getSelectedIndices();
var model = oTable1.getModel("jsonmodel");
var length = model.getProperty("/DLSet/results").length;
for (var i = 0; i<length; i++){
  var path = "/DLSet/results/"+i+"/editable";
  var editable = haveToChange.indexOf(i) >= 0;
  if (model.getProperty(path) != editable) model.setProperty(path, editable);
}

如果您要放弃编辑按钮并使用rowSelectionChange事件更新可编辑/不可编辑事件，您可以使用第一种方法，因为事件会同时为您提供：已选择的行和取消选择的行。