526互联

如何在tree中添加一个 contextmenu 事件！

发布时间 2023-06-01 17:00:41作者: zno2

关键点就是TreeList 上下文中要有这个被包装了的 handleContextMenu

定义TreeList 时，继承了一些东西，还可以重写一些东西。

 

本例中，TreeList 上下文捕获到右键菜单事件后，将该事件传递给了自定义的函数 itemcontextmenu1 对应的函数应该return false 来阻止默认菜单的行为。

在函数中完成业务操作，比如弹出一个菜单进行增删该操作。

 

自定定义函数通过on绑定到 itemcontextmenu1

通过fire 执行 该事件对应的函数

 

itemTpl 指的是模板，可以通过{}形式把数据中的属性值传递到这里比如 {text : 'ffff',id : '11'}

遇到一个问题 li 中的id是空字符串，原因是模板中未将原始数据中的id 设置进来

idField 是一个字符串，可以设置成li中的任意属性，一般设置成id ，用来唯一标识获取node

  var TreeList = List.SimpleList.extend([Mixin,Selection],{
       handleContextMenu:function(ev){
          ev.preventDefault();
          this.fire('itemcontextmenu1',ev);
       }
  },{
    ATTRS : {
      itemCls : {
        value : BUI.prefix + 'tree-item'
      },
      itemTpl : {
        value : '<li id={id}>{text}</li>'
      },
      idField : {
        value : 'id'
      }
    }
  },{
    xclass : 'tree-list'
  });

 

ps: jsp 部分

    $(function(){
        BUI.use(['bui/tree','bui/menu'],function (Tree,Menu) {
          //树节点数据，
          //text : 文本，
          //id : 节点的id,
          //leaf ：标示是否叶子节点，可以不提供，根据childern,是否为空判断
          //expanded ： 是否默认展开
          var data = [ 
              {text : 'sdf',id : '1',children: [{text : 'ffff',id : '11'}]}
            ];
          //由于这个树，不显示根节点，所以可以不指定根节点
          var tree = new Tree.TreeList({
            render : '#t1',
            root : {                  //由于要显示根节点，所以需要配置根节点
              id : '0',
              text : '根节点',
              expanded : true,
              children : data
            },
            showLine : true, //显示连接线
            showRoot : true
          });
          tree.render();
     
          var itemClick = function(){
            console.log('right click');
            //menu.hide();
          }
          var menu = new Menu.ContextMenu({
            children : [
              {
                iconCls:' icon-plus',
                text : '新建',
                listeners:{
                  'click':itemClick
                }
              },
              {xclass:'menu-item-sparator'},
              {
                iconCls:'icon-remove',
                text: '删除'
              },
              {
                iconCls:'icon-pencil',
                text : '编辑',
                listeners:{
                  'click':itemClick
                }
              }
            ]
          });
     
          
          tree.on('itemcontextmenu',function(ev){
            var item = ev.target;
            if(item.id){
                tree.setSelectedByField(item.id);
                 menu.set('xy',[ev.pageX,ev.pageY]);
                 menu.show();
            }
            return false; //prevent the default menu
          });
        });
    });

 

ev 中没有item 只能用 target ，然后通过id方式选中

官网提供的demo和github上的不一致了。。。。早已经不维护了