Question

我的页面上有一个右键菜单，显示我的json文件中的对象。我想在菜单中显示图标旁边的项目。这是我的js：

$(function () {
  var json_data = {};
  var $menu = $("#menu");

  jQuery.getJSON("/new_veg2.json", function (data) {
    console.log(data);
    json_data = data;
    varCallBack();
  });

  function varCallBack() {
    $.each(json_data.menu, function () {
      $menu.append(
        getMenuItem(this)
      );
      getConcept();
    });
    console.log(json_data.menu);
    checkForChildren(json_data.menu);
    console.log(childLess);
  };

  var getMenuItem = function (itemData) {
    var item = $("<li>")
      .append(
        $("<a>", {
          title: itemData.name,
          html: itemData.name,
          icons: {
            primary: "ui-icon-search"
          }
        }));
    if (itemData.children) {
      var subList = $("<ul>");
      $.each(itemData.children, function () {
        subList.append(getMenuItem(this));
      });
      item.append(subList);
    }
    return item;
  };


  var childLess = [];
  checkForChildren = function (items) {
    //console.log(items.length, 'abc');
    for (var i = 0; i < items.length; i++) {
      //console.log('category');
      if (items[i].children)
        checkForChildren(items[i].children);
      else
        childLess.push(items[i].name);
    }
  };

  var identifiedObjectsList = [];

  var getBrowserCoord = $("#Boma").mousedown(function (e) {
    if (e.button == 2) {
      var browserCoord = {
        x: e.pageX,
        y: e.pageY
      };
      identifiedObjectsList.push(browserCoord);
      console.log(browserCoord);
      console.log(identifiedObjectsList);
    }
  });

  function getConcept() {
    $('a').click(function (jsonData) {
      var clickedItem = $(this).attr('title');
      if (childLess.indexOf(clickedItem) > -1) {
        var concept = clickedItem;
        identifiedObjectsList.push(concept);
        console.log(identifiedObjectsList);
      } else {
        var concept = undefined;
      }
      console.log(concept);
    });
  };

  $("#menu").hide()

  document.getElementById("Boma").oncontextmenu = function () {
    return false;
  }

  $("#Boma").mousedown(function (e) {
    if (e.button == 2) {
      $("#menu").css('left', e.pageX + 5);
      $("#menu").css('top', e.pageY + 5);
      $("#menu").fadeIn(100);
      $("#menu").menu();
    }
  });

  $(document).click(function (e) {
    if (e.button == 0) {
      $("#menu").fadeOut(80);
    }
  });
});

我添加了＆＃34;图标：{primary：＆＃34; ui-icon-search＆＃34; }＆＃34;当将属性标记附加到列表标记时，为了尝试添加搜索图标以及名称，但它似乎不起作用。我想我错过了一些东西，或者可能完全错误地添加了图标。我需要一些显示此搜索图标的帮助。这是我的json：

{
"menu": [{

        "name": "vegetation",
        "id": "1",
        "children": [
            {
                "name": "landuse",
                "id": "1.1",
                "children": [
                    {
                        "name": "forest area",
                        "id": "1.1.1",
                        "children": null
                    }, 
                    {
                        "name": "plantation",
                        "id": "1.1.2",
                        "children": null
                    }
                ]
            }
        ]

}]
}

Answer 1

我会写一个字体真棒的例子..

$("<a>").append($("<i>", {"class":"fa fa-user"}))

在这种情况下，您的json应该看起来像

{
   "name": "forest area",
   "class":"fa fa-user",
   id": "1.1.1",
   "children": null
 },

请注意，由于class是关键字，因此请始终将其保留在引号中你可以尝试下面的jquery ui图标

{
       "name": "forest area",
       "class":"ui-icon ui-icon-clock",
       id": "1.1.1",
       "children": null
}

在右键菜单中显示图标

1 个答案: