我使用ui-grid绑定来自Role Table的数据,其中包含Department Id作为PrimaryKey.我正在调用Web Api来获取表中的所有角色并以ui-grid显示.
部门表
角色表
我真正的问题是,当我使用cellFilter绑定到网格时,我想将部门ID转换为部门名称,这就是为什么我声明objMapping以使用部门名称映射部门ID.但是每当我运行时,我都会看到在设置objMapping之前调用了cellFilter自定义函数,即’mapDepartmentName’,而且我也无法在’mapDepartmentName’中引用objMapping.
我的网格看起来像这样： –
但是当我编辑时,我得到的结果如下,这绝对是正确的： –
我的代码片段如下： –
@H_404_22@var myApp = angular.module('appHome',['ui.grid','ui.grid.edit']); myApp.controller("ctrlRole",['$scope','MetadataOrgFactory',function ($scope,MetadataOrgFactory) { var arrDepts = []; var objMapping = {}; MetadataOrgFactory.getApiCall('getpublisheddepts',function (dataSuccess) { $scope.department = dataSuccess; for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) { var objDept = { id: dataSuccess[cntElem].DeptId,DeptId: dataSuccess[cntElem].DeptName } arrDepts.push(objDept); objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName; } $scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts; },function (dataError) { }); $scope.gridRole = { data: 'roleData',columnDefs: [ { field: 'RoleName',displayName: 'Role Name',},{ field: 'DeptId',displayName: 'Department Name',editableCellTemplate: 'ui-grid/dropdownEditor',cellFilter: 'mapDepartmentName:this',editDropdownValueLabel: 'DeptId',{ field: 'RoleDesc',displayName: 'About Role',{ field: 'WorkingHrs',displayName: 'Working Hours',{ field: 'RequestNumber',displayName: 'RequestNumber',cellEditableCondition: true } ] } MetadataOrgFactory.getApiCall('getallroles',function (dataSuccess) { $scope.roleData = dataSuccess; },function (dataError) { }); }]) .filter('mapDepartmentName',function () { return function (input,scope) { if (!input) { return ''; } else { return objMapping[input]; } }; }); @H_404_22@<!DOCTYPE html> <html> <head> <title></title> <style> .gridStyle { border: 5px solid #d4d4d4; height: 200px; } </style> <Meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" /> <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> <script src="../Scripts/AngularControllers/RoleController.js"></script> <script src="../Scripts/AngularServices/ApiCallService.js"></script> </head> <body ng-app="appHome"> <div ng-controller="ctrlRole"> <div class="gridStyle" ui-grid="gridRole" ui-grid-edit> </div> </div> </body> </html>