2
固定のBootstrapという定数と任意の数の動的タブがある状況があります。これらの動的タブには2つのui-gridが必要です。この時点で、私は1つのUIグリッドを動作させようとしています。私はTabGroupsと呼ばれる各タブの一意のIDとデータを保持するカスタムセットモデルの配列を持っています。画面の別の部分のクリックイベントでは、新しいタブが作成されます。タブが表示され、私はそれらにアクセスすることができます。私はuiグリッドを追加する方法を探し始め、しばらくの間停滞しています。このarticleは私が探しているようですが、角度とuiグリッドの両方が新しいバージョンに更新されているので、私にとってはもう機能しません。ここで角を使用して複数のuiグリッドを動的に作成する方法
は、新しいタブが作成されたときに何が起こるかである：ここでは
$scope.TabGroups = []; // Contains the Name and useful data
// Temp-faked data
$scope.Testing.tabCDA_ManagementWages = [{ "firstName": "Kevin", "lastName": "G" }, { "firstName": "John", "lastName": "M" }];
$scope.Testing.tabCDA_NonManagementWages = [{ "firstName": "Doug", "lastName": "D" }, { "firstName": "Jeff", "lastName": "C" }];
$scope.createTab = function (rowNumber) {
var SelectedRow = $scope.Groupings.filter(function (item) { return item.RowNumber == rowNumber; });
var newTab = {
Name: SelectedRow[0].Description,
IsLoading: false,
UniqueID: "tabCDA_" + SelectedRow[0].Description.replace(/[^a-zA-Z0-9]/g, "")
};
newTab.Data = $scope.Testing[newTab.UniqueID];
$scope.TabGroups.push(newTab);
}; // createTab
はDirectiveのセットアップです：
function cdaTab() {
return {
template: "<div class='grid' ui-grid='gridOptions'></div>",
restrict: "E",
scope: {
options: "="
},
controller: "ProfitAndLossController",
controllerAs: "vm",
bindToController: true,
link: function (scope, element, attrs) {
scope.gridOptions = {
data: scope.vm.options.Data,
columnDefs: [
{ name: "firstName", field: "firstName", displayName: "First Name", type: "string", width: 150 },
{ name: "lastName", field: "lastName", displayName: "Last Name", type: "string", width: 150 },
]
};
} // link
}; // return
} // cdaTab
：ここ
app.directive("cdaTab", cdaTab);
はcdaTabコードですダイナミックタブのHTMLは次のとおりです：
<div role="tabpanel" class="tab-pane" ng-repeat="tab in TabGroups" id="{{ tab.UniqueID }}">
<div class="row">
<div class="col-md-12 small">
<cda-tab id="{{ tab.UniqueID + '_A' }}" options="tab" class="cdaSummaryInfo gca-highlight"></cda-tab>
</div>
</div>
</div>
最初のものがうまくいって、タブが作成され、データが読み込まれます。 2番目のタブが作成されると、タブが表示されますが、がdataになるため、データのロードに失敗します。 （ - V3.1.0 - UIグリッド2016年1月19日）ここで、UI-grid.jsファイルの具体行3,150 ：uiGridはないが
if (angular.isString($scope.uiGrid.data)) {
$scopeが存在します。
また、最初の動的グリッドが作成された後に再びcdaTab()メソッドに入ることに気付きました。それがすべきかどうかはわかりませんが、私はそうするでしょう。
作業には近いようですが、欠落しているものがあります。
持っている方が良い方法があれば、私はすべての耳です。私は、すべてが指示を使用することを指摘したようなかなりの量の研究をしました。
EDIT RE：要求は、ここでProfitAndLossControllerコードです：
app.controller("ProfitAndLossController", ["$scope", "$rootScope", "uiGridConstants", "$http", "$window", "$filter", "CommonCode",
function ($scope, $rootScope, uiGridConstants, $http, $window, $filter, CommonCode) {
var windowUrl = $window.location.href.replace("#", "");
var nextTabInteger = 0;
$scope.isLoadingData = true;
$scope.isExportingData = false;
$scope.Groupings = [];
$scope.DataRows = [];
$scope.ConsolidatedMonths = [];
$scope.MostRecentDate = FormatDateMDYYYY(new Date(), "/");
$scope.TabGroups = []; // Contains the Name and useful data to fill in the TabPrimaryData values
$scope.TabPrimaryData = [];
$scope.TabDetailsData = [];
$scope.Testing = []; // Array of ui-grids
$scope.Testing2 = []; // Array of ui-grids for the details
$scope.cdaitems = [];
$scope.Testing.tabCDA_ManagementWages = [{ "firstName": "Kevin", "lastName": "G" }, { "firstName": "John", "lastName": "M" }];
$scope.Testing.tabCDA_NonManagementWages = [{ "firstName": "Doug", "lastName": "D" }, { "firstName": "Jeff", "lastName": "C" }];
$scope.URLs = {
Data: windowUrl + "/ProfitAndLossData",
Details: windowUrl + "/IncidentReportingDetails",
New: windowUrl + "/NewIncidentReport",
Groupings: windowUrl + "/GetGroupings",
GroupingsFlat: windowUrl + "/GetGroupingsFlat",
TabPrimaryData: windowUrl + "/GetPrimaryCDA",
TabDetailsData: windowUrl + "/GetPrimaryCDADetails"
}; // URLs
$scope.fillGroupings = function() {
$scope.isLoadingData = true;
$http({
method: "GET",
url: $scope.URLs.GroupingsFlat,
headers: { "Content-Type": "application/json" }
}).success(function (data) {
$scope.Groupings = data;
$scope.isLoadingData = false;
}).error(function (data, status, headers, config) {
$scope.isLoadingData = false;
alert("Error retrieving Grouping data. The error has been logged. Please retry and contact the system administrator if it happens again. Status is " + status + ".");
return status;
}); // http
}; // fillGroupings
$scope.fillRowData = function() {
$scope.isLoadingData = true;
var UsersFilters = $scope.GatherFilters();
// Calculate the Consolidated P&L Dates
$scope.ConsolidatedMonths = [];
UsersFilters.EndDate = $scope.MostRecentDate;
var DateParts = UsersFilters.EndDate.split('/');
var MRD = new Date(DateParts[2], DateParts[0] - 1, DateParts[1]);
for (var i = 11; i >= 0; i--)
$scope.ConsolidatedMonths[i] = incrementDate(MRD, -i);
$http({
method: "POST",
url: $scope.URLs.Data,
headers: { "Content-Type": "application/json" },
data: { "filters": UsersFilters }
}).success(function (data) {
if (data.WasSuccessful == true) {
for (var i = 0; i < data.Result.length; i++)
$scope.DataRows[data.Result[i].RowNumber] = data.Result[i];
} else {
alert("Whoops");
} // if it got the row of data successfully
//$scope.updateProgress(1);
$scope.isLoadingData = false;
}).error(function (data, status, headers, config) {
$scope.isLoadingData = false;
alert("Error retrieving Row data. The error has been logged. Please retry and contact the system administrator if it happens again. Status is " + status + ".");
return status;
}); // http
}; // fillRowData
$scope.createTab = function (rowNumber) {
var Found = $scope.TabGroups.filter(function (item) { return item.RowNumber == rowNumber; });
if (Found.length > 0) {
alert("This item already exists. Taking you there now.");
} else {
// New tab created
var SelectedRow = $scope.Groupings.filter(function (item) { return item.RowNumber == rowNumber; });
var newTab = {
RowNumber: rowNumber,
Name: SelectedRow[0].Description,
Date: "", // May need the column they selected
IsLoading: false,
TabInteger: nextTabInteger,
UniqueID: "tabCDA_" + SelectedRow[0].Description.replace(/[^a-zA-Z0-9]/g, "") // Remove all non-alphanumeric characters
};
newTab.Data = $scope.Testing[newTab.UniqueID];
$scope.TabGroups.push(newTab);
$("#" + newTab.UniqueID).tab("show");
nextTabInteger++;
} // if that Tab is already in the list
}; // createTab
$scope.deleteTab = function (uniqueID) {
var Found = $scope.TabGroups.filter(function (item) { return item.UniqueID == uniqueID; });
if (Found.length > 0) {
var index = $scope.TabGroups.indexOf(Found[0]);
$scope.TabGroups.splice(index, 1);
$scope.TabPrimaryData.splice(index, 1);
$scope.TabDetailsData.splice(index, 1);
} // if we found the tab
}; // deleteTab
$scope.fillTabPrimaryData = function (tabGroup) {
var UsersFilters = $scope.GatherFilters();
var parameters = [];
////$scope.CDADetailsSummary.data = [];
////$scope.CDADetails.data = [];
//UsersFilters.PageNumber = $scope.paginationOptions.pageNumber;
//UsersFilters.RecordSize = $scope.paginationOptions.pageSize;
//UsersFilters.SortField = $scope.paginationOptions.sort;
//UsersFilters.SortDirection = $scope.paginationOptions.sortOrder;
tabGroup.IsLoading = true;
var InputDate = new Date($scope.MostRecentDate);
var Month = InputDate.getMonth();
var Year = InputDate.getFullYear().toString().substr(2, 2)
parameters.push({ Name: "RowNumber", Value: tabGroup.RowNumber });
parameters.push({ Name: "FromFiscalMonth", Value: Month });
parameters.push({ Name: "BusinessUnit", Value: "1000" });
parameters.push({ Name: "Year", Value: Year });
$http({
method: "POST",
url: $scope.URLs.TabPrimaryData,
// headers: { "Content-Type": "application/json" },
headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8;" },
data: $.param({ filters: UsersFilters, parameters: parameters })
}).success(function (data, status, headers, config) {
if (data.WasSuccessful == true) {
//$scope.CDADetailsSummary.data = data.Result;
// $scope.CDADetailsSummary[$scope.TabGroups.indexOf(tabGroup)] = data.Result;
} else {
DisplayToastMessage("Failure attempting to gather Primary data", data);
} // if the response was successful
tabGroup.IsLoading = false;
}).error(function (data, status, headers, config) {
tabGroup.IsLoading = false;
$scope.status = status;
alert("Error retrieving data. The error has been logged. Please retry and contact the system administrator if it happens again. Status is " + status + ".");
}); // http
}; // fillTabPrimaryData
$scope.fillTabPrimaryDataSAVE = function (tabGroup) {
tabGroup.IsLoading = true;
var UsersFilters = $scope.GatherFilters();
$http({
method: "POST",
url: $scope.URLs.TabPrimaryData,
headers: { "Content-Type": "application/json" },
data: { "rowNumber": tabGroup.RowNumber, "filters": UsersFilters }
}).success(function (data) {
if (data.WasSuccessful == true) {
$scope.TabPrimaryData[$scope.TabGroups.indexOf(tabGroup)] = data.Result;
} else {
alert("Whoops");
} // if it got the row of data successfully
tabGroup.IsLoading = false;
}).error(function (data, status, headers, config) {
tabGroup.IsLoading = false;
alert("Error retrieving CDA data. The error has been logged. Please retry and contact the system administrator if it happens again. Status is " + status + ".");
return status;
}); // http
}; // fillTabPrimaryData
$scope.fillTabCDADetails = function (businessUnit) {
// tabGroup.IsLoading = true;
var UsersFilters = $scope.GatherFilters();
var parameters = [];
$http({
method: "POST",
url: $scope.URLs.TabDetailsData,
headers: { "Content-Type": "application/json" },
data: { "filters": UsersFilters, "parameters": parameters }
}).success(function (data) {
if (data.WasSuccessful == true) {
////$scope.CDADetails.data = data.Result;
} else {
alert("Whoops");
} // if it got the row of data successfully
// tabGroup.IsLoading = false;
}).error(function (data, status, headers, config) {
// tabGroup.IsLoading = false;
alert("Error retrieving CDA data. The error has been logged. Please retry and contact the system administrator if it happens again. Status is " + status + ".");
return status;
}); // http
}; // fillPrimaryData
$scope.export = function (export_format, gridName) {
var myElement = null;
var exporter = null;
var spinner = null;
switch (gridName) {
case "data":
exporter = $scope.gridData.exporter;
spinner = "isExportingData";
break;
case "details":
exporter = $scope.gridDetail.exporter;
spinner = "isExportingDetails";
break;
} // switch
$scope[spinner] = true;
switch (export_format) {
case "visible_csv":
myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
exporter.csvExport("visible", "visible", myElement);
break;
case "all_csv":
myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
exporter.csvExport("all", "all", myElement);
break;
} // switch
$scope[spinner] = false;
}; // Export
$scope.FormatExportDates = function (grid, row, col, value) {
return ((col.name.substr(col.name.length - 4).toLowerCase() == "date") && (value !== undefined) && (value !== null)) ? new Date(parseInt(value.substr(6))).toISOString().split("T")[0] : value;
}; // FormatExportDates
$scope.clearSelections = function() {
$scope.refreshData();
////$scope.CDADetails.data = [];
}; // clearSelections
$scope.refreshData = function() {
$scope.fillRowData();
//$scope.CDADetails.data = [];
}; // refreshData
$scope.lessThan = function (property, value) {
return function (item) {
return item[property] < value;
}
}; // lessThan - Filter
angular.element(document).ready(function() {
$scope.GatherFilters = $rootScope.GatherFilters;
$scope.fillGroupings();
$scope.refreshData();
$(document).on("click", "a[class^='base-']", function() { // targets anything with base- class in it, starts with it
var link = $(this);
var rowID = link.data("row-id");
var rowLvl = link.data("row-level");
var start = 0;
$("ul[id=" + rowID + "-E]").toggle(); // Expand or Collapse the clicked item
var symbol = $(this).closest("li").children("span:first");
symbol.hasClass("glyphicon glyphicon-menu-right") ? symbol.removeClass("glyphicon glyphicon-menu-right").addClass("glyphicon glyphicon-menu-down") : symbol.removeClass("glyphicon glyphicon-menu-down").addClass("glyphicon glyphicon-menu-right");
// Show or Hide the corresponding row data items
$.each($("div[data-parent='" + rowID + "']"), function (key, value) {
var rid = $(this).data("row-id");
// Only Collapse if it is already Expanded and we are Collapsing the Level 3 Parent
if ((rowLvl == 3) && ($(this).is(":visible"))) {
$.each($("div[data-parent='" + rid + "']:visible"), function (key, value) {
$(this).hide();
}); // foreach of the Level 1 children with the current Level 2 Parent ID
var smbl = $("a[data-row-id='" + rid + "']").closest("li").children("span:first");
$("ul[id=" + rid + "-E]").hide(); // Collapse the sub menu item
smbl.removeClass("glyphicon glyphicon-menu-down").addClass("glyphicon glyphicon-menu-right");
} // if we are on a Level 3 item and are Collapsing it
$(this).toggle(); // Show/Hide the Level
}); // foreach of the Level 2 items within the clicked Level 3 Parent
}); // Click event for tree view
// Setup the date control
$("[ng-model='MostRecentDate']").closest(".input-group.date").datetimepicker({
format: "L", // "MM/DD/YYYY"
minDate: moment("01/01/2012", "MM/DD/YYYY"),
maxDate: FormatDateMDYYYY(new Date(), "/"),
defaultDate: FormatDateMDYYYY(new Date(), "/")
}).on("dp.change", function (e) {
$scope.MostRecentDate = $(e.target).find("input").val();
});
// Setup the hover on rows
$(document).on("mouseenter", "li a[data-row-id], div[data-row-id]", function() {
var rid = $(this).data("row-id");
$("div[data-row-id='" + rid + "'] div div").addClass("highlight");
$("a[data-row-id='" + rid + "']").addClass("highlight");
})
.on("mouseleave", "li a[data-row-id], div[data-row-id]", function() {
var rid = $(this).data("row-id");
$("div[data-row-id='" + rid + "'] div div").removeClass("highlight");
$("a[data-row-id='" + rid + "']").removeClass("highlight");
});
}); // Document Ready
$scope.CDADetailsSummary = {
fastWatch: true,
data: [],
enableColumnResizing: true,
flatEntityAccess: true,
enableSorting: true,
enableFiltering: true,
enableRowHeaderSelection: false,
enableRowSelection: true,
showColumnFooter: true,
multiSelect: false,
exporterCsvFilename: "CDADetailsSummary_" + Today + ".csv",
exporterFieldCallback: $scope.FormatExportDates,
exporterMenuCsv: false,
exporterMenuPdf: false,
enableGridMenu: true,
paginationPageSizes: [15, 25, 50, 75, 100, 250],
paginationPageSize: 15,
columnDefs: [
{ name: "AccountNumber", field: "AccountNumber", displayName: "Account Number", type: "string", width: 150 },
{ name: "AccountName", field: "AccountName", displayName: "Account Name", type: "string", width: 150 },
{ name: "FiscalYear", field: "FiscalYear", displayName: "Fiscal Year", type: "number", width: 150 },
{ name: "FiscalMonth", field: "FiscalMonth", displayName: "Fiscal Month", type: "number", width: 150 },
{ name: "ActualAmount", field: "ActualAmount", displayName: "Actual Amount", type: "number", cellFilter: "currency:$:0", cellClass: "text-right", width: 120 },
{ name: "BudgetAmount", field: "BudgetAmount", displayName: "Budget Amount", type: "number", cellFilter: "currency:$:0", cellClass: "text-right", width: 120 },
{ name: "PandLGroup", field: "PandLGroup", displayName: "PandLGroup", type: "string", width: 150 },
{ name: "CategoryCode", field: "CategoryCode", displayName: "Category Code", type: "string", width: 120 },
{ name: "Company", field: "Company", displayName: "Company", type: "string", width: 120 },
{ name: "Division", field: "Division", displayName: "Division", type: "string", width: 120 },
{ name: "RegionalVicePresident", field: "RegionalVicePresident", displayName: "RVP", type: "string", width: 150 },
{ name: "SeniorRegionalManager", field: "SeniorRegionalManager", displayName: "SRM", type: "string", width: 150 },
{ name: "RegionalManager", field: "RegionalManager", displayName: "RM", type: "string", width: 150 },
{ name: "AccountManager", field: "AccountManager", displayName: "Account Manager", type: "string", width: 150 },
{ name: "BusinessUnit", field: "BusinessUnit", displayName: "Business Unit", type: "string", width: 120 }
],
onRegisterApi: function (gridApi) {
$scope.gridData = gridApi;
gridApi.cellNav.on.navigate($scope, function (newRowcol, oldRowCol) {
$scope.fillTabCDADetails(newRowcol.row.entity.AccountNumber);
});
} // onRegisterApi
//gridApi.cellNav.on.navigate($scope, function (newRowcol, oldRowCol) {
// console.log($scope.BusinessUnit);
// if ($scope.BusinessUnit !== null) {
// $scope.fillTabCDADetails($scope.BusinessUnit);
// } // if this is a non-period field
//});
//gridApi.core.on.rowsRendered($scope, function (grid) {
// $('#cdaSummaryGridDataMessage').hide();
// $('#cdaSummaryGridLoadingMessage').show();
//});
// }
}; // CDADetailsSummary
$scope.CDADetails = {
fastWatch: true,
data: [],
enableColumnResizing: true,
flatEntityAccess: true,
enableSorting: true,
enableFiltering: true,
enableRowHeaderSelection: false,
enableRowSelection: true,
showColumnFooter: true,
multiSelect: false,
exporterCsvFilename: "EmployeeMaster_" + Today + ".csv",
exporterFieldCallback: $scope.FormatExportDates,
exporterMenuCsv: false,
exporterMenuPdf: false,
enableGridMenu: true,
paginationPageSizes: [15, 25, 50, 75, 100, 250],
paginationPageSize: 15,
useExternalPagination: true,
columnDefs: [
{ name: "AccountNumber", field: "AccountNumber", displayName: "Account Number", type: "string", width: 150 },
{ name: "AccountName", field: "AccountName", displayName: "Account Name", type: "string", width: 150 },
{ name: "GLDate", field: "GLDate", displayName: "GL Date", type: "number", width: 150 },
{ name: "ActualAmount", field: "ActualAmount", displayName: "Actual Amount", type: "number", cellFilter: "currency:$:0", cellClass: "text-right", width: 120 },
{ name: "BudgetAmount", field: "BudgetAmount", displayName: "Budget Amount", type: "number", cellFilter: "currency:$:0", cellClass: "text-right", width: 120 },
{ name: "Description", field: "Description", displayName: "Description", type: "string", width: 75 },
{ name: "Remark", field: "Remark", displayName: "Remark", type: "string", width: 90 },
{ name: "USerName", field: "UserName", displayName: "User Name", type: "string", width: 90 },
{ name: "BatchNo", field: "BatchNo", displayName: "Batch No", type: "string", width: 90 },
{ name: "BatchDate", field: "BatchDate", displayName: "Batch Date", type: "string", width: 90 },
{ name: "Source", field: "Source", displayName: "Source", type: "string", width: 90 },
{ name: "InvoiceNo", field: "InvoiceNo", displayName: "Invoice No", type: "string", width: 90 }
],
onRegisterApi: function (gridApi) {
$scope.gridDetail = gridApi;
} // onRegisterApi
//gridApi.cellNav.on.navigate($scope, function (newRowcol, oldRowCol) {
// console.log($scope.BusinessUnit);
// if ($scope.BusinessUnit !== null) {
// $scope.fillTabCDADetails($scope.BusinessUnit);
// } // if this is a non-period field
//});
//gridApi.core.on.rowsRendered($scope, function (grid) {
// $('#cdaSummaryGridDataMessage').hide();
// $('#cdaSummaryGridLoadingMessage').show();
//});
// }
}; // CDADetailsSummary
var deregister = $scope.$on("clearAll", function (event, data) {
if ($scope.IncidentRepprtingGrid.data !== null)
$scope.IncidentRepprtingGrid.data.length = 0;
$scope.isLoadingPrimaryData = null;
$scope.isLoadingDetailsData = null;
$scope.isExportingData = null;
$scope.isPrinting = null;
}); // deregister
$scope.$on("$destroy", deregister);
}
]);
app.directive("cdaTab", cdaTab);
var incrementDate = function (date, addMonth) {
var Result = new Date(date);
Result.setMonth(Result.getMonth() + addMonth)
return Result;
};
function cdaTab() {
return {
template: "<div class='grid' ui-grid='gridOptions'></div>",
restrict: "E",
scope: {
options: "="
},
controller: "ProfitAndLossController",
controllerAs: "vm",
bindToController: true,
link: function (scope, element, attrs) {
scope.gridOptions = {
data: scope.vm.options.Datax,
columnDefs: [
{ name: "firstName", field: "firstName", displayName: "First Name", type: "string", width: 150 },
{ name: "lastName", field: "lastName", displayName: "Last Name", type: "string", width: 150 },
]
};
} // link
}; // return
} // cdaTab
「ProfitAndLossController」はどのように見えますか？それを貼り付けることはできますか？ – Kyle
@KKKKKKKK私は 'ProfitAndLossController'を表示するように編集しました – Grandizer