Select an appropriate dHtml Grid Solution

Currently, there are four mainstream online solutions:

1 dhtmlxGrid
Http://www.scbr.com/docs/products/dhtmlxGrid/index.shtml
The free version can fill in tables, and the tables are also very beautiful. However, data cannot be obtained, or modified table content can be serialized into xml, which is only available in Professional Edition.

2 activewidgets-grid 1.0.0
Http://www.activewidgets.com/
Powerful functions, even paging, and nice skin on the interface. But 1.0 cannot fetch data. 2.0 is not free,

3 DHTMLGrid Ver0.92
Http://dhtmlgrid.sourceforge.net/
Simple functions and ugly Interfaces

4 os3grid 0.6
Http://os3grid.sourceforge.net
The interface is simple. Although the architecture is not good, it can be expanded, and it is LGPL license after all.

In the end, I chose os3grid for the salary entry interface.

The code for creating the interface is:
// Create an OS3Grid instance
Var g = new OS3Grid ();

// Set the callback for modifications
G. onchange = row_modified;

G. set_size ("400px", "200px ");

// Grid Headers are the grid column names
G. set_headers ('Nick ', 'name', 'email addr ');

// If contents is bigger than container, Grid will automatically show scrollbars
G. set_scrollbars (true );

// The grid will have a solid border (these are CSS attributes)
G. set_border (1, "solid", "# cccccc ");

// Now, we add some rows
G. add_row ("fsoft", "Fabio Rotondo", "fsoft (@) sourceforge (dot) net ");
G. set_row_attr (-1, 'Magic ', 'Magic-fsoft ');
G. set_row_attr (-1, 'changed ', 'no ');

G. add_row ("nick", "Nick Fury", "nick (@) sourceforge (dot) net ");
G. set_row_attr (-1, 'Magic ', 'Magic-nick ');
G. set_row_attr (-1, 'changed ', 'no ');

G. add_row ("john", "John JJ Jameson", "john (@) sourceforge (dot) net ");
G. set_row_attr (-1, 'Magic ', 'Magic-john ');
G. set_row_attr (-1, 'changed ', 'no ');

G. add_row ("reds", "Mary Jane Watson", "mj (@) sourceforge (dot) net ");
G. set_row_attr (-1, 'Magic ', 'Magic-mj ');
G. set_row_attr (-1, 'changed ', 'no ');

G. add_row ("white", "Barry White", "barryw (@) sourceforge (dot) net ");
G. set_row_attr (-1, 'Magic ', 'Magic-barryw ');
G. set_row_attr (-1, 'changed ', 'no ');

// Enable sortable rows
G. set_sortable (true );

// Enable highlight of rows with the mouse
G. set_highlight (true );

G. set_col_editable (1, "txt ");
G. set_col_editable (2, "txt ");

G. sort_on_edit = true;

// Show the grid replacing the original HTML object with the "grid" ID.
G. render ('grid ');

This is the most critical code for getting data.

Var l = g. length ();
Var t;
Var data, attrs;
Var s = "";
Var I, v;

For (t = 0; t {
Data = g. get_row (t );
Alert (data [0] + data [1] + data [2]);

}

Trackback: http://tb.blog.csdn.net/TrackBack.aspx? PostId = 667744