WEB UI做TREE

效果图：

原本的普通搜索帮助，改成上面这样层级的搜索帮助。这里只做了两级。

一，新建一个TREE节点

1.新建tree结构：ZGRTEXT

 2.新建树叶节点处理类：

修改超类为CL_BSP_WD_TREE_NODE_PROXY

重定义取子节点的方法：(因为这里是两级节点，所以这步可以不用)

添加值属性节点GET方法：CODE的

修改方法的传入传出参数：CODE对应上面结构中的CODE

  METHOD get_code.
    DATA:lr_entity TYPE REF TO if_bol_bo_property_access."cl_crm_bol_entity.
    IF me->bo IS BOUND.
      lr_entity = me->bo.
      lr_entity->get_property_as_string( EXPORTING iv_attr_name = 'CODE'
        RECEIVING rv_result = value ).
    ENDIF.
  ENDMETHOD.

添加文本描述的节点GET方法：

参数同上：KURZTEXT对应上面结构中的KURZTEXT

  METHOD get_kurztext.
    DATA:lr_entity TYPE REF TO if_bol_bo_property_access."cl_crm_bol_entity.
    IF me->bo IS BOUND.
      lr_entity = me->bo.
      lr_entity->get_property_as_string( EXPORTING iv_attr_name = 'KURZTEXT'
        RECEIVING rv_result = value ).
    ENDIF.
  ENDMETHOD.

3.创建一级节点处理类：ZCL_LYTREE_PROXY_MAIN

同上一个类，重定义GET_CHILDREN方法：这里会使用到上面定义的处理类

  method IF_BSP_WD_TREE_NODE~GET_CHILDREN.
DATA:lr_coll      TYPE REF TO if_bol_bo_col,
         lr_coll2     TYPE REF TO if_bol_bo_col,
         lr_entity    TYPE REF TO if_bol_bo_property_access, "cl_crm_bol_entity,
         lr_child     TYPE REF TO if_bsp_wd_tree_node,
         gt_qpgt      TYPE TABLE OF zgrtext,
         gw_qpgt      LIKE LINE OF gt_qpgt,
         lr_line      TYPE REF TO zgrtext,
         lr_valuenode TYPE REF TO cl_bsp_wd_value_node,
         lr_col       TYPE REF TO if_bol_bo_col.
    lr_entity ?= me->bo.
    TRY.
        lr_entity->get_properties(
           IMPORTING
             es_attributes = gw_qpgt ).

        IF gw_qpgt-codegr IS NOT INITIAL.
          SELECT a~sales_org
                 a~zcode_catalog
                 a~zprod_category
                 a~zscode_id AS code
                 b~kurztext
            INTO CORRESPONDING FIELDS OF TABLE gt_qpgt
            FROM ziriscode_config AS a
            INNER JOIN qpct AS b
            ON a~zcode_catalog = b~katalogart
            AND a~zprod_category = b~codegruppe
            AND a~zscode_id = b~code
            WHERE a~sales_org = gw_qpgt-sales_org
            AND   a~zcode_catalog = gw_qpgt-zcode_catalog
            AND   a~zprod_category = gw_qpgt-zprod_category
            AND   a~zfcode_id      = gw_qpgt-codegr
            AND   b~sprache = sy-langu.
        ENDIF.

        IF gt_qpgt IS NOT INITIAL.
          CREATE OBJECT lr_col TYPE cl_crm_bol_bo_col.
          LOOP AT gt_qpgt INTO gw_qpgt.
            CREATE DATA lr_line.
            CREATE OBJECT lr_valuenode
              EXPORTING
                iv_data_ref = lr_line.
            lr_valuenode->set_properties( gw_qpgt ).
            lr_col->add( lr_valuenode ).
            lr_entity ?= lr_col->get_last( ).
            IF lr_entity IS BOUND.
              lr_child = me->node_factory->get_proxy( iv_bo = lr_entity
                               iv_proxy_type = 'ZCL_CATE_PROXY_CUSTOMER'
                               iv_parent_proxy = me ).
              lr_child->is_leaf = abap_true.
              APPEND lr_child TO rt_children.
            ENDIF.
          ENDLOOP.
        ENDIF.

      CATCH cx_crm_genil_model_error.

    ENDTRY.
  endmethod.

同样添加CODE GROUP和GROUP TEXT的GET方法：

  METHOD get_codegr.
    DATA:lr_entity TYPE REF TO if_bol_bo_property_access.
    IF me->bo IS BOUND.
      lr_entity = me->bo.
      lr_entity->get_property_as_string( EXPORTING iv_attr_name = 'CODEGR'
                                RECEIVING rv_result = value ).
    ENDIF.
  ENDMETHOD.

  method GET_KURZTEXT.
  DATA:lr_entity TYPE REF TO if_bol_bo_property_access.
  IF me->bo IS BOUND.
    lr_entity = me->bo.
    lr_entity->get_property_as_string( EXPORTING iv_attr_name = 'KURZTEXT'
                              RECEIVING rv_result = value ).
  ENDIF.
  endmethod.

4.执行事务代码BSP_WD_CMPWB，输入组件名，点击创建ZLYTREE

5.Component Controller 中新建参数节点：COND都是从上面的结构中选取的字段

需求是根据销售组织，品类，编码组 来显示对应的编码搜索帮助

使用最上面的结构做为值节点：

6.新建视图表类型视图，可配置，VALUE node还是上面的结构

 

给视图添加值节点：

给值节点添加字段：

视图类型选择表视图，可配置：

7.修改CODE节点下的属性类，改其超类为：CL_BSP_WD_CONTEXT_NODE_TREE

8.修改视图的HTML属性：

<chtmlb:configTree id                    = "ConfCellTable"
                   nodeTable             = "<%= code->node_tab %>"
                   nodeTextColumn        = "CODEGR"
                   onCollapseNode        = "COLLAPSE"
                   onExpandNode          = "EXPAND"
                   onRowSelection        = "SELECT"
                   selectionMode         = "SINGLESELECT"
                   onNodeClick           = 'CLICK'
                   selectedRowIndexTable = "<%= CODE->SELECTION_TAB %>"
                   selectedRowIndex      = "<%= CODE->SELECTED_INDEX %>"
                   type                  = "<%= CL_THTMLB_TREE=>GC_TYPE_COLUMN %>"
                   usage                 = "EDITLIST"
                   downloadToExcel       = "FALSE"
                   noFrame               = "X"
                   personalizable        = "TRUE"
                   table                 = "//CODE/Table"
                   visibleRowCount       = "10"
                   xml                   = "<%= controller->configuration_descr->get_config_data( ) %>" />

需要注意的是上面的nodeTable属性，是节点->属性code是节点名table也对应的是节点表CODE

点击保存。此时推出界面，然后重新进入，节点就已经变成tree了：

9.重定义刷新功能REFRESH:使用上面定义的类，

  METHOD refresh.
    super->refresh( ).
    DATA:lr_entity   TYPE REF TO cl_crm_bol_entity,
         lr_coll_wr  TYPE REF TO cl_bsp_wd_collection_wrapper,
         lr_iterator TYPE REF TO if_bol_bo_col_iterator,
         lr_root     TYPE REF TO if_bsp_wd_tree_node.
    DATA:lv_ent_pro TYPE REF TO if_bol_bo_property_access,
         lv_ent     TYPE REF TO cl_crm_bol_entity,
         lr_col     TYPE REF TO if_bol_bo_col..

    TRY.
        lv_ent_pro ?= me->collection_wrapper->get_first( )."get_current( ).
        WHILE lv_ent_pro IS BOUND.
          lr_root = me->node_factory->get_proxy(
          iv_bo = lv_ent_pro
          iv_proxy_type = 'ZCL_CATE_PROXY_MAIN' ).
          lr_root->node_key = add_root_node( lr_root ).
          lv_ent_pro ?= me->collection_wrapper->get_next( ).
        ENDWHILE.
      CATCH cx_sy_move_cast_error cx_sy_ref_is_initial.
    ENDTRY.
  ENDMETHOD.

10.冲定义DO_INIT_CONTEXT，初始化节点值

  METHOD do_init_context.
*SUPER->DO_INIT_CONTEXT( ).
    DATA:gt_qpgt      TYPE TABLE OF zgrtext,
         gw_qpgt      LIKE LINE OF gt_qpgt,
         lr_line      TYPE REF TO zgrtext,
         lr_valuenode TYPE REF TO cl_bsp_wd_value_node,
         lr_col       TYPE REF TO if_bol_bo_col,
*         lr_comp      TYPE REF TO zl_zcategor_bspwdcomponen_impl,
         gr_cond      TYPE REF TO if_bol_bo_property_access,
         gw_cond      TYPE zgrcond.

*    lr_comp ?= me->comp_controller.
*    IF lr_comp IS BOUND.
*      gr_cond = lr_comp->typed_context->cond->collection_wrapper->get_current( ).
*      IF gr_cond IS BOUND.
*        gr_cond->get_properties(
*          IMPORTING
*            es_attributes = gw_cond ).
*
*      ENDIF.
*    ENDIF.

    SELECT a~zfcode_id AS codegr
           a~sales_org
           a~zcode_catalog
           a~zprod_category
           b~kurztext AS kurztext
       INTO CORRESPONDING FIELDS OF TABLE gt_qpgt
       FROM ziriscode_config AS a
      INNER JOIN qpct AS b
      ON a~zcode_catalog = b~katalogart
      AND a~zprod_category = b~codegruppe
      AND a~zfcode_id = b~code
      WHERE a~sales_org = 'O 50000005'"gw_cond-sales_org
      AND   a~zcode_catalog = 'Z1'"gw_cond-katalogart
      AND   a~zprod_category = 'TV1'"gw_cond-codegr
      AND   b~sprache = sy-langu.

    SORT gt_qpgt.
    DELETE ADJACENT DUPLICATES FROM gt_qpgt COMPARING ALL FIELDS.

    CREATE OBJECT lr_col TYPE cl_crm_bol_bo_col.
    LOOP AT gt_qpgt INTO gw_qpgt.
      CREATE DATA lr_line.
      CREATE OBJECT lr_valuenode
        EXPORTING
          iv_data_ref = lr_line.
      lr_valuenode->set_properties( gw_qpgt ).
      lr_col->add( lr_valuenode ).
    ENDLOOP.

    me->typed_context->code->collection_wrapper->set_collection( lr_col ).
  ENDMETHOD.

11.冲定义DO_PREPARE_OUTPUT方法，显示节点

  method DO_PREPARE_OUTPUT.
*SUPER->DO_PREPARE_OUTPUT(
**    iv_first_time = ABAP_FALSE
*       ).
    IF me->typed_context->code->node_tab IS INITIAL.
      me->typed_context->code->refresh( ).
    ENDIF.
    super->do_prepare_output(
        iv_first_time = abap_false
           ).
  endmethod.

12.将视图添加到窗口中，设为默认

13.双击视图，点击配置页面：

这时候点击运行，就可以看到结果啦：

默认显示的是10行，这个可以在上面的配置显示行中设定，100，200.。。

14.到这里只是显示出来了，还有展开和关闭按钮功能没做，新加事件处理(EXPAND对应前面html里的方法名)

  method EH_ONEXPAND.
    DATA:lr_event_ic     TYPE REF TO cl_crm_ic_tree,
         lr_event_thtmlb TYPE REF TO cl_thtmlb_tree.
    FIELD-SYMBOLS:<fs_line> TYPE crmt_bsp_treetable_node.
    TRY.
        lr_event_ic ?= htmlb_event_ex.
        typed_context->code->collapse_node( lr_event_ic->row_key ).
      CATCH cx_sy_move_cast_error.
        TRY.
            lr_event_thtmlb ?= htmlb_event_ex.
            typed_context->code->expand_node( lr_event_thtmlb->row_key ).
          CATCH cx_sy_move_cast_error.
        ENDTRY.
    ENDTRY.
  endmethod.

到这里就可以点击展开按钮了，但是不能关闭：

  METHOD eh_oncollapse.
    DATA:lr_event_ic     TYPE REF TO cl_crm_ic_tree,
         lr_event_thtmlb TYPE REF TO cl_thtmlb_tree.
    FIELD-SYMBOLS:<fs_line> TYPE crmt_bsp_treetable_node.
    TRY.
        lr_event_ic ?= htmlb_event_ex.
        typed_context->code->collapse_node( lr_event_ic->row_key ).
      CATCH cx_sy_move_cast_error.
        TRY.
            lr_event_thtmlb ?= htmlb_event_ex.
            typed_context->code->collapse_node( lr_event_thtmlb->row_key ).
          CATCH cx_sy_move_cast_error.
        ENDTRY.
    ENDTRY.
  ENDMETHOD.

