📄 dynamic-loading.html

📁 Here is the DHTML tree example with full source code
💻 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>
<script language="javascript" src="smart_grid_dl.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>Dynamic loading</strong></p>
<p align="justify">
Often tables have a lot of rows, so it takes a lot of time to load all them
even if you need to modify a couple of them. Sometimes it is almost impossible
to upload all the data because of the their huge size.<br><br>
<strong>Dynamic loading</strong> mode allows you to work with big data sets
and load data when you need them only. You just scroll the grid and it loads
the rows that should appear in visible area of the Smart Grid control.<br><br>
This way you could manage tables with thousands rows as easy as if they have
only a dozen of rows. The Smart Grid control placed below works with table that
has 1000 rows. Imagine you'd have to load all the rows every time you open the
page in browser - you'd spend a lot of time and traffic.<br><br>
The <strong>Dynamic loading</strong> is compatible with paging and
<a href="frozen-columns.html"><strong>Frozen columns</strong></a> mode.
</p>

<br>

<div id="smart_grid3" style="width:265px;height:110px">

</div>

<br><br><br><br>


<script language="JavaScript">

// 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() {
SmartCells.set_handlers();

// BIG DATA GRID

var smart_grid3 = new SmartGrid('smart_grid3');
	smart_grid3.on_save_cell = sg_cancel_edit;
	smart_grid3.image_path = 'img/';

	smart_grid3.dynamic_loading = true;

	smart_grid3.data_url = 'xml_big_data.php';


var sc31 = new SmartCell_text();
	sc31.params = {
db_field: 'name'
	};
var sc31_params = {
	'name': 'Id',
	'width': '140'
};
	sc31.readonly = true;
	smart_grid3.add_column(sc31_params, sc31);


var sc32 = new SmartCell_text();
	sc32.params = {
db_field: 'surname'
	};
var sc32_params = {
	'name': 'Number',
	'width': '100'
};
	smart_grid3.add_column(sc32_params, sc32);


	smart_grid3.show();

// dummy function (cancels changes)
function sg_cancel_edit() {

	this.cancel_edit();

}

// !BIG DATA GRID
}

//window.onload = sg_onload;
DOMReady.onDOMReadyHandler = sg_onload;
DOMReady.listenDOMReady();

</script>


<h1>Code of the example</h1>

<pre>

&lt;script language="JavaScript"&gt;

SmartCells.set_handlers();

var smart_grid3 = new SmartGrid('smart_grid3');
	smart_grid3.on_save_cell = sg_cancel_edit;
	smart_grid3.image_path = 'img/';

	smart_grid3.dynamic_loading = true;

	smart_grid3.data_url = 'xml_big_data.php';


var sc31 = new SmartCell_text();
	sc31.params = {
db_field: 'name'
	};
var sc31_params = {
	'name': 'Id',
	'width': '140'
};
	sc31.readonly = true;
	smart_grid3.add_column(sc31_params, sc31);


var sc32 = new SmartCell_text();
	sc32.params = {
db_field: 'surname'
	};
var sc32_params = {
	'name': 'Number',
	'width': '100'
};
	smart_grid3.add_column(sc32_params, sc32);


	smart_grid3.show();

// dummy function (cancels changes)
function sg_cancel_edit() {

	this.cancel_edit();

}

&lt;/script&gt;

</pre>

</body>

</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -