UI网格右键菜单 - 使用appScope显示另一个网格

时间:2016-12-20 09:56:20

标签: javascript angularjs user-interface grid

我正在使用基于Angular的UI网格。我想在行上右键单击显示另一个网格。该行的ID字段将使用http.post传递给DB。返回的数据将以模态显示在另一个网格中。这就是我正在做的事情

rowTemplate:     rowTemplate:'....'

appScopeProvider:      appScopeProvider:$ scope.myAppScopeProvider,

$scope.myAppScopeProvider = {
            showMenu: function (row) {
                    var modalInstance = $modal.open({
                    controller: 'ContextController',
                    templateUrl: 'ngTemplate/ContextMenu.html',
                    resolve: {
                        selectedRow: function () {
                             //getTable(row.entity);
                            return row.entity;
                        }

                    }
                });

                modalInstance.result.then(function (selectedItem) {
                    console.log('modal selected Row: ' + selectedItem);
                }, function () {
                    console.log('Modal dismissed at: ' + new Date());
                });
            },





app.controller('ContextController',
        ['$scope', '$modal', '$modalInstance', '$filter',     '$interval','$http' ,  'selectedRow',
            function ($scope, $modal, $modalInstance, $filter, $interval,     $http,  selectedRow) {

                $scope.selectedRow = selectedRow;

                $scope.rel_details = function () {

                    $scope.nodeName_rel = selectedRow.NodeName;
                    $scope.fromTime_rel = "2015-11-11";
                    $scope.toTime_rel = "2016-12-21";

                    $http.post('../getData', { nodeName: $scope.nodeName_rel, trapType: 'All', startTime: $scope.fromTime_rel, endTime: $scope.toTime_rel })
                    .success(function (data) {
                        console.log(data);
                        $scope.gridOptions1.data = data;

                    });
                    //$scope.selectedRow = null;
                    //$modalInstance.close();
                };

ContextMenu.html:

<script type="text/ng-template" id="ngTemplate/ContextMenu.html">
<div class="modal-header">
         <h4>Context Menu</h4>
    </div>
    <div class="modal-body">
        <button class="btn btn-primary btnCustom"   ng-        click="rel_details()">Grouped Details</button>
        <div id="grid_rel" ui-grid="gridOptions1" class="grid"></div>
 </div>
    <div class="modal-footer">
        <button class="btn btn-primary btnCustom"   ng-click="ok()">OK</button>
        <!--<button class="btn btn-primary btnCustom"  ng-    click="cancel()">Cancel</button>--> 
    </div>

</script>     

0 个答案:

没有答案