问题描述:

I have a grid with handsontable but this grid is wider than the screen. Here is a capture of what it looks like :

As you can see, I have a scroll bar because the grid is too wide.

The user insert some data in this grid and I make a request in ajax to test the content (required field, numeric field, ...) When there is an error, I return a number to know which cell is incorrect. I use this number like that :

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

With the .eq function I can select the cell I want. But when the grid is wider than the screen, I feel that the index of each cell is moved.

Here is a wonderful sketch of what I think :

So the indexes are dependants of the screen but not of the grid.

How can I overcome this problem please ?

EDIT :

The code where I declare my 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

In the ajax return, I get an array of values with some indexes where the data is incorrect and I try to color the cell in question. So I tried like that :

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)

}

网友答案:

Well to start off, there's virtual rendering happening horizontally meaning that if you were to have a table with many many columns, most aren't being rendered therefore jquery will never find them.

Now, to do this more efficiently, I would simply get the cell using the HOT methods included:

hot.getCell(row,col);

This returns to you the TD after which you could attempt to do the css like you were asking.

I don't think this would be the best way to go, however, because physically modifying the DOM doesn't work well with Handson given that it re-renders pretty frequently. Instead, you should be setting the custom renderers on each cell to respond to your validation efforts. A simplistic solution is to have an array with cell coordinates which should be marked as "invalid". The custom renderer could then ask if the current cell coordinates are in this array and if so, apply your css logic as you did above.

And just FYI, Handson has wonderful validation functionality built in which I highly recommend using. It will apply a class name for you if it fails validation so there wouldn't even be a need to do any fancy cell finding, just add the class you want and in your CSS file attach whatever style you want.

相关阅读:
Top