最近在研究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;
}
}