Composants de table qui verrouillent la ligne et les en-têtes de colonne

1. Introduire une définition de style dans la page

<style>

.LockHeadTable {comportement: url (/oblog312/lockheadtable.htc)}

</ style>

2. Ajoutez l'instruction "class =" LockheadTable "" à la définition de la table qui doit verrouiller l'en-tête de ligne et de colonne. Les autres paramètres incluent

Rowheadnum = "Count de ligne verrouillé"

Colheadnum = "numéro de colonne verrouillée"

RowheadStyle = "Line Head Style"

ColheadStyle = "Style d'en-tête de liste"

RowStyle = "Style de ligne 1 | Style de ligne 2 |… | Style de ligne N"

Focusstyle = "Le style lorsque vous obtenez le foyer de la souris"

3. Lorsque vous cliquez sur le titre de la ligne, vous pouvez trier les données.

Avis:

Lorsque vous utilisez ce composant, les cellules des en-têtes de table de ligne ne sont pas autorisées à traverser les rangées

exemple:

<tableClass = "LockheadTable" Rowheadnum = 3Colheadnum = 1RowHeadStyle = "Background: # f7f7f7; Color: Black;" ColheadStyle = "Background: # f7f7f7; Color: Black;" Rowstyle = "Background: # f7f7f7; Color: Black;" RowStyle = "Background : #Ffffff; couleur: noir; | arrière-plan: # f7f7f7; couleur: noir; "focusstyle =" fond: vert; couleur: blanc; "width =" 1500 "border =" 1 "cellpadding =" 3 "cellpacing =" 0 "align =" Center ">

Code source:

LockheadTable.htc (programme composant)

<Public: composant>

<Public: propriétéName = "Rowheadnum" />

<Public: PropertyName = "Colheadnum" />

<Public: propriétéName = "RowheadStyle" />

<Public: PropertyName = "ColheadStyle" />

<Public: PropertyName = "Rowstyle" />

<Public: propriétéName = "focusstyle" />

<cript>

// initialisation

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

// Définissez l'en-tête de table de ligne

Vari, J, Rowitem, CellItem;

rowhead = element.clonenode (true);

pour (i = 0; i <rowheadnum; i ++) {

rowItem = element.Rows (i);

rowitem.style.csstext = 'z-index: 10; position: relative; top: expression (this.offsetparent.scrolltop);' + rowheadStyle;

}

// Définissez l'en-tête de liste

for (i = 0; i <element.Rows.length; i ++) {

rowItem = element.Rows (i);

if (i> = rowheadnum) {

rowitem.style.csstext = "position: relative;" + arrrowstyle [(i-rowheadnum)% arrrowstyle.length];

if (focusstyle! = null) {

rowitem.onmouseOver = function () {this.style.csstext = "position: relative;" + focusstyle;}