행 및 열 헤더를 잠그는 테이블 구성 요소

1. 페이지에 스타일 정의를 소개합니다

<스타일>

.lockheadtable {동작 : url (/oblog312/lockheadtable.htc)}

</스타일>

2. 행과 열 헤더를 잠그는 데 필요한 테이블 정의에 "class ="lockheadtable ""문을 추가하십시오. 다른 매개 변수에는 다음이 포함됩니다

rowheadnum = "잠긴 행 카운트"

colheadnum = "잠긴 열 번호"

rowheadstyle = "라인 헤드 스타일"

ColheadStyle = "목록 헤더 스타일"

rowstyle = "라인 스타일 1 | 라인 스타일 2 |… | 라인 스타일 n"

FocusStyle = "마우스의 초점을 얻는 스타일"

3. 행 제목을 클릭하면 데이터를 정렬 할 수 있습니다.

알아채다:

이 구성 요소를 사용할 때 행 테이블 헤더의 셀은 행을 교차 할 수 없습니다.

예:

<Tableclass = "Lockeadtable"rowheadnum = 3colheadnum = 1 RowheadheadStyle = "배경 :#f7f7f7; 색상 : 검은 색;"colheadstyle = "배경 :#f7f7f7; 컬러;"Rowstyle = "배경 :#f7f7f7; color;"rowstyle = "배경 : #ffffff; 색상 : 검은 색; | 배경 :#f7f7f7; 컬러 : 검은 색; "focusStyle ="배경 : 녹색; 색상 : 흰색; "1500"border = "1"셀 패딩 = "3"셀 패싱 = "0"align = "center">

소스 코드 :

Lockheadtable.htc (구성 요소 프로그램)

<public : 구성 요소>

<public : propertyname = "rowheadnum"/>

<public : propertyname = "colheadnum"/>

<public : propertyname = "rowheadStyle"/>

<public : PropertyName = "ColheadStyle"/>

<public : propertyname = "rowstyle"/>

<public : PropertyName = "FocusStyle"/>

<cript>

// 초기화

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; 위치 : 상대; 상단 : 표현식 (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 = "위치 : 상대;"+foccusstyle;}