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;}