📄 frozen-columns.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_frozen.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>Frozen columns</strong></p>
<p align="justify">
Sometimes it is very convenient if part of table columns are always visible
independently on position of horizontal scrolling. The <strong>Frozen columns</strong>
mode allows to split table into two grids with independent horizontal scrollbar
each.<br><br>
The <strong>Frozen columns</strong> mode is compatible with paging, readonly
columns, and <a href="dynamic-loading.html"><strong>Dynamic loading</strong></a>
mode.
</p>

<br>

<div id="smart_grid" style="width:550px;height:110px">

</div>

<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();

// Frozen columns

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.set_default_value('');
	smart_grid.add_column(sc7_params, sc7);


	smart_grid.freeze_columns(2);


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

// !Frozen columns
}

//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_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.set_default_value('');
	smart_grid.add_column(sc7_params, sc7);


	smart_grid.freeze_columns(2);


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

&lt;/script&gt;

</pre>

</body>

</html>
⌨️ 快捷键说明

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