提问
SAPUI5 JavaScript

Sapui5 CustomTreeItem如何向树结构添加项目

2020-09-09 03:20发布

站内问答 / UI5
2493 6 6

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


我在 CustomTreeItem 中遇到问题。 我无法成功显示JSON中的树结构。 但是在点击"添加按钮"时手动添加数据时遇到了问题。

如果我按下 + 按钮时看到上面的图像，则需要在下面添加一个图块。 但是我无法添加，也无法在控制台中看到任何错误。.下面是我的代码...

XML

====== 

 
                                     
                                         
                                             
                                                 
                                                     
                                                 
控制器::

 var selOrgJson = [{
             " text"："部门"，
             "子标题"："生产管理JP"，
             " personName"："桑原原志"，
             "节点"：[{
                 " text"："部门"，
                 "副标题"：" Production JP"，
                 " personName"："川崎刚"
             }，{
                 " text"："部门"，
                 " subheader"：" Planning Scheduling JP"，
                 " personName"："福山Sumire"，
                 "节点"：[{
                     " text"："部门"，
                     "副标题"："计划操作"，
                     " personName"："酒田纯子"
                 }]
             }，{
                 " text"："部门"，
                 "副标题"："日本东北销售办事处"，
                 " personName"：" Emoto Hloronori"
             }，{
                 " text"："部门"，
                 "副标题"："日本东南部销售办事处"，
                 " personName"："铃木彩"
             }，{
                 " text"："部门"，
                 "副标题"："合作伙伴销售JP"，
                 " personName"："桑原敦史"
             }]
         }];

         var selModel = new sap.ui.model.json.JSONModel（）;
         selModel.setData（selOrgJson）;
         this.getView（）。setModel（selModel，" selModel"）;

 addTile：函数（oEvt）{
         var vBox = new sap.m.VBox（）;
         vBox.addStyleClass（" customSelTile"）;
         var hBox = new sap.m.HBox（）;
         var insideVBox = new sap.m.VBox（）;
         insideVBox.addStyleClass（" sapUiTinyMarginTop customTxts"）;
         var headInput = new sap.m.Input（{
             类型："文字"
         }）;
         var subInput = new sap.m.Input（{
             类型："文字"
         }）;
         insideVBox.addItem（headInput）;
         insideVBox.addItem（subInput）;
         hBox.addItem（insideVBox）;
         vBox.addItem（hBox）;
         var button1 = new sap.m.Button（{
             按下：this.addTile，
             图标：" sap-icon：//add"
         }）;
         var button2 = new sap.m.Button（{
             按下：this.removeTile，
             图标：" sap-icon：//less"
         }）;
         hBox.addItem（button1）;
         hBox.addItem（button2）;
         vBox.addItem（hBox）;

     }，

有人可以帮我如何在"添加树"上单击"添加"按钮到 CustomTreeItem 。 如果我的上述方法在控制器方面是错误的，那么请帮助我提供一些替代解决方案。

谢谢。

（22.1 kB）

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


我在 CustomTreeItem 中遇到问题。 我无法成功显示JSON中的树结构。 但是在点击"添加按钮"时手动添加数据时遇到了问题。

如果我按下 + 按钮时看到上面的图像，则需要在下面添加一个图块。 但是我无法添加，也无法在控制台中看到任何错误。.下面是我的代码...

XML

====== 

 
                                     
                                         
                                             
                                                 
                                                     
                                                 
控制器::

 var selOrgJson = [{
             " text"："部门"，
             "子标题"："生产管理JP"，
             " personName"："桑原原志"，
             "节点"：[{
                 " text"："部门"，
                 "副标题"：" Production JP"，
                 " personName"："川崎刚"
             }，{
                 " text"："部门"，
                 " subheader"：" Planning Scheduling JP"，
                 " personName"："福山Sumire"，
                 "节点"：[{
                     " text"："部门"，
                     "副标题"："计划操作"，
                     " personName"："酒田纯子"
                 }]
             }，{
                 " text"："部门"，
                 "副标题"："日本东北销售办事处"，
                 " personName"：" Emoto Hloronori"
             }，{
                 " text"："部门"，
                 "副标题"："日本东南部销售办事处"，
                 " personName"："铃木彩"
             }，{
                 " text"："部门"，
                 "副标题"："合作伙伴销售JP"，
                 " personName"："桑原敦史"
             }]
         }];

         var selModel = new sap.ui.model.json.JSONModel（）;
         selModel.setData（selOrgJson）;
         this.getView（）。setModel（selModel，" selModel"）;

 addTile：函数（oEvt）{
         var vBox = new sap.m.VBox（）;
         vBox.addStyleClass（" customSelTile"）;
         var hBox = new sap.m.HBox（）;
         var insideVBox = new sap.m.VBox（）;
         insideVBox.addStyleClass（" sapUiTinyMarginTop customTxts"）;
         var headInput = new sap.m.Input（{
             类型："文字"
         }）;
         var subInput = new sap.m.Input（{
             类型："文字"
         }）;
         insideVBox.addItem（headInput）;
         insideVBox.addItem（subInput）;
         hBox.addItem（insideVBox）;
         vBox.addItem（hBox）;
         var button1 = new sap.m.Button（{
             按下：this.addTile，
             图标：" sap-icon：//add"
         }）;
         var button2 = new sap.m.Button（{
             按下：this.removeTile，
             图标：" sap-icon：//less"
         }）;
         hBox.addItem（button1）;
         hBox.addItem（button2）;
         vBox.addItem（hBox）;

     }，

