Question

我有一个table，其中填充了文档列表（来自JSON文件），然后单击复选框将特定文档添加到收藏夹列表中。

我创建了一个带有三个选项的自定义上下文菜单。 我正在努力做到这一点，以便有人单击其中一个选项（“添加到收藏夹”），并且其功能与上述操作相同。简而言之，我不知道该怎么做触发该功能，因为它不在原始收藏夹功能的范围内。我尝试将“收藏夹”功能分组到其自己的函数中并对其进行引用，但是我的语法有问题（或者我走得很远，而且方向不正确？）。有什么想法吗？

JS添加收藏夹功能：

function faveFunc(evt) {
  const $table = $("#km-table-id")

  let table = $table.DataTable();
  let favesArr = [];

      let data = table.row(this.parentNode).data(),
      checked = $(this).is(":checked"),
      dataIndex = favesArr.indexOf(data);
      if (checked) {
        if (dataIndex === -1) {
          favesArr.push(data); // add item
        }
      } else {
        if (dataIndex > -1) {
          favesArr.splice(dataIndex, 1); // remove item
        }
      }  


      // - Appending selected faves to div - //

      ($(".populate-faves").empty()); // removes all previous entries
      for (var i = 0; i < favesArr.length; i++) {
        $(".populate-faves").append(JSON.stringify(favesArr[i].Titles) + '<br/><br/>').addClass("faved-doc");  
      }


    }; // ------------ faveFunc

    $("#km-table-id.checkbox-class, [data-action='add']").on("click", faveFunc)


  console.log(faveFunc)

上下文菜单：

  ///// Show menu /////
  $(document).on("contextmenu", function(evt) {
      evt.preventDefault();
    $(".custom-menu")
    .show()
    .css({ top: evt.pageY, left: evt.pageX });

    ///// Close menu /////
    $(document).on("mousedown", function(evt) {
      if (!$(evt.target).parents(".custom-menu").length > 0) {
        $(".custom-menu").hide(100);
      }
    })
  });

HTML片段：

<ul class="custom-menu">
  <li data-action="open">Open Document</li>
  <li data-action="add" oncontextmenu="()">Set As Favorite</li>
  <li data-action="email"><a href="mailto:?subject=subject">Email Document</a></li>
</ul>

Answer 1

@Route(value = "grid", layout = ContentLayout.class) @ParentLayout(ContentLayout.class) public class MySplitLayout extends SplitLayout implements RouterLayout { private MyGrid grid; private MyDetailOuterLayout detailOuterLayout; public MySplitLayout() { setSizeFull(); grid = new MyGrid(); detailOuterLayout = new MyDetailOuterLayout(); addToPrimary(grid); addToSecondary(detailOuterLayout); } @Override public void showRouterLayoutContent(HasElement content) { if (content != null) { Element rootElement = getElement(); rootElement.removeChild(detailOuterLayout.getElement()); // aka the secondary Element rootElement.appendChild(Objects.requireNonNull(content.getElement())); } } }仅设置一个监听器

让我们看看faveFunc：

faveFunc

调用function faveFunc() { let addFave = $table.on("click", ".checkbox-class", function(e) { // ... }) }时，它所做的只是设置一个“单击”侦听器。实际上，它不会执行点击监听器。

faveFunc不是您所想的

关于document和$(document).on("contextmenu")：$(document).on("click")是网页上的全局变量，它引用网页本身。它不引用网页的任何内容。当您在页面上的任意位置单击或右键单击时，将触发这些事件。

在设置事件侦听器方面保持一致。

您当前正在通过三种不同的方式进行操作：

document
$(selector).on("click")
$(selector).click()

选择一个。就个人而言，我更喜欢$(selector).on("click", filter)。

使事件处理程序进入命名函数

代替此：

$(selector).on("click")

...我会这样做：

function faveFunc() {
    let addFave = $table.on("click", ".checkbox-class", function(e) {
        // ...
    })
}

这样，您可以重新使用function faveFunc(e){ // ... } $("#km-table-id.checkbox-class").on("click", faveFunc)事件处理程序：

faveFunc

由于jQuery支持CSS function faveFunc(e){ // ... } $("#km-table-id.checkbox-class").on("click", faveFunc) $("[data-action='add']").on("click", faveFunc)，因此您也可以将它们组合为一个函数：

如何在上下文菜单中触发全局功能

JS添加收藏夹功能：

上下文菜单：

HTML片段：

1 个答案: