Smart Grid, an Ajax-driven table editing tool

Smart Grid is an Ajax-based table editing tool. Allows to manage DB tables without reloading web pages. 100% JavaScript that makes it possible to use it with any server-side technology.
Powered with Smart Cells - Ajax-based library that allow to make any part or your page editable.

Download Smart Grid

Main features

• 100% JavaScript
• Cross-browser (works in IE, Mozilla-based browsers such as Firefox, Opera 9+, and Safari 3.0)
• Multiple rows selection (you can delete many rows simultaneously)
• Paging (navbar to move among pages, change page size)
• Tabbed order of cells in rows (you can move between cells pressing Tab)
• Skinnable (change skins using API)
• Multilingual
• Resizeable columns (drag&drop column borders of the grid header)
• Sortable (click on a header column to sort the grid)
• XML support
• Non-editable cells
• Dynamic loading (automatical loading data on grid scrolling)
• Frozen columns (columns with independent horizontal scrollbar)
• Remote files generator (JS script to automatically build Smart Grid remote files corresponding to your table)
• Advanced calendar for date cells^new

How to use

• Double-click on a cell to edit it
• Enter-key pressed or click outside the cell to save changes
• Cancel to discard changes
• Tab to edit next cell in row
• Mouse-click to select a row. [Ctrl/Shift]-click to select several rows

Cell types currently available

• Text field
• Textarea
• Time
• Drop down list
• Checkbox
• Image
• Date (with calendar)^new
• Radiobox
• Price

License

Free for non-commercial using. Copyright information must stay intact. Please contact us for permission to use it in commercial projects.

Examples

Code examples

<script language="JavaScript">

var smart_grid = new SmartGrid('smart_grid');
	smart_grid.page_mode = true;
	smart_grid.current_page = 1;
	smart_grid.page_size = 3;
	smart_grid.image_path = '';

	smart_grid.data_url = 'xml_data.php';

var sc0 = new SmartCell_image();
	sc0.folder = '/images';
	sc0.preview_size = 500;
	sc0.set_value(4);
	sc0.params = {
db_field: ''
	};
var sc0_params = {
	'name': 'Picture',
	'width': '50'
};
	smart_grid.add_column(sc0_params, sc0);

var sc1 = new SmartCell_text();
	sc1.params = {
db_field: 'name'
	};
var sc1_params = {
	'name': 'Name',
	'width': '100'
};
	smart_grid.add_column(sc1_params, sc1);

var sc2 = new SmartCell_text();
	sc2.params = {
db_field: 'surname'
	};
var sc2_params = {
	'name': 'Surname',
	'width': '100'
};
	sc2.readonly = true;
	smart_grid.add_column(sc2_params, sc2);

var sc3 = new SmartCell_select();
	sc3.params = {
db_field: 'level'
	};
	sc3.add_option('1', 'First');
	sc3.add_option('2', 'Second');
	sc3.add_option('3', 'Third');
	sc3.add_option('4', 'Forth');
var sc3_params = {
	'name': 'Level',
	'width': '60'
};
	sc3.set_default_value('1');
	smart_grid.add_column(sc3_params, sc3);

var sc8 = new SmartCell_radio();
	sc8.group = 'table_group';
	sc8.params = {
db_field: 'chairman'
	};
var sc8_params = {
	'name': 'Chairman',
	'width': '70'
};
	smart_grid.add_column(sc8_params, sc8);

var sc4 = new SmartCell_time();
	sc4.params = {
db_field: 'time'
	};
var sc4_params = {
	'name': 'Time',
	'width': '50'
};
	sc4.set_default_value('11:00');
	smart_grid.add_column(sc4_params, sc4);

var sc5 = new SmartCell_textarea();
	sc5.params = {
db_field: 'description'
	};
var sc5_params = {
	'name': 'Description',
	'width': '150'
};
	sc5.set_default_value('');
	smart_grid.add_column(sc5_params, sc5);

var sc6 = new SmartCell_checkbox();
	sc6.params = {
db_field: 'status'
	};
var sc6_params = {
	'name': 'Active',
	'width': '50'
};
	sc6.set_default_value(0);
	smart_grid.add_column(sc6_params, sc6);

var sc10 = new SmartCell_price();
	sc10.params = {
db_field: 'amount'
	};
var sc10_params = {
	'name': 'Amount',
	'width': '60'
};
	smart_grid.add_column(sc10_params, sc10);

var sc7 = new SmartCell_date();
	sc7.params = {
db_field: 'created'
	};
var sc7_params = {
	'name': 'Created',
	'width': '80'
};
	sc7.rc_skin = 'alt';
	sc7.set_default_value('');
	smart_grid.add_column(sc7_params, sc7);


	smart_grid.show();
	smart_grid.change_skin('alt');


// SECOND GRID

var smart_grid2 = new SmartGrid('smart_grid2');
	smart_grid2.image_path = '';

	smart_grid2.data_url = 'xml_data.php';


var sc20 = new SmartCell_image();
	sc20.folder = '/images';
	sc20.preview_size = 500;
	sc20.set_value(4);
	sc20.params = {
db_field: ''
	};
var sc20_params = {
	'name': 'Picture',
	'width': '50'
};
	smart_grid2.add_column(sc20_params, sc20);

var sc21 = new SmartCell_text();
	sc21.params = {
db_field: 'name'
	};
var sc21_params = {
	'name': 'Name',
	'width': '100'
};
	smart_grid2.add_column(sc21_params, sc21);

var sc22 = new SmartCell_text();
	sc22.params = {
db_field: 'surname'
	};
var sc22_params = {
	'name': 'Surname',
	'width': '100'
};
	sc22.readonly = true;
	smart_grid2.add_column(sc22_params, sc22);

var sc23 = new SmartCell_select();
	sc23.params = {
db_field: 'level'
	};
	sc23.add_option('1', 'First');
	sc23.add_option('2', 'Second');
	sc23.add_option('3', 'Third');
	sc23.add_option('4', 'Forth');
var sc23_params = {
	'name': 'Level',
	'width': '60'
};
	sc23.set_default_value('1');
	smart_grid2.add_column(sc23_params, sc23);

var sc28 = new SmartCell_radio();
	sc28.group = 'table_group2';
	sc28.params = {
db_field: 'chairman'
	};
var sc28_params = {
	'name': 'Chairman',
	'width': '70'
};
	smart_grid2.add_column(sc28_params, sc28);

var sc24 = new SmartCell_time();
	sc24.params = {
db_field: 'time'
	};
var sc24_params = {
	'name': 'Time',
	'width': '50'
};
	sc24.set_default_value('11:00');
	smart_grid2.add_column(sc24_params, sc24);

var sc25 = new SmartCell_textarea();
	sc25.params = {
db_field: 'description'
	};
var sc25_params = {
	'name': 'Description',
	'width': '150'
};
	sc25.set_default_value('');
	smart_grid2.add_column(sc25_params, sc25);

var sc26 = new SmartCell_checkbox();
	sc26.params = {
db_field: 'status'
	};
var sc26_params = {
	'name': 'Active',
	'width': '50'
};
	sc26.set_default_value(0);
	smart_grid2.add_column(sc26_params, sc26);

var sc210 = new SmartCell_price();
	sc210.params = {
db_field: 'amount'
	};
var sc210_params = {
	'name': 'Amount',
	'width': '60'
};
	smart_grid2.add_column(sc210_params, sc210);

var sc27 = new SmartCell_date();
	sc27.params = {
db_field: 'created'
	};
var sc27_params = {
	'name': 'Created',
	'width': '80'
};
	sc27.set_default_value('');
	smart_grid2.add_column(sc27_params, sc27);

	smart_grid2.show();

// !SECOND GRID

</script>

Download Smart Grid