ui-grid：如何显示和定位弹出菜单div，点击网格内的行元素？
我有ui-grid和菜单的下面配置，但我正在为显示的每个元素打开菜单（我知道同一菜单打开所有项目的问题，因为没有区分哪个项目＆＃ 39;要打开的菜单;但我无法引用它）
$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索引，但所有但没有解决）.Below是相同的截图：
3 个答案:
答案 0 :(得分：3)
为什么不引用行，如下所示：
$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。
答案 1 :(得分：2)
首先，您不要共享HTML模板。出于这个原因，我无法看到您触发打开菜单事件的位置。我假设您在行上触发openMenu事件。
您的行HTML应如下所示。如果列上有ng-repeat，则第一个$ index是行索引，第二个$ index是列索引。
$this->browse(function ($browser) use ($user) {
$browser->visit('/login')
->type('email', $user->email)
->type('password', 'secret')
->press('Login')
->assertPathIs('/home');
});
要定位菜单，您需要 $ event 。
<div ng-repeat="row in rows" class="my-grid-row" ng-click="openMenu($event, $index, 0, row, col)">
<div ng-repeat="col in row.cols" class="my-grid-col" ng-click="$parent.openMenu($event, $parent.$index, $index, row, col)">
</div>
</div>
如果你分享你的HTML，我可以发布一个清晰的解决方案。
答案 2 :(得分：0)
在网格单元格上启用点击事件，并观察更改以获取所选ID。
var grid = $("#grid").data("kendoGrid");
var selectedId = '';
$scope.gridOptions {
...
selectable: 'cell'
}
// Watch array changes
$scope.watchCollection('grid.selectedKeyNames()',function(newValue, oldValue) {
if (newValue != oldValue) {
selectedId = newValue[0];
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？