关键点就是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