ui-grid：如何在网格内的行元素的onclick上显示和放置弹出菜单div？
GOK*_*GOK 5 html javascript angularjs angular-ui-grid ui-grid
我具有ui-grid和菜单的以下配置，但是我正在为显示的每个元素打开菜单（我知道所有项目都打开相同菜单的问题，因为没有区分要打开哪个菜单项的术语；但是我无法引用它）
$scope.gridOptions = {
enableSelectAll: true,
exporterCsvFilename: 'AGS_Extract.csv',
exporterMenuPdf: false,
enableFiltering: true,
showGridFooter: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
enableGridMenu: true,
exporterAllDataFn: function () {
var paramsObj = {};
var url = "http://test.satellite.com:8080/Dashboards/AGSMateervlet";
paramsObj['query'] = $scope.keyword;
paramsObj['start'] = 0;
paramsObj['rows'] = $scope.gridOptions.totalItems;
return $http.get(url, { params: paramsObj, headers: { 'Content-Type': 'application/json' } }).then(function (res) {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
});
},
columnDefs: [
{ name: 'materialnum', displayName: 'Part Number', cellClass: 'partNum',
cellTemplate: "<div> <div ng-click='grid.appScope.cellClicked(row)' class='ui-grid-cell-contents' title='{{COL_FIELD CUSTOM_FILTERS}}'>{{COL_FIELD CUSTOM_FILTERS}}</div><div class='subMenu' ng-show='grid.appScope.menu'><div class='subMenuChld'><span class='arrwLeft'></span><h5>View Details <span style='float:right;' ng-click='grid.appScope.menu=false;'>X</span></h5><ul><li ng-click='grid.appScope.menuItemClick(row,'new_price')'>New Price</li><li ng-click='grid.appScope.menuItemClick(row,'usage_forecast')'>Usage/Forecast</li><li ng-click='grid.appScope.menuItemClick(row,'inventory')'>Inventory</li><li ng-click='grid.appScope.menuItemClick(row,'part_bom')'>Part BOM</li><li ng-click='grid.appScope.menuItemClick(row,'open_order')'>Open Order</li><li ng-click='grid.appScope.menuItemClick(row,'open_po')'>Open PO</li><li ng-click='grid.appScope.menuItemClick(row,'return_history')'>Return History</li><li ng-click='grid.appScope.menuItemClick(row,'supplier_history')'>Supplier History</li><li ng-click='grid.appScope.menuItemClick(row,'repair_history')'>Repair History</li><li ng-click='grid.appScope.menuItemClick(row,'alternative_parts')'>Alternative Parts</li></ul></div></div></div>"
},
{ name: 'materialdesc', displayName: 'Part Description',
cellTemplate:'<div ng-if="row.entity.materialdesc" title="{{row.entity.materialdesc}}">{{row.entity.materialdesc}}</div><div ng-if="!row.entity.materialdesc"></div>',
},
{
name: 'sparable', displayName: 'Sparable',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'yes', label: 'YES' },
{ value: 'no', label: 'NO' }
]
},
//cellTemplate:'<div ng-if="row.entity.sparable" class="tcenter">{{row.entity.sparable}}</div><div ng-if="!row.entity.sparable" class="tcenter">-</div>',
cellClass: function (grid, row, col) {
if (grid.getCellValue(row, col) === 'NO') {
return 'red tcenter';
}
if(grid.getCellValue(row, col) === 'YES') {
return 'green tcenter';
}
return 'tcenter';
}
},
..
下面是单击它时调用的函数：
$scope.cellClicked = function (row, col){
console.log(row.entity.materialnum);
$scope.menu = true; // All menus are becoming active
};
除了显示所有菜单外，菜单的位置现在也无关紧要。我如何定位或指向正确的点击位置（在jquery中很简单，但我严格使用javascript，angularjs和ui-grid）
提前致谢！
＃编辑
＃每当单击任何行项目时，菜单都将在网格的顶部打开。我无法将其放在点击位置；我们有来自jquery的解决方案，但尝试避免使用jquery，只要使用angular或javascript就可以了。
网格默认为25个项目，首先在可见部分显示10-12，然后向下滚动；现在，如果我单击可见区域中的行，那么菜单将正确显示，但是当我单击从可见区域中隐藏的其余部分时，菜单将被隐藏，仅显示标题部分（我怀疑ul / li正在创建一些问题，但我仅在考虑不可见零件的原因（尝试给出z索引，但几乎没有解决）。以下是相同的屏幕截图：
为什么不引用该行，如下所示：
$scope.cellClicked = function (row, col){
row.menu = true;
};
然后在您的单元格模板中执行以下操作：
<div>
<div ng-click='grid.appScope.cellClicked(row)' class='ui-grid-cell-contents' title='{{COL_FIELD CUSTOM_FILTERS}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>
<div class='subMenu' ng-show='row.menu'>
<div class='subMenuChld'>
<span class='arrwLeft'></span>
<h5>View Details <span style='float:right;' ng-click='row.menu=false;'>X</span></h5>
<ul>
<li ng-click='grid.appScope.menuItemClick(row,'new_price')'>New Price</li>
<li ng-click='grid.appScope.menuItemClick(row,'usage_forecast')'>Usage/Forecast</li>
<li ng-click='grid.appScope.menuItemClick(row,'inventory')'>Inventory</li>
<li ng-click='grid.appScope.menuItemClick(row,'part_bom')'>Part BOM</li>
<li ng-click='grid.appScope.menuItemClick(row,'open_order')'>Open Order</li>
<li ng-click='grid.appScope.menuItemClick(row,'open_po')'>Open PO</li>
<li ng-click='grid.appScope.menuItemClick(row,'return_history')'>Return History</li>
<li ng-click='grid.appScope.menuItemClick(row,'supplier_history')'>Supplier History</li>
<li ng-click='grid.appScope.menuItemClick(row,'repair_history')'>Repair History</li>
<li ng-click='grid.appScope.menuItemClick(row,'alternative_parts')'>Alternative Parts</li>
</ul>
</div>
</div>
</div>
注意：row.menu而不是grid.appScope.menu.