到这就可以展开和关闭二级项目了。。。

 15。下面额外加点东西。

如果这个东西做成搜索帮助，需要点击选中返回。这里是用清空节点，并绑定单值回节点。

  METHOD eh_onselect.
    "ZCATEGORY/CUCATE
    DATA:
          ls_zgrtext TYPE zgrtext.
    DATA lr_context_node_tree      TYPE REF TO cl_bsp_wd_context_node_tree.
    DATA lr_node                   TYPE REF TO if_bsp_wd_tree_node.
    DATA lr_tree_event             TYPE REF TO cl_thtmlb_tree.
    DATA lr_category               TYPE REF TO if_bol_bo_property_access.
    DATA lv_sel_index              TYPE int4.
    DATA :lv_row_index TYPE int4,
          lr_comp      TYPE REF TO zl_zcategor_bspwdcomponen_impl,
          lr_window    TYPE REF TO cl_bsp_wd_window.


    TRY.
        lr_tree_event ?= htmlb_event_ex.
        IF lr_tree_event IS BOUND.
          lv_row_index = lr_tree_event->row_index.
        ENDIF.
      CATCH cx_sy_move_cast_error.                     "#EC NO HANDLER.
        EXIT.
    ENDTRY.

    lr_context_node_tree ?= me->typed_context->tree.

    lv_sel_index = lr_context_node_tree->selected_index.


    IF lv_row_index EQ lv_sel_index.
      lr_node = lr_context_node_tree->get_node_by_index( iv_index = lv_row_index ).
      lr_node->selected = abap_false.


    ELSEIF lv_row_index IS NOT INITIAL AND lv_row_index > 0.
      lr_context_node_tree->eh_on_row_selection( iv_htmlb_event_ex = lr_tree_event ).

*     Get the corresponding category
      lr_category ?= me->typed_context->tree->get_bo_by_index( lv_row_index ).
      CHECK lr_category IS BOUND.
      TRY .
          lr_category->get_properties(
      IMPORTING
        es_attributes = ls_zgrtext ).
        CATCH cx_root.

      ENDTRY.
      lr_comp ?= me->comp_controller.
      lr_comp->typed_context->tree->collection_wrapper->clear_collection( ).
      lr_comp->typed_context->tree->collection_wrapper->add( iv_entity = lr_category
                                                               iv_set_focus = abap_true ).
      lr_window = me->view_manager->get_window_controller( ).
      lr_window->call_outbound_plug( iv_outbound_plug   = 'CATE_SELECT' ).

    ENDIF.
*    ENDIF.
  ENDMETHOD.

双击窗口，添加传入导航链接：IP_CODE_SEARCH

  METHOD ip_code_search.
    DATA:lr_tabline   TYPE REF TO zcrmstock,
         lr_valuenode TYPE REF TO cl_bsp_wd_value_node,
         lr_stock     TYPE REF TO if_bol_bo_col,
         lr_control   TYPE REF TO ZL_ZLYTREE_BSPWDCOMPONENT_IMPL,
*         lr_control   TYPE REF TO zl_zcategor_bspwdcomponen_impl,
         lr_category  TYPE REF TO if_bol_bo_property_access.

    DATA: lr_cuco TYPE REF TO zl_zcategor_cutree_impl .

    lr_cuco ?= me->get_custom_controller( 'ZLYTREE/CUCODE' ).

*    lr_category = iv_collection->get_current( ).

*    lr_control->typed_context->cond->clear_collection(  ).
*    me->typed_context->cond->collection_wrapper->add( iv_entity = lr_category
*                                                               iv_set_focus = abap_true ).

    "清空客户化控制器
    lr_cuco->typed_context->code->clear_collection(  ).
    "对控制器进行赋值
*    lr_control->typed_context->cond->set_collection( collection =
*    iv_collection ). "LR_STOCK ).
  ENDMETHOD.

效果如下：