Question

角度图中的甘特图如何为下面的图像添加上下文菜单

我目前的任务是这样的

我在html中包含了javascript ans css文件，如下所示

<link rel="stylesheet"  href="bower_components/angular-gantt/dist/angular-gantt.min.css"/>
<link rel="stylesheet" href="bower_components/angular-gantt/dist/angular-gantt-plugins.min.css"/>
<script src="bower_components/angular-gantt/dist/angular-gantt.min.js"></script>
<script src="bower_components/angular-gantt/dist/angular-gantt-plugins.min.js"></script>

代码：的 HTML：

<div gantt data="data" api="registerApi">
       <gantt-table enabled="true" headers="columnsHeaders">

       </gantt-table>
        <gantt-groups></gantt-groups>
        <gantt-tooltips></gantt-tooltips>
        <gantt-bounds></gantt-bounds>
        <gantt-progress></gantt-progress>
        <gantt-sortable></gantt-sortable>
        <gantt-movable ></gantt-movable>
         <gantt-draw-task ></gantt-draw-task>
        <gantt-resize-sensor ></gantt-resize-sensor>
        <gantt-overlap></gantt-overlap>


    </div>
</div>

控制器：

 app.controller('historyController',function($scope,$http){
$scope.registerApi = function(api) {
  api.core.on.ready($scope, function () {
        api.tasks.on.resizeEnd($scope, function(data) {
            console.log(data.model.name);
            console.log(data.model.from);
            console.log(data.model.to);
        });
  });
    api.directives.on.new($scope, function(dName, dScope, dElement, dAttrs, dController) {
      console.log(dName)
      console.log(dScope);
      console.log(dElement);
      console.log(dAttrs);
      console.log(dController);
     });
}
$scope.scale="day";
$scope.data = [{name: 'Milestones', height: '3em', sortable: false, classes: 'gantt-row-milestone', color: '#45607D', tasks: [
                   // Dates can be specified as string, timestamp or javascript date object. The data attribute can be used to attach a custom object
                   {name: 'Kickoff', color: '#93C47D', from: '2013-10-07T09:00:00', to: '2013-10-07T10:00:00', data: 'Can contain any custom data or object'},
                   {name: 'Concept approval', color: '#93C47D', from: new Date(2013, 9, 18, 18, 0, 0), to: new Date(2013, 9, 18, 18, 0, 0), est: new Date(2013, 9, 16, 7, 0, 0), lct: new Date(2013, 9, 19, 0, 0, 0)},
                   {name: 'Development finished', color: '#93C47D', from: new Date(2013, 10, 15, 18, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)},
                   {name: 'Shop is running', color: '#93C47D', from: new Date(2013, 10, 22, 12, 0, 0), to: new Date(2013, 10, 22, 12, 0, 0)},
                   {name: 'Go-live', color: '#93C47D', from: new Date(2013, 10, 29, 16, 0, 0), to: new Date(2013, 10, 29, 16, 0, 0)}
               ], data: 'Can contain any custom data or object'},
               {name: 'Status meetings', tasks: [
                   {name: 'Demo #1', color: '#9FC5F8', from: new Date(2013, 9, 25, 15, 0, 0), to: new Date(2013, 9, 25, 18, 30, 0)},
                   {name: 'Demo #2', color: '#9FC5F8', from: new Date(2013, 10, 1, 15, 0, 0), to: new Date(2013, 10, 1, 18, 0, 0)},
                   {name: 'Demo #3', color: '#9FC5F8', from: new Date(2013, 10, 8, 15, 0, 0), to: new Date(2013, 10, 8, 18, 0, 0)},
                   {name: 'Demo #4', color: '#9FC5F8', from: new Date(2013, 10, 15, 15, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)},
                   {name: 'Demo #5', color: '#9FC5F8', from: new Date(2013, 10, 24, 9, 0, 0), to: new Date(2013, 10, 24, 10, 0, 0)}
               ]]

我是棱角分明的新人。

Answer 1

  <div class="dashboard-file-folder-items" style="height:50px; width:50px; background:red;">Right Click</div>

一旦我使用JQueryi为我的项目做了希望，这将对你有所帮助

<script>     
     $(document).bind("click", function (event) {
                            if ($(event.target).closest('.dashboard-file-folder-items').length > 0) {
                                return true;
                            } else {
                                $("div.custom-menu").hide();
                                $(".dropdown-menu").slideUp();

                                $(".dashboard-file-folder-items").css("border-color", "");
                                $(".dashboard-file-folder-items div").css({"background-color": "", "color": ""});

                                $(".folder-action-menu").addClass("menudisabled");
                                $(".folder-action-menu").removeAttr("data-toggle");
                            }
                        });
                        $(".dashboard-file-folder-items").bind("contextmenu", function (event) {
                            event.preventDefault();
                            $("div.custom-menu").hide();
                            $(".dropdown-menu").slideUp();
                            var html = '  <ul class="dropdown-menu" style="display:block;">';
                            html += '<li>';
                            html += '<a href="#"><i class="icon icon-lg icon-share menu-icon"></i> Share</a>';
                            html += '</li>';
                            html += ' <li>';
                            html += '  <a href="#"><i class="icon icon-lg icon-link menu-icon"></i> Copy Link</a>';
                            html += ' </li>';
                            html += ' <li>';
                            html += '     <a href="#"><i class="icon icon-lg icon-folder-o menu-icon"></i> Move to</a>';
                            html += ' </li>';
                            html += ' <li>';
                            html += '    <a href="#"><i class="icon icon-lg icon-star-o menu-icon"></i> Favorite</a>';
                            html += ' </li>';
                            html += ' <li>';
                            html += '    <a href="#"><i class="icon icon-lg icon-pencil menu-icon"></i> Rename</a>';
                            html += ' </li>';
                            html += '  <li>';
                            html += '     <a href="#"><i class="icon icon-lg icon-file-o menu-icon"></i> Make a copy</a>';
                            html += ' </li>';
                            html += ' <li>';
                            html += '    <a href="#"><i class="icon icon-lg icon-download menu-icon"></i> Downlaod</a>';
                            html += ' </li>';
                            html += '   <li role="separator" class="divider"></li>';
                            html += '  <li>';
                            html += '     <a href="#"><i class="icon icon-lg icon-trash menu-icon menu-icon-remove"></i> Remove</a>';
                            html += ' </li>';
                            html += ' </ul> ';
                            $("<div class='custom-menu'>" + html + "</div>")
                                    .appendTo("body")
                                    .css({top: event.pageY + "px", left: event.pageX + "px"});
                            $(".dashboard-file-folder-items").css("border-color", "");
                            $(".dashboard-file-folder-items div").css({"background-color": "", "color": ""});
                            $(this).css("border-color", "#ff2828");
                            $(this).children("div").css({"background-color": "#ff2828", "color": "white"});
                            $(".folder-action-menu").removeClass("menudisabled");
                            $(".folder-action-menu").attr("data-toggle", "dropdown");

                        });
    </script>

如何在甘特图中添加上下文菜单

1 个答案: