首页 > 其他分享 >如何在tree中添加一个 contextmenu 事件!

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

时间:2023-06-01 17:02:38浏览次数:46  
标签:contextmenu text tree 节点 添加 menu ev id

关键点就是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上的不一致了。。。。早已经不维护了

标签:contextmenu,text,tree,节点,添加,menu,ev,id
From: https://www.cnblogs.com/zno2/p/6106128.html

相关文章

  • 如何在tree中添加一个 contextmenu 事件?
     /***添加绑定事件*<pre><code>*//绑定单个事件*list.on('itemclick',function(ev){*alert('21');*});*//绑定多个事件*list.on('itemrendereditemupdated',function(......
  • UE4添加人物动画之前后左右移动
    这也一节,我们来使用动画状态机的逻辑。1)编译一下,回到UE4编辑器双击我们的动画蓝图,选择动画图标,创建一个状态机,并双击状态机。2)点击引脚拉出来一个节点选择添加状态。3)更改名字为Idle说明是静止状态,然后在Idle节点拉出一个Move节点表示是移动状态,然后再从......
  • UE4添加人物摄像机
    在这一节中,我们需要添加两个组件分别是摄像机弹簧臂组件和摄像机组件。摄像机弹簧臂组件摄像机弹簧臂组件,可以想象成是我们的手臂和手。手拿着摄像机,当我们想移动摄像机的时候,我们移动的是我们的手臂而不是摄像机。1)打开VS编辑器,在PlayingCharacter.h文件添加摄像机弹簧组......
  • UE4添加人物模型
    在正式使用UE4添加人物模型之前,我们先来解释几个概念。什么是组件在添加人物模型之前先介绍一个概念叫“组件”,组件是什么呢?组件的作用是为了让Actor实现一个功能,比如说:我们现在的角色,没有模型,我们需要一个模型那怎么办呢?那么我就要在Character身上挂一个“骨骼模型组件”......
  • Vue通用下拉树组件@riophae/vue-treeselect的使用
    vue-treeselect是一款下拉树通用组件。@riophae/vue-treeselect是一个基于Vue.js的树形选择器组件,可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能,可以自定义选项的样式和模板。该组件易于使用和扩展,适用于各种类型的项目。npm:https://www.npmjs.com/package/@......
  • Burp Suite添加https证书——让其可以嗅探https的数据包,本质上就是将BP自己做为https
    如何给软件BurpSuite添加https证书?BurpSuite是一款强大的安全测试工具,可以用来设置代理,抓取http数据包,如果添加了https证书,就可以抓取https数据包。这边经验就告诉你,如何给软件BurpSuite添加https证书。工具/原料 联网的电脑一台BurpSuite软件firefox浏览器,并安装proxyswitch......
  • windows下通过net user add和powershell添加用户,sysmon仅仅采集到进程,而在windows安全
    执行操作:C:\Windows\system32>netuser/add"jack""fuckoff"命令成功完成。C:\Windows\system32>powershellWindowsPowerShell版权所有(C)MicrosoftCorporation。保留所有权利。尝试新的跨平台PowerShellhttps://aka.ms/pscore6PSC:\Windows\system32&g......
  • 原生JS输入姓名科目分数添加到表格,可删除
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=d......
  • [CF9D]How many trees?
    2023-06-01题目题目传送门难度&重要性(1~10):5题目来源Codeforces,luogu题目算法dp解题思路深度最大为\(n\left(1\len\le35\right)\)的二叉树暴力枚举显然不行,考虑dp。设\(f_{i,j}\)表示有\(i\)个节点时,深度不大于\(j\)的二叉树数量。答案容斥:\(f_{n,n}-f_{n......
  • Linux 添加redis守护进程
    1、编写启动服务文件 /lib/systemd/system/redis.service[Unit]Description=Theredis-serverProcessManagerDocumentation=https://redis.io/After=network.target[Service]Type=forking#根据自己的redis路径启动和停止ExecStart=/usr/local/redis/bin/redis-server/usr/l......