simpletree学习笔记

很容易理解,SIMPLE_TREE就是按照层次结果来显示数据.首先简单介绍一下SIMPLE_TREE实现的原理:在SAP中用于实现Simple_tree的类是   cl_simple_tree_model ,因此首先需要创见一个 cl_simple_tree_model的实例,实例创建完成以后调用 cl_simple_tree_model 的 add_node 方法一个个创建Tree的结点.简单讲起来就这么两句就可以了,但要具体实现起来还是有点麻烦的.由于本人不善言语,所以只能以一个事例来进行简述.

      在这个事例中,我们实现的效果是:屏幕的左边放置一个simple_tree,右边放置一个ALVGRID.当双击simple_tree的node节点是,将详细信息显示在右边的ALVGRID中。这种效果应该在很多实际应用中可以用到!OK,废话少说,下面讲述如何实现这个事例。

      一,首先创建一个屏幕号为100的屏幕,在该屏幕中方式一个custom control,并命名为tree。

      二,既然要将屏幕分为左右两部分,因此还需要定义2个container,分别为 w_left 和 w_body ,一个用来放置simple_tree, 另外一个用来放置alvgrid.此外,需要定义一个 splitter_container( w_splitter)用来对屏幕进行分割。最后定义 cl_simple_tree_model以及 cl_simple_tree_model 两个对象。代码如下:      

  DATA: simple_tree TYPE REF TO cl_simple_tree_model,
      customer_container TYPE REF TO cl_gui_custom_container,
      w_splitter TYPE REF TO cl_gui_splitter_container,
      grid1  type ref to cl_gui_alv_grid,
      w_left TYPE REF TO cl_gui_container,
      w_body TYPE REF TO cl_gui_container.

      三,接下来在屏幕100的PBO的module中创建第二步中定义的对象。首先创建一个 cl_gui_custom_container对象 customer_container,并将其   CONTAINER_NAME 设置为"TREE";将下来创建 cl_gui_splitter_container 对象 w_splitter ,将其parent设置为customer_container,调用 w_splitter的   get_container 方法将将customer_container分为   w_left和w_body两个container,再调用w_splitter的 set_column_width设置左右两边的宽度;创建   cl_simple_tree_model 对象simple_tree,需要注意的是与创建ALLVGRID等对象不同的是,创建simple_tree对象是并没有为其指定所属container,而是需要调用其 CREATE_TREE_CONTROL 进行指定。具体代码如下:

     CREATE OBJECT customer_container
      EXPORTING
*        PARENT                      =
        CONTAINER_NAME              = 'TREE'.
    CREATE OBJECT w_splitter
    EXPORTING
      parent  = customer_container
      rows    = 1
      columns = 2.
    CALL METHOD w_splitter->get_container
      EXPORTING
        row       = 1
        column    = 1
      RECEIVING
        container = w_left.
    CALL METHOD w_splitter->get_container
      EXPORTING
        row       = 1
        column    = 2
      RECEIVING
        container = w_body.
    CALL METHOD w_splitter->set_column_width
      EXPORTING
        id    = 1
        width = 25.
    CREATE OBJECT simple_tree
      EXPORTING
        NODE_SELECTION_MODE         = cl_simple_tree_model=>node_sel_mode_single.

    CALL METHOD simple_tree->CREATE_TREE_CONTROL
      EXPORTING
        PARENT = w_left.    

       四,调用simple_tree的 add_node方法逐一添加节点。调用add_node方法时,有relationship和 relative_node_key这两个参数需要注意:relative_node_key是指已经添加进去的节点中的其中一个节点,relationship只是的与relative_node_key的关系,是 RELAT_NEXT_SIBLING(兄弟节点)还是   relat_last_child (孩子节点)。掌握了这点之后剩下的就是如何分析节点与节点之间的关系了。这个我很难讲述清楚,直接看附件中的代码吧!

       五,调用simple_tree的 方法expand_node,指定哪个节点为展开状态。最后再调用   call method cl_gui_cfw=>flush. 

       好了,simple_tree的数据已经添加进来了。由于篇幅的关系,将在下一篇中讲述如何实现simple_tree的双击事件。  

$(function(){ $.fn.extend({ SimpleTree:function(options){ //初始化参数 var option = $.extend({ click:function(a){ } },options); option.tree=this; /* 在参数对象中添加对当前菜单树的引用,以便在对象中使用该菜单树 */ option._init=function(){ /* * 初始化菜单展开状态,以及分叉节点的样式 */ this.tree.find("ul ul").hide(); /* 隐藏所有子级菜单 */ this.tree.find("ul ul").prev("li").removeClass("open"); /* 移除所有子级菜单父节点的 open 样式 */ this.tree.find("ul ul[show='true']").show(); /* 显示 show 属性为 true 的子级菜单 */ this.tree.find("ul ul[show='true']").prev("li").addClass("open"); /* 添加 show 属性为 true 的子级菜单父节点的 open 样式 */ }/* option._init() End */ /* 设置所有超链接不响应单击事件 */ this.find("a").click(function(){ $(this).parent("li").click(); return false; }); /* 菜单项 接受单击 */ this.find("li").click(function(){ /* * 当单击菜单项 * 1.触发用户自定义的单击事件,将该 标签中的第一个超链接做为参数传递过去 * 2.修改当前菜单项所属的子菜单的显示状态(如果等于 true 将其设置为 false,否则将其设置为 true) * 3.重新初始化菜单 */ option.click($(this).find("a")[0]); /* 触发单击 */ /* * 如果当前节点下面包含子菜单,并且其 show 属性的值为 true,则修改其 show 属性为 false * 否则修改其 show 属性为 true */ /* if($(this).next("ul").attr("show")=="true"){ $(this).next("ul").attr("show","false"); }else{ $(this).next("ul").attr("show","true"); }*/ /* 初始化菜单 */ option._init(); }); /* 设置所有父节点样式 */ this.find("ul").prev("li").addClass("folder"); /* 设置节点“是否包含子节点”属性 */ this.find("li").find("a").attr("hasChild",false); this.find("ul").prev("li").find("a").attr("hasChild",true); /* 初始化菜单 */ option._init(); }/* SimpleTree Function End */ }); });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值