Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

【需求】dropdown是否可以增加，渲染/显示前的回调函数，支持动态修改下拉菜单选项，data的值。 #1857

Open
4 tasks done
damonyu104 opened this issue May 5, 2024 · 2 comments
Open
4 tasks done

【需求】dropdown是否可以增加，渲染/显示前的回调函数，支持动态修改下拉菜单选项，data的值。 #1857

damonyu104 opened this issue May 5, 2024 · 2 comments
Labels
usage 用法问题

Comments

@damonyu104
Copy link

议题条件

  • 我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
  • 我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
  • 我已仔细阅读： 🍀 Layui Issue 贡献指南

议题类型

功能请求

使用版本

v2.9.8

问题描述

我有一个需求，尝试了很久。暂时也没有找到好的解决方案。

1，有一个“小组列表”。可以通过dropdown下拉菜单做一些操作：如，新建、重命名、删除某个小组。
2，但是由于权限控制，有一些“小组”是无权限删除的。因此当右键点击该“小组”时，我期望下拉菜单中就没有：重命名，删除。
3，我采用的是这样渲染方式：dropdown.render({ elem: '#id-menu li', data:[] ...}); 。data固定后就无法在展示的时候动态改变了。我也尝试了，在不同场景下使用dropdown.reloadData({data:[]})的方式，效果不佳。
4，我尝试了通过jquery：$('#id-menu li').on('contextmenu', function(e){
e.preventDefault();
// 这里调用dropdown.render(), dropdown.renderData()等，效果不佳。没有达到期望的效果。
}

不知现在是否有方法可以实现以上效果 ，感谢。

业务代码

# 假设我有一个菜单
<body>
<ul id="id-menu">
     <li data-id="1">小组1</li>
     <li data-id="2">小组2</li>
     <li data-id="3">小组3</li>
</ul>
</body>

# JS处理代码
dropdown.render({
        elem: '#id-menu li', 
        trigger: 'contextmenu',
        data: [{id:1, title:'新建'}, {id:2, title:'重命名'}, {id:3, title:'删除'}]
        click: function(obj, othis){
              // doing something
        },
        before : function(obj, othis{
             // 是否可以增加一个这样的函数，在渲染前，去动态修改data:菜单项，因为有的"小组X"不能被重命名或者删除。
        }
});

截图补充

No response

浏览器

103.0.5060.134

演示地址

No response

友好承诺

  • 我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。
@sentsim
Copy link
Member

sentsim commented May 5, 2024

在 ready 回调中去重载 data

dropdown.render({
  elem: '#id-menu li', 
  trigger: 'contextmenu',
  data: [{id:1, title:'新建'}, {id:2, title:'重命名'}, {id:3, title:'删除'}]
  click: function(obj, othis){
        // doing something
  },
  ready : function() {
    // 不允许被重命名和删除的条件
    if (true) {
      dropdown.reloadData(this.id, {
        data: [{id:1, title:'新建'}]
      });
    }
  }
});

@sentsim sentsim added the usage 用法问题 label May 5, 2024
@damonyu104
Copy link
Author

在 ready 回调中去重载 data

dropdown.render({
  elem: '#id-menu li', 
  trigger: 'contextmenu',
  data: [{id:1, title:'新建'}, {id:2, title:'重命名'}, {id:3, title:'删除'}]
  click: function(obj, othis){
        // doing something
  },
  ready : function() {
    // 不允许被重命名和删除的条件
    if (true) {
      dropdown.reloadData(this.id, {
        data: [{id:1, title:'新建'}]
      });
    }
  }
});

谢谢贤心。但这个方法，刚刚我验证了一下，存在2个问题：
1，ready函数是渲染后调用的，因此第1次点击“小组”的时候，始终会显示最开始的菜单（不正确），相当于重载无效（每次点击都是显示上次应该显示的菜单）。
2，ready函数调用的次数很奇怪。第一次点击调用1次，然后后续点击每次调用2,4,8,16次....

ready : function(elemPanel, elem) {
const { name, id, mine, type, count} = this.elem.context.dataset;
console.log('----->type:', type)
// 不允许被重命名和删除的条件
if (true) {
dropdown.reloadData(this.id, {
data: [{id:'create', title:'新建'}]
});
}
},

打印了： 511 次 ----->type: 0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
usage 用法问题
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sentsim @damonyu104