Получить координаты с ручным столом шире экрана

У меня есть сетка с handsontable но эта сетка шире экрана. Вот снимок того, как это выглядит:

введите здесь описание изображения

Как видите, полоса прокрутки у меня есть, потому что сетка слишком широкая.

Пользователь вставляет некоторые данные в эту сетку, и я делаю запрос в ajax для проверки содержимого (обязательное поле, числовое поле, ...). Когда возникает ошибка, я возвращаю число, чтобы узнать, какая ячейка неверна. Я использую этот номер так:

$(cells).eq(jsonobject[item]-11).css("background-color","red");

С помощью функции .eq я могу выбрать нужную ячейку. Но когда сетка шире экрана, я чувствую, что индекс каждой ячейки перемещается.

Вот замечательный набросок того, что я думаю:

введите здесь описание изображения

Таким образом, индексы зависят от экрана, но не от сетки.

Как я могу преодолеть эту проблему, пожалуйста?

ИЗМЕНИТЬ:

Код, в котором я объявляю свой hot :

var container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement,
stretchH: 'all',
minSpareRows: 1,
observeChanges : true,
rowHeaders: false,
colHeaders: false,
contextMenu: true,

height: 550,
... //more options

В ответе ajax я получаю массив значений с некоторыми индексами, где данные неверны, и я пытаюсь покрасить соответствующую ячейку. Итак, я пробовал так:

for(var i=1; i<(data_traitement[0].length);i++ )
        {
            for(var item in jsonobject)
            {
                if((item % 2 ) == 0) //Si l'indice est pair, on affiche la couleur
                {
                    hotTraitement.getCell(i,jsonobject[item]-j).css("background-color","red");  //Here, firebug tells me "hotTraitement is undefined"           
                }else
                {
                    $(cells).eq(jsonobject[item-1]-1).qtip({
                        content : '<div id="bulle">'+jsonobject[item]+'</div>',                 
                        position: {                     
                            adjust: {
                                x: -100                                                    
                            }                   
                        },
                        style: {
                            classes: 'myCustomClass',   
                            def: false                
                        }                   
                    });
                }
            }
            j = j+3; //Just to loop through the rows (I have 3 cells in a row)
        }

person Erlaunis    schedule 03.08.2015    source источник


Ответы (1)


Начнем с того, что виртуальный рендеринг происходит горизонтально, что означает, что если у вас будет таблица с большим количеством столбцов, большинство из них не будут отображаться, поэтому jquery никогда их не найдет.

Теперь, чтобы сделать это более эффективно, я бы просто включил ячейку, используя ГОРЯЧИЕ методы:

hot.getCell(row,col);

Это возвращает вам TD, после чего вы можете попытаться сделать CSS, как вы просили.

Однако я не думаю, что это был бы лучший способ, потому что физическое изменение DOM не работает с Handson, учитывая, что он довольно часто перерисовывает. Вместо этого вы должны настроить пользовательские средства визуализации для каждой ячейки, чтобы они реагировали на ваши усилия по проверке. Упрощенное решение состоит в том, чтобы иметь массив с координатами ячеек, которые должны быть помечены как «недействительные». Затем пользовательский рендерер может спросить, находятся ли текущие координаты ячейки в этом массиве, и если да, примените свою логику css, как вы сделали выше.

И просто к вашему сведению, у Handson есть замечательная встроенная функция проверки, которую я настоятельно рекомендую использовать. Он применит для вас имя класса, если оно не пройдет проверку, поэтому даже не будет необходимости делать какие-либо причудливые поиски ячеек, просто добавьте класс, который вы хотите, и в вашем файле CSS прикрепите любой стиль, который вы хотите.

person ZekeDroid    schedule 03.08.2015
comment
Хорошо спасибо. По вашему совету попробую так: hot_traitement.getCell(i,jsonobject[item]-j).css("background-color","red"); Но не согласуется hot_traitement. Почему ? (Я уже установил: var hot_traitement = new Handsontable...) - person Erlaunis; 04.08.2015
comment
наверное проблемы с контекстом. опубликуйте jsfiddle или рассматриваемый код - person ZekeDroid; 04.08.2015
comment
если это обратный вызов ajax, то, вероятно, у вас нет правильного контекста. Я всегда против того, чтобы делать вещи глобальными, но для целей тестирования превратите свой горячий экземпляр в глобальную переменную (или прикрепите его к окну) и снова проверьте его, это должно работать. - person ZekeDroid; 04.08.2015
comment
Как я могу это сделать ? :/ - person Erlaunis; 05.08.2015
comment
Что ж, простой способ — сделать window.hotInstance = new Handson..., а затем получить доступ к нему таким же образом. Попробуй это. - person ZekeDroid; 05.08.2015