ส่วนประกอบตารางที่ล็อคส่วนหัวแถวและคอลัมน์

1. แนะนำนิยามสไตล์ในหน้า

<style>

.lockheadTable {พฤติกรรม: url (/oblog312/lockheadtable.htc)}

</style>

2. เพิ่มคำสั่ง "class =" LockheadTable "" ลงในคำจำกัดความของตารางที่ต้องล็อคส่วนหัวแถวและคอลัมน์ พารามิเตอร์อื่น ๆ รวมถึง

RowheadNum = "จำนวนแถวล็อค"

colheadNum = "หมายเลขคอลัมน์ล็อค"

RowheadStyle = "Line Head Style"

colheadstyle = "list header style"

Rowstyle = "Line Style 1 | Line Style 2 | ... | Line Style N"

focusstyle = "สไตล์เมื่อคุณได้รับโฟกัสของเมาส์"

3. เมื่อคลิกที่ชื่อแถวคุณสามารถเรียงลำดับข้อมูล

สังเกต:

เมื่อใช้ส่วนประกอบนี้เซลล์ในส่วนหัวของตารางแถวจะไม่ได้รับอนุญาตให้ข้ามแถว

ตัวอย่าง:

<tableclass = "lockheadTable" rowheadNum = 3ColheadNum = 1RowHeadStyle = "พื้นหลัง:#f7f7f7; สี: ดำ;" colheadstyle = "พื้นหลัง:#f7f7f7; สี: สีดำ;" Rowstyle = " : #FFFFFF; สี: สีดำ; | พื้นหลัง:#F7F7F7; สี: ดำ;

ซอร์สโค้ด:

LockheadTable.htc (โปรแกรมส่วนประกอบ)

<สาธารณะ: ส่วนประกอบ>

<สาธารณะ: PropertyName = "RowheadNum"/>

<สาธารณะ: propertyName = "colheadnum"/>

<สาธารณะ: PropertyName = "RowheadStyle"/>

<สาธารณะ: propertyName = "colheadstyle"/>

<สาธารณะ: PropertyName = "RowStyle"/>>

<สาธารณะ: PropertyName = "FocusStyle"/>>>

<script>

// การเริ่มต้น

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 (จริง);

สำหรับ (i = 0; i <rowheadnum; i ++) {

rowitem = element.rows (i);

rowitem.style.csstext = 'z-index: 10; ตำแหน่ง: สัมพัทธ์; ด้านบน: นิพจน์ (this.offsetparent.scrolltop);'+rowheadstyle;

-

// ตั้งส่วนหัวรายการ

สำหรับ (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;}