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.
Main features
How to use
Cell types currently available
License
Free for non-commercial using. Copyright information must stay intact. Please contact us for permission to use it in commercial projects.
4 | 5 | 6 | 7 | 8 |
<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 = 'img/'; smart_grid.row_height = 20; 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.row_height = 20; 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>