- Usual Background Rant
- The Basic Object
- Strategies for Non-Conforming Data
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Basic Object
The starting point for any reusable object is the initial speculation about what properties, constructor parameters, and methods are likely to be useful. Here's my first crack at it:
function OnHTMLDataGridRowSelect(rowNumber) {}
function HTMLDataGrid(controlVariable, frameDiv, initialData)
{
// Standard variables
this.var = controlVariable;
this.container = frameDiv;
// Properties
this.arrayData = (initialData) ? initialData : new Array();
this.bShowHeading = false;
this.bNamedFirstColumn = false;
this.bNumberRows = true;
// Methods
this.addRow = addDataRow;
this.updateRow = updateDataRow;
this.deleteRow = deleteDataRow;
this.addHeading = addHeadingRow;
function addDataRow(arRow) {}
function updateDataRow(rowNumber, arRow) {}
function deleteDataRow(rowNumber) {}
function addHeadingRow(arRow) { this.bShowHeading = true; }
}
NOTE
Click here to download a zip file containing the source files for this article.
The basic properties are the names for the rows and columns. The basic methods are the data-manipulation routines and the function to add a header row. Certainly, this lacks the methods to change the basic properties, and other implied functionality seems to be missing, but it's an obvious start. This one function of note is the only function outside the object: OnHMTLDataGridRowSelect. This function is only declared to avoid the annoying Object expected message, which would result from the HTML page not implementing the function.
The instance of the function is declared as follows:
var grid = new HTMLDataGrid("grid", "divGrid");
The name of the function instance is passed in along with the <DIV> element that will contain the table data. This could easily be expanded to allow for a containing frame or just a generic page location, but let's stick to this version. Also, in this case, no initial data is specified. We haven't decided on the data format, and the two-parameter constructor call is handled, anyway.
As tables and grids are generally two-dimensional in nature (with strategies for the third dimension left as a homework exercise), the data will be managed in the form of arrays of arrays. Here's how we add a row:
function addDataRow(arRow)
{
this.arrayData[arRow[0]] = arRow;
}
In this case, the first element of the added row becomes the index of the row. This simplifies the row removal:
function deleteDataRow(rowName)
{
this.arrayData[rowName] = null;
}
Redrawing the table is a matter of rewriting the contents of the container. If we were allowed a frameset, we could just rely on the browser scrollbars to show different parts of the table. In the case of <DIV> tags, there are two possibilities:
The area will expand to accommodate the layout of the data.
If we style this as an absolute position, a set number of data rows will be shown.
The problem with fixing the size of the grid display comes in fixing the size of the data. For text with the same font face, provided that there is no text wrapping, the rows will all be the same height. Even in the case of images, the height and width may be forced, if at the expense of image quality. But what if the data is a document or a link?