有人可以帮我如何在"添加树"上单击"添加"按钮到 CustomTreeItem 。 如果我的上述方法在控制器方面是错误的，那么请帮助我提供一些替代解决方案。

谢谢。

（22.1 kB）
付费偷看设置
发送
6条回答
Bunny_CDM
1楼 · 2020-09-09 04:04.采纳回答

您好，您的方法不正确，您需要修改模型数据，不能像这样修改/添加聚合，可以通过下面的代码检查是否正确理解了

 addTile：function（  oEvt）{
     var _oItem = oEvt.getSource（）。getParent（）。getParent（）。getParent（）;
     var _sBindingPath = _oItem.getBindingContextPath（）;
     var _oModel = this.getView（）。getModel（" selModel"）;
     var aData = _oModel.getProperty（_sBindingPath）;
     var _oChildNodes = [];
     如果（aData.nodes！==未定义）{
         _oChildNodes = aData.nodes;
     }其他{
         aData.nodes = _oChildNodes;
     }
   //您可以对新的子数据进行硬编码或打开弹出窗口以获取用户输入
     var newData = {
         " text"：" New"，
         " subheader"：" New 1"，
         " personName"：" AK"
     };
     _oChildNodes.push（newData）;
     _oModel.setProperty（_sBindingPath，aData）;
 }，
能不能别闹
2楼-- · 2020-09-09 04:12

嗨，_oChildNodes.splice（aData）; 行，

获取父数据，然后从那里进行拼接，例如

parentData.splice（aData），

让我知道您是否无法获取

亦是此间程序员
3楼-- · 2020-09-09 04:10

您好，这是删除功能的代码，应该可以运行，

 removeTile：function（oEvt）{
         var _oItem = oEvt.getSource（）。getParent（）。getParent（）。getParent（）;
         var _sBindingPath = _oItem.getBindingContextPath（）;
         var _oModel = this.getView（）。getModel（" selModel"）;
         var _aDataToDelte = _oModel.getProperty（_sBindingPath）;
         var oModelData = _oModel.getData（）;
         this._deleteRecord（oModelData，_aDataToDelte）;
         _oModel.setData（oModelData）;
     }，
     _deleteRecord：函数（项目，记录）{
         如果（项目！==未定义）{
             for（var i = 0; i
DafaDDDa
4楼-- · 2020-09-09 04:21

谢谢你。 你真棒。 您提供了一个很好的解决方案，即时通讯正在寻找。 非常感谢：）

愤怒的猪头君
5楼-- · 2020-09-09 03:55

你好Akhilesh，

现在我试图仅通过使用parentData删除内容，但是仍然无法正常工作。

下面是我正在尝试使用的代码。

 removeTile：功能（oEvt）{
    oEvt.getSource（）。getParent（）。getParent（）。getEventingParent（）。removeAllContent（）;
 }

使用上面的代码。 我可以删除，但是问题是，如果删除的内容在树中有任何子级，则只有父级被删除。 再次，我需要手动删除不正确的孩子。

如果有任何错误，可以帮我吗？

空代码
6楼-- · 2020-09-09 03:55

啊，好吧，再次使用布局（内容），可以迭代数据并从主数据数组中删除数据 使用foreach，$。map等。我有点忙，一旦有时间，我可能会在今天深夜发布代码。

一周热门 更多>

点击此处---> EasySAP.com 一起学习S4 HANA ...