SAP UI5-如何基于行状态禁用sap.m.Table多选表中的行

2022-03-09 00:00:00 javascript sapui5

我有一点棘手的问题。我要禁用行选择为sap.m.Table。但该表在Panel内容中可用

<VBox items="{dataModel>/Products}">
   <Panel expandable="true" id="testPanel" expanded="false" width="auto" class="sapUiResponsiveMargin">
      <headerToolbar>
         <Toolbar style="Clear">
            <Text text="{dataModel>productText}"></Text>
         </Toolbar>
      </headerToolbar>
      <content>
         <Table id="productsTable" items="{dataModel>productsList}" id="skillsTable" visible="true" sticky="ColumnHeaders"
            mode="MultiSelect">
            <columns>
               <Column>
                  <Text text="Product Name"/>
               </Column>
               <Column>
                  <Text text="Product No"/>
               </Column>
               <Column>
                  <Text text="Asset"/>
               </Column>
               <Column>
                  <Text text="Check Duplicate"/>
               </Column>
            </columns>
            <items>
               <ColumnListItem >
                  <cells>
                     <Text text="{dataModel>productName}"/>
                     <Text text="{dataModel>productNo}"/>
                     <Text text="{dataModel>asset}"/>
                     <Text text="{dataModel>checkDuplicate}"/>
                  </cells>
               </ColumnListItem>
            </items>
         </Table>
      </content>
   </Panel>
</VBox> 

如果您看到上面的代码,有3点. 1)VBOX拥有一系列产品 2)VBox内部有面板 3)在Panel内部,在Panel Content中,我已经给出了sap.m.Table,意思是可能会根据后台的数据生成多个表。

现在我的要求是:如何根据checkDuplicate中的布尔值禁用行?

下面是我的控制器逻辑,我正在尝试.

var tbl = self.getView().byId('productsTable');
var header = tbl.$().find('thead');
var selectAllCb = header.find('.sapMCb');
selectAllCb.remove();

tbl.getItems().forEach(function (r) {
    var obj = r.getBindingContext("dataModel").getObject();
    var oStatus = obj.checkDuplicate;
    var cb = r.$().find('.sapMCb');
    var oCb = sap.ui.getCore().byId(cb.attr('id'));
    if (oStatus == "true") {
        oCb.setEnabled(true);
    } else {
        oCb.setEnabled(false);
    }
});
上述逻辑的问题是,如果只有一个表,那么基于表id,我可以获得行数据,并且可以禁用该行。但这里将动态生成多个表,因此我无法给出表的ID。

是否有人可以帮助我如何禁用基于checkDuplicate布尔值的行?

提前感谢您


解决方案

将事件modelContextChange的事件侦听器添加到您的表中。

更改此对象的模型或上下文时激发(通过调用setModel/setBindingContext或由于传播)

<Table id="productsTable" 
       modelContextChange=".onModelContextChange"
       items="{dataModel>productsList}"
       sticky="ColumnHeaders"
       mode="MultiSelect"
>
...
</Table>

该事件包含当前表的参数id。这样,您就可以通过其完整的id检索当前表,并在稍作更改的情况下重用您的代码。

onModelContextChange: function(oEvent) {
    var sId = oEvent.getParameter("id");
    var tbl = sap.ui.getCore().byId(sId);
    var header = tbl.$().find('thead');
    var selectAllCb = header.find('.sapMCb');
    selectAllCb.remove();

    tbl.getItems().forEach(function (r) {
        var obj = r.getBindingContext("dataModel").getObject();
        var oStatus = obj.checkDuplicate; 
        var cb = r.$().find('.sapMCb');
        var oCb = sap.ui.getCore().byId(cb.attr('id'));
        if (oStatus == "true") {
            oCb.setEnabled(true);
        } else {
            oCb.setEnabled(false);
        }
    });
}

相关文章