1. Представьте определение стиля на странице
<style>
.Lockheadtable {поведение: url (/oblog312/lockheadtable.htc)}
</style>
2. Добавьте оператор «class =« lockheadtable »в определение таблицы, которое должно заблокировать заголовок строки и столбца. Другие параметры включают
Rowheadnum = "заблокированное количество строк"
Colheadnum = "Заблокированный номер столбца"
Rowheadstyle = "Стиль головы линии"
Colheadstyle = "Стиль заголовка списка"
Rowstyle = "Стиль линии 1 | Стиль строки 2 |… | Стиль линии n"
FocusStyle = "Стиль, когда вы получаете фокус мыши"
3. При нажатии на заголовок строки вы можете сортировать данные.
Уведомление:
При использовании этого компонента ячейки в заголовках таблиц строк не разрешают пересекать ряды
пример:
<tableClass = "lockheadtable" rowheadnum = 3colheadnum = 1rowheadstyle = "Фон:#f7f7f7; цвет: черный;" colheadstyle = "Фон:#f7f7f7; color: black;" rowstyle = "Фон:#f7f7f7; color: black;" rowstyle = "фон : #Ffffff; цвет: черный;
исходный код:
Lockheadtable.htc (компонентная программа)
<Public: компонент>
<Public: propertyname = "rowheadnum"/>
<Public: propertyname = "colheadnum"/>
<Public: propertyname = "rowheadstyle"/>
<Public: propertyname = "colheadstyle"/>
<Public: propertyname = "rowstyle"/>
<Public: PropertyName = "FocusStyle"/>
<Скрипт>
// инициализация
Rowheadnum = (rowheadnum == null? 0: parseint (rowheadnum, 10));
Colheadnum = (colheadnum == null? 0: parseint (colheadnum, 10));
Rowheadstyle = (rowheadstyle == null? "": Rowheadstyle);
Colheadstyle = (colheadstyle == null? "": Colheadstyle);
arrrowStyle = (rowstyle == null? Newarray (""): rowstyle.split ("|"));
// Установить заголовок таблицы строк
Vari, J, Rowitem, Cellitem;
rowhead = element.clonenode (true);
for (i = 0; i <rowheadnum; i ++) {
rowitem = element.rows (i);
rowitem.style.csstext = 'z-index: 10; позиция: относительно; top: Expression (this.offsetParent.scrolltop);'+rowheadstyle;
}
// Установить заголовок списка
for (i = 0; i <element.rows.length; i ++) {
rowitem = element.rows (i);
if (i> = rowheadnum) {
rowitem.style.csstext = "Положение: относительно;"+arrrowstyle [(i-rowheadnum)%arrrowstyle.length];
if (FocusStyle! = NULL) {
rowitem.onmouseover = function () {this.style.csstext = "Положение: относительно;"+focusstyle;}