layui tree整合jquery-smartMenu组件实现右键点击节点操作

最近在研究layui的tree组件,并结合jquery-smart实现右键点击功能,现在贴出代码,

前端(核心部分)

<script type="text/javascript" src="~/Scripts/jquery-smartMenu.js"></script>

<div id="test1" class="demo-tree demo-tree-box" style="width: 500px; height: 1000px; overflow: scroll;"></div><!--树形组件-->

js部分

layui.use(['table', 'laydate', 'layer', 'form', 'tree', 'util'], function () {
                let laydate = layui.laydate;
                let table = layui.table;
                let layer = layui.layer;
                let form = layui.form;
                let tree = layui.tree;
                let util = layui.util;
                let data1;//data1保存原始数据
                let elem888;//保存刚才触发的节点元素

 //右键菜单功能
             let imageMenuData = [
                 [
                     {
                         text: "下载选中资源",
                         func: function () {
                             //下载相关的操作
                             console.log('下载选中资源被点击.......');
                             console.log('elem888', elem888);
                             let isOK = isRightElem(elem888);
                             console.log('下载里面的OK', isOK);
                             if (parseInt(isOK) ===1) {
                                console.log('你选择了正确的元素');
                             }
                             else
                             {
                                console.log('没选着');
                             }
                         }

                     },
                     {
                         text: "上传资源到这里",
                         func: function () {
                             //首先获取上传节点的位置
                             console.log('上传资源到这里被点击.......');
                             
                         }
                     }
                 ]
             ];

//给树形结构增加右键点击事件
             $("#test1").mousedown(function (e) {
                 //console.log('右键点击时的e', e);
                 rightMouse(e);
             });

 //右键弹出菜单列表
             function rightMouse(e) {
                 //console.log('rightMouse方法里面的e', e);
                // let xx = isRightElem(e);
                // console.log('xx', xx);
                 if (e.which == 3) {

                     //let isOK = isRightElem(e)
                     //console.log('右键触发的isOK', isOK);
                     //console.log('右键获取元素',getRightElem(e));
                     elem888 = e;
                 }
             }

//绑定树形结构右键点击功能
             //$("#test1").smartMenu(imageMenuData, opertionn);
             $("#test1").smartMenu(imageMenuData, {

                 name: "mail",
                 //根据已读与否状态显示不同的上下文菜单
                 beforeShow: function () {
                     //动态数据,及时清除
                     $.smartMenu.remove();//这一步很重要,否则会出现右键缓存以前数据的情况
                 }
             });

//判断用户是否选择对了节点元素
                function isRightElem(e)
                {
                    let elem666 = e.toElement;
                    console.log('elem666:', elem666);
                    let class666 = elem666.getAttribute("class");
                    console.log('class666:', class666);
                    if (class666 === 'layui-tree-txt') {
                        console.log('1');
                        return 1;
                    }
                    else
                    {
                        console.log('2');
                        return 2;
                    }
                }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值