Question

我试图在两个不同的图标点击上调用相同的模式。我只需要切换单个columnDef以在两个不同的函数调用中切换网格图标作为淡入模态的按钮。
另外，我需要将模式标题切换为“处理”（保持不变）至“处理 A ”和“流程 B “

我的示例HTML 如下

<!-- first icon with myFuncA() -->
<label data-toggle="modal" data-target="#demo" data-ng-click="myFuncA()" title="Modal {{X}}">
                <span class="fa fa-dollar iconColor fa-custom-size"></span>
            </label>

<!-- first icon with myFuncB() -->
<label data-toggle="modal" data-target="#demo" data-ng-click="myFuncB()" title="Modal {{Y}}">
                <span class="fa fa-credit-card iconColor fa-custom-size"></span>
            </label>     

<!-- my modal -->
<div class="modal fade" id="demo" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header customPopup">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <!-- title i need to toggel as per discription in question -->
                <h4 class="modal-title">Modal {{ }} </h4> 
            </div>
            <!-- grid I wish to keep same on both function calls -->
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding:10px;">
                <div id="agGrid" ng-style="{'width' : '100%', 'height' : '350px'}" ag-grid="agGridOptions" class="ag-blue ag-fresh ag-basic"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btnBackground customBtn-75" data-dismiss="modal">Cancel</button>
                <button type="button" data-ng-disabled="saveButtonDisable" class="btn btnColor customBtn-75" data-dismiss="modal" data-ng-click="update('true')">Proceed</button>
            </div>
        </div>
    </div>
</div>

我的 gridOptions 和 ColDefs

的脚本

$scope.agListGridOptions = {
            columnDefs: $scope.agColumnDefs,
            enableFilter: true,
            rowDeselection: true,
            enableColResize: true,
            rowHeight: 30,
            headerHeight: 35,
            suppressRowClickSelection: true,
            suppressScrollLag: true,
            angularCompileRows: true,
            icons: {
                groupExpanded: '<i class="fa fa-minus-square-o fa-lg customPointer iconColor"/>',
                groupContracted: '<i class="fa fa-plus-square-o fa-lg customPointer iconColor"/>',
                menu: '<i class="fa fa-bars fa-lg customPointer iconColor"/>',
                columnGroupOpened: '<i class="fa fa-minus-square-o fa-lg customPointer iconColor"/>',
                columnGroupClosed: '<i class="fa fa-plus-square-o fa-lg customPointer iconColor"/>',
                filter: '<i class="fa fa-filter fa-lg customPointer iconColor"/>',
                sortAscending: '<i class="fa fa-caret-down fa-lg customPointer iconColor"/>',
                sortDescending: '<i class="fa fa-caret-up fa-lg customPointer iconColor"/>',

            },
            overlayNoRowsTemplate: '<span class="ag-overlay-no-rows-center">No Records to show</span>',
        };

       $scope.agColumnDefs = [{
            headerName: "SR",
            field: "UserID",
            width: 85,
            hide: true
        }, {
            headerName: "Column A",
            field: "EmpName",
            width: 170,
            cellClass: "text-align-left"
        }, {
            headerName: "Column B",
            field: "CurrentLWP",
            width: 120,

        }, {
            headerName: "Deduct A",
            field: "deductA",
            width: 85,
            editable: false,
            cellRenderer: cellRendererForDeductA,
            cellClass: "text-align-right"
        }, {
            headerName: "Deduct B",
            field: "deductB",
            width: 85,
            editable: false,
            cellRenderer: cellRendererForDeductB,
            cellClass: "text-align-right"
        }];

你好鸡群，

我需要在 headName ：“Deduct A”和“Deduct B”在同一网格中切换列

使用 cellRendererForDeductA 和 cellRendererForDeductB 进行特定列单元格的某些验证。

Answer 1

点击按钮或点击图标，通过传递true或false来调用这些函数？尚未测试此代码，但应该可以使用。

<button (click)="showDeductA(true)">Show DeductA</button>

showDeductA(show) {
    this.gridColumnApi.setColumnVisible("deductA", show);
    this.gridColumnApi.setColumnVisible("deductB", !show);
  }

showDeductB(show) {
    this.gridColumnApi.setColumnVisible("deductB", show);
    this.gridColumnApi.setColumnVisible("deductA", !show);
  }

如何在两个不同的onclick事件中使用同一模型中的ag-grid动态更改模态数据

1 个答案: