Question

嗨，我在导入csv文件时使用下面的代码来获取表数据，现在我们正在开发功能，同时右键单击第一行，将弹出一个菜单弹出窗口，我们要编辑行或将新行添加为附件快照。

html文件

<form name="editForm" role="form" novalidate ng-submit="vm.save()">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                ng-click="vm.clear()">&times;</button>
        <h4 class="modal-title" id="myTaskPlanLabel" data-translate="taskManagementApp.taskPlan.home.importLabel">Create or edit a Task Plan</h4>
        <p> Download a sample CSV file from <a href="https://ge.box.com/s/wfeh0q0xfh2e4qii8h78rnnywhub9ai2" target="_blank">here</a> </p>
        <p> Note: The dates in the CSV file should strictly be in the dd/mm/yyyy format. </p>
    </div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <div class="form-group" ng-hide="TaskPlanImportController.results">
            <input type="file" class="form-control" id="importfile" name="importfile"
                    csv-reader complete="vm.validateResults(importeddata)"/>
        </div>
    </div>

    <div class="table-responsive">
        <table class="jh-table table table-striped">
            <thead>
                <tr>
                    <!-- matamagu
                    <th><span data-translate="global.field.id">ID</span></th>
                    -->
                    <th class="col-sno">S.no</th>
                    <th><span data-translate="taskManagementApp.taskPlan.machine">Machine</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.project">Project</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.projectComponent">Project Component</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.setup">Setup</span></th>
                    <!--
                    <th><span data-translate="taskManagementApp.taskPlan.taskDetails">Task Details</span></th>
                    -->
                    <th><span data-translate="taskManagementApp.taskPlan.plannedStartDateCurrent">Current Start Date</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.plannedStartDateNew">New Start Date</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.taskStatus">Task Status</span></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="taskPlanItem in vm.importeddata"
                                ng-right-click="openContextMenu($event, $index)"
                                ng-click="rtcl($event, $index)">

                    <td class="col-sno">
                        <span>{{$index+1}}</span>
                    </td>

                    <!-- matamagu
                    <td><a ui-sref="task-plan-detail({id:taskPlan.id})">{{taskPlan.id}}</a></td>
                    -->
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Machine" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Project" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Component" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Setup" />
                        </span>
                    </td>
                    <!-- matamagu
                    <td>
                        {{taskPlanItem.Task_Name}}
                    </td>
                    -->
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Current_Start_Date" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.New_Start_Date" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Task_Status" />
                        </span>
                    </td>
                </tr>
            </tbody>
         </table>
        <div class="context-menu" ng-show="isContextMenuVisible" ng-style="contextMenuStyle">
          <ul class="dropdown-menu">
            <li>
              <a tabindex="-1" ng-click="addRow()">New Row</a>
            </li>
            <li>
              <a tabindex="-1" ng-click="removeRow()">Remove Row</a>
            </li>
          </ul>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.addnewrow()">
            <span class="glyphicon glyphicon-plus"></span>&nbsp;<span data-translate="entity.action.addrow">Add Row</span>
        </button>
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span data-translate="entity.action.cancel">Cancel</span>
        </button>
        <button type="submit" ng-disabled="editForm.$invalid || vm.isSaving" class="btn btn-primary">
            <span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;<span data-translate="entity.action.save">Save</span>
        </button>
    </div>
</form>

css文件

 .context-menu {
      position: absolute;
    }
    .context-menu .dropdown-menu {
      display:block;
      position:sticky;
    }

JS代码

$scope.isContextMenuVisible = false;
        $scope.contextmenuRowIndex = -1;
        $scope.openContextMenu = function($event, $index){
          $event.preventDefault();
          console.log($event.button);

          if($event.button === 0){
            $scope.isContextMenuVisible = false;
            return;
          }

          $scope.contextmenuRowIndex = $index;
          $scope.contextMenuStyle = {
            top: $event.clientY + 'px',
            left: $event.clientX + 'px'
          };
          $scope.isContextMenuVisible = true;
        };
        $scope.addRow = function(){
          var index = $scope.contextmenuRowIndex;
          vm.importeddata.splice(index, 0, {});
          $scope.isContextMenuVisible = false;
        };
        $scope.removeRow = function(){
          var index = $scope.contextmenuRowIndex;
          vm.importeddata.splice(index, 1);
          $scope.isContextMenuVisible = false;
        };

现在我的问题是，右键单击该行时，下拉弹出窗口有时会不在正确的位置上，因此，当我们有很多数据并且弹出窗口位于顶部时，我们需要滚动查看该弹出窗口。我尝试使用position：fixed，但由于无法获得位置，所以无法正常工作，但是上下文菜单类中的js代码上下左右是动态变化的。

我认为这是我们计算错误的上下值的原因，这就是为什么在鼠标右键单击时没有弹出的原因。即使我们正在设置，我们仍在获取x和y位置值，但仍使菜单弹出窗口不与行内联，这在每次滚动表数据时都会引起问题。

有人可以帮我解决这个问题。

右键单击行

0 个答案: