📄 example.html
字号:
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="sg_styles.css">
<script language="JavaScript" type="text/javascript" src="ajax/JsHttpRequest.js"></script>
<script language="javascript" src="smart_cells_lib.js"></script>
<script language="javascript" src="smart_grid_lib.js"></script>
<link rel="STYLESHEET" type="text/css" href="rich_calendar/rich_calendar.css">
<script language="JavaScript" type="text/javascript" src="rich_calendar/rich_calendar.js"></script>
<script language="JavaScript" type="text/javascript" src="rich_calendar/rc_lang_en.js"></script>
<script language="JavaScript" type="text/javascript" src="rich_calendar/rc_lang_ru.js"></script>
<script language="javascript" src="domready/domready.js"></script>
<style type="text/css">
table.ts_table tr td{
height:20px;
white-space: nowrap;
padding:0px;
overflow:hidden;
border: 1px solid #000000;
}
</style>
</head>
<body>
<h1>Smart Grid v1.3</h1>
<p><strong>Smart Grid</strong> is an <em><strong>Ajax</strong></em>-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.
<br>
Powered with <strong>Smart Cells</strong> - Ajax-based library that allow to
make any part or your page editable.
</p>
<p><strong>Main features</strong></p>
<p>
<ul>
<li><strong>100% JavaScript</strong></li>
<li><strong>Cross-browser</strong> (works in <strong>IE</strong>,
<strong>Mozilla-based</strong> browsers
such as <strong>Firefox</strong>, <strong>Opera 9+</strong>, and
<strong>Safari 3.0</strong>)</li>
<li><strong>Multiple rows selection</strong> (you can delete many rows
simultaneously)</li>
<li><strong>Paging</strong> (navbar to move among pages, change page size)</li>
<li><strong>Tabbed order of cells in rows</strong> (you can move between
cells pressing Tab)</li>
<li><strong>Skinnable</strong> (change skins using API)</li>
<li><strong>Multilingual</strong></li>
<li><strong>Resizeable columns</strong> (drag&drop column borders of the grid header)</li>
<li><strong>Sortable</strong> (click on a header column to sort the grid)</li>
<li><strong>XML support</strong></li>
<li><strong>Non-editable cells</strong></li>
<li><a href="dynamic-loading.html"><strong>Dynamic loading</strong></a> (automatical loading data on grid scrolling)</li>
<li><a href="frozen-columns.html"><strong>Frozen columns</strong></a> (columns with independent horizontal scrollbar)</li>
<li><strong>Remote files generator</strong> (JS script to automatically build Smart Grid remote files corresponding to your table)</li>
<li><a href="http://www.richarea.com/demo/rich_calendar/"><strong>Advanced calendar</strong></a> for date cells<sup><font color="#FF0000">new</font></sup></li>
</ul>
</p>
<p><strong>How to use</strong></p>
<p>
<ul>
<li><em>Double-click on a cell</em> to edit it</li>
<li><em>Enter-key pressed or click outside the cell</em> to save changes</li>
<li><em>Cancel</em> to discard changes</li>
<li><em>Tab</em> to edit next cell in row</li>
<li><em>Mouse-click</em> to select a row. [Ctrl/Shift]-click to select
several rows</li>
</ul>
</p>
<p><strong>Cell types currently available</strong></p>
<p>
<ul>
<li>Text field</li>
<li>Textarea</li>
<li>Time</li>
<li>Drop down list</li>
<li>Checkbox</li>
<li>Image</li>
<li>Date (with calendar)<sup><font color="#FF0000">new</font></sup></li>
<li>Radiobox</li>
<li>Price</li>
</ul>
</p>
<p><strong>License</strong></p>
<p>
<strong>Free</strong> for non-commercial using. Copyright information must
stay intact. Please contact us for permission to use it in commercial projects.
</p>
<h1>Examples</h1>
You can use Smart Cell lib as a Standalone script (double-click on any cell
below):<br>
<table id="ts_table" class="ts_table" style="width: 200px; table-layout: fixed;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="ts_cell_4" class="ts_cell2">4</td>
<td id="ts_cell_5" class="ts_cell2">5</td>
<td id="ts_cell_6" class="ts_cell2">6</td>
<td id="ts_cell_7" class="ts_cell2">7</td>
<td id="ts_cell_8" class="ts_cell2">8</td>
</tr>
</table>
<br><br>
<strong>Paging, insert/update/delete operations, alternative skin:</strong><br>
<div id="smart_grid" style="width:550px;height:110px">
</div>
<br><br>
<strong>Default configuration:</strong><br>
<div id="smart_grid2" style="width:550px;height:110px">
</div>
<br>
<script language="JavaScript">
// post modify function
function pm_store_ts_cell() {
}
// embed Smart Grids in page when page is loaded as otherwise IE could fail
// loading the page (actually could embed them when DOM is ready yet)
function sg_onload() {
// Use Smart Cell functionality
var cell1_obj = document.getElementById('ts_cell_4');
var sc1 = new SmartCell_text(cell1_obj);
sc1.post_modify_func = pm_store_ts_cell;
sc1.set_value('First cell value');
sc1.show_value();
sc1.set_tab_next_cell('ts_cell_5');
SmartCells.add_smart_cell(sc1);
sc1.query_url = 'test_update.php';
//SmartCells.add_cell(cell1_obj, 'text');
var cell2_obj = document.getElementById('ts_cell_5');
var sc2 = new SmartCell_text(cell2_obj);
sc2.post_modify_func = pm_store_ts_cell;
sc2.set_value('Second cell value');
sc2.show_value();
sc2.set_tab_next_cell('ts_cell_6');
SmartCells.add_smart_cell(sc2);
sc2.query_url = 'test_update.php';
//SmartCells.add_cell(cell2_obj, 'text');
var cell3_obj = document.getElementById('ts_cell_6');
var sc3 = new SmartCell_select(cell3_obj);
sc3.add_option('1', 'First');
sc3.add_option('2', 'Second');
sc3.add_option('3', 'Third');
sc3.add_option('4', 'Forth');
sc3.set_value('3');
sc3.show_value();
sc3.set_tab_next_cell('ts_cell_7');
SmartCells.add_smart_cell(sc3);
sc3.query_url = 'test_update.php';
//SmartCells.add_cell(cell3_obj, 'select');
// assign a smart cell to the table cell
var cell4_obj = document.getElementById('ts_cell_7');
var sc4 = new SmartCell_time(cell4_obj);
sc4.set_value('10:00');
sc4.show_value();
sc4.set_tab_next_cell('ts_cell_8');
sc4.query_url = 'test_update.php';
SmartCells.add_smart_cell(sc4);
var cell5_obj = document.getElementById('ts_cell_8');
var sc5 = new SmartCell_image(cell5_obj);
sc5.folder = '/images';
sc5.preview_size = 200;
sc5.set_value(9);
sc5.show_value();
sc5.set_tab_next_cell('ts_cell_4');
SmartCells.add_smart_cell(sc5);
sc5.query_url = 'test_update.php';
SmartCells.set_handlers();
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';
smart_grid.actions_url = 'save_sg_table.php';
var sc0 = new SmartCell_image();
// sc0.language = 'en';
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';
smart_grid2.actions_url = 'save_sg_table.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'
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -