czaar999 Ответов: 1

Angularjs -UI-grid celltooltip для динамических столбцов

У меня есть хранимая процедура, которая возвращает динамические столбцы, и я смог нарисовать выходные данные с некоторой помощью в angularJS ui-grid. Теперь я пытаюсь добавить "CellToolTip". На приведенном ниже снимке экрана показан вывод хранимой процедуры, в которой столбцы 25-22 являются динамическими (что означает, что они могут варьироваться от 150 до 0 в зависимости от входных данных, заданных хранимой процедуре). Столбцы, начинающиеся с "Tgt", являются целевыми объектами, которые я не хочу отображать, но показываю целевое значение при наведении курсора на столбец. Мне удалось успешно скрыть столбцы "Tgt-"на веб-странице без проблем.

Теперь мне нужно показать их в виде подсказки Celltool, когда я наведу курсор мыши на динамические столбцы 25-22, с которыми мне нужна помощь. В приведенном ниже примере скриншота, когда я навожу курсор мыши на ячейку со значением 0.901, которое находится против столбца 25 и строки "Vat Fill Calc F/P Ratio" attributename, я хотел бы видеть "0.89". Но если я наведу курсор мыши на значение ячейки 0.89, которое находится против столбца 25 и строки "Vat Batch data F/P" attributename, я хотел бы видеть "No value", так как столбец Tgt-25 имеет NULL для этого имени атрибута.

В моем коде ниже в функции push я добавил "var key = 'Tgt-' + sortedKeysArray[i]; var value = row.entity[key];". Когда я ставлю точки останова, я получаю ошибку, говоря, что ключ не определен. Но если я жестко закодирую ключевое значение типа "var value = row.entity["Tgt-25"];", то оно будет работать нормально. Мне нужна помощь в создании динамических значений наведения, в которых я хотел бы получить целевые значения из соответствующих целевых столбцов. Заранее спасибо за помощь.

https://i.stack.imgur.com/93J3C.jpg

Что я уже пробовал:

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";
                    }
                }
            });
    }
}

1 Ответов

Рейтинг:
0

czaar999

Все, что мне нужно было сделать, это переместить значение "ключ" выше оператора 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";
                }
            }