angularJS -UI-动态列的网格单元格工具提示

Question

我有一个 returns 动态列的存储过程，我能够在 angularJS ui-grid 上借助一些帮助绘制输出。现在我正在尝试添加“CellToolTip”。下面的屏幕截图是存储过程的输出，其中第 25 到 22 列是动态的（这意味着它们的范围可以从 150 到 0，具体取决于给存储过程的输入）。以“Tgt”开头的列是我不想显示的目标，但将鼠标悬停在该列上时会显示目标值。我成功地隐藏了网页上的“Tgt-”列。

现在，当我将鼠标悬停在我需要帮助的动态列 25 到 22 上时，我需要将它们显示为 CellToolTip。在下面的屏幕截图示例中，当我将鼠标悬停在针对第 25 列和行“Vat Fill Calc F/P Ratio”属性名称的值为 0.901 的单元格上时，我希望看到“0.89”。但是，如果我将鼠标悬停在针对第 25 列和行“Vat Batch data F/P”属性名称的单元格值 0.89 上，我希望看到“无值”，因为 Tgt-25 列的该属性名称为 NULL。

在我下面的推送功能代码中，我添加了“var key = 'Tgt-' + sortedKeysArray[i]; var value = row.entity[key];”。当我放置断点时，我收到错误消息，指出键未定义。但是如果我将键值硬编码为“var value = row.entity[“Tgt-25” ];" 然后它工作正常。我需要帮助使悬停值动态化，我想从它们各自的目标列中获取目标值。在此先感谢您的帮助。

            LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
                if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {

                    $scope.error = true;
                    $scope.errorDescription = "No data found for selected criteria.";
                } else {
                    $scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
                        data.VatMakeRptList.length
                    );
                    var VatMakeRptList = data.VatMakeRptList;
                    var keysArray = [];

                    keysArray = Object.keys(VatMakeRptList[0]);
                    var sortedKeysArray = keysArray.sort().reverse();

                    $scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'LineNumber', field: 'LineNumber', width: '20%', visible: true });
                    $scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'AttributeName', field: 'AttributeName', width: '20%', visible: true });


                    for (var i = 0; i < sortedKeysArray.length; i++) {
                        if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))

                            $scope.gridOptionsVatMakeRpt.columnDefs.push({
                                name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
                                    var key = 'Tgt-' + sortedKeysArray[i];
                                    // var value = row.entity["Tgt-25"];
                                    var value = row.entity[key];
                                    if (value != null) {
                                        return value;
                                    } else {
                                        return "No Value";
                                    }
                                }
                            });
                    }
                }

Answer 1

我所要做的就是将“Key”值移到 if 语句上方。

for (var i = 0; i < sortedKeysArray.length; i++) {
                   var key = 'Tgt-' + sortedKeysArray[i];
                    if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))

                        $scope.gridOptionsVatMakeRpt.columnDefs.push({
                            name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
                                
                                // var value = row.entity["Tgt-25"];
                                var value = row.entity[key];
                                if (value != null) {
                                    return value;
                                } else {
                                    return "No Value";
                                }
                            }

angularJS -UI-动态列的网格单元格工具提示

angularJS -UI-grid cellTooltip for dynamic columns

angularjs

angular-ui-grid

ui-grid