Overview
License
grrid.js is provided under the MIT license.
Dependencies
You just need Prototype.js (version >1.6.0.3). This is included in the github project.
Targeted Browsers
Firefox 2+, Internet Explorer 7+, Safari 3+, Google Chrome
Concept
The concept behind grrid.js is very simple. You need a few divs on your page, specifically called innerDiv and outerDiv (for now, at least), and also a couple of other divs to hold the row/col indicators.
The innerDiv will be sized so that the whole of your data grid will fit in it. For example, if you have 300 rows and 10 columns, and the cells are 100px wide and 20px high, innerDiv will be 1000×6000 pixels.
The outerDiv is effectively a viewport through which the user can see a portion of the innerDiv. As the user scrolls around, cells are removed or added to the innerDiv, so that the visible part of the innerDiv is populated with cells and data.
You need to instantiate a grrid.Grid object and give it a set of urls by calling the setUpGrid function. These urls tell the grid where it will get its data (among other things). You need to be running a server which will respond in the required way to these urls. (See the github wiki).
During editing, the grid will make periodic calls to the server to keep it informed regarding any edits that have been made. When the user wants to save, you should call the 'save' url on the server to persist the changes.
Due to the way prototype javascript ‘classes’ work, you can easily extend the various classes in grrid.js to have more properties and methods (for example, you can add other properties to the grrid.Cell class if you want a cell to be able to hold more information than just a value).
Documentation
For full documentation, see the github wiki.
Demo
See grrid.js in action on the demo page.
Contributing
If you want to contribute, or have any comments, please get in touch via github or email us.