阿赖网页表格控件程序使用说明


功能概述    

        本控件采用面向对象的程序设计方法,提供灵活的方法实现对网页表格的各种控制。
一、表格排序 采用高效的排序算法对表格进行快速排序,内部支持字符串、数值、日期、中文拼音、中文笔画数五种类型 数据排序,并提供用户自定义数据类型的扩展接口。
二、外观控制

程序提供了多种途径来实现对表格和控件的外观控制:

(1)使用tcStyle,tblStyle,rowStyle,colStyle四个参数 设置表格和控件的CSS样式值;

(2)调用setDataType,setTcStyle,setTblStyle,setRowStyle方法亦可达到相同的目的;

(3)调用mouseOver方法获得鼠标感应的动态效果。

三、列宽度调整

调用一次doResize方法之后,即可通过在控件列分隔线上拖动鼠标来改变表格列宽度的大小。

四、上下文菜单

调用contextMenu方法之后在控件或相应表格上点击鼠标右键就会出现相应的菜单,以执行排序、行列删除或移 动等功能,该菜单还可以根据用户的需要进行扩展。

五、数据选择

调用selectOne或multiSelect方法之后就可以对数据表进行单行或多行选择,用户可根据需要取出数据进行处理。

六、扩展接口

利用控件提供的接口对象和方法,用户还可根据自己的需要进行功能扩展。

局限性

本控件只适用于无行列折分的表格,对于复杂的表格可能会出现各种问题。

本控件在IE5.0和IE6.0下测试运行通过,在其它类型浏览器上可能无法运行。

 

 基本用法

程序组成

包括三个js文件:

(1)Alai_TC.js -- 控件程序

(2)pingying.js -- 按拼音排序中文字符集  

(3)bihua.js -- 按笔画排序的中字符集。

程序加载

使用时只要在网页中加入以下代码即可:

<script language"javascript" src="Alai_TC.js"></script>

至于另外两个文件不用管它,程序在需要的时候会动态加载的。

程序调用

控件的功能全部封装在函数alai_tc里,我们就是通过给该传递相应的参数,调用它的各种接口对象和方法就可以对表格进行各种控制(参数和方法见后)。有两种调用方法:

(1)var tc=alai_tc(参数表) 

(2)var tc=new alai_tc(参数表) 

建议用第二种方法,因为它是面向对象的方法,可以在同一页里进行多表控制,第一种方法则不行。

附加说明

请不用将代码粘贴到网页中,可能导致无法加载中文字符集或其它问题

请尽量将加载代码置前(推荐放在<head>之间),尽量将程序调用置后(推荐放到最后或window.onload事件里),因为程序加载需要一定时间,如果未加载完就调用程序就会出错。

三个js文件应放在同一目录,不要改文件名,可与你的网页可在不同的目录,调用时记得将路径加上。


参数表

1 tbl 被控表格的ID或序号(假设网页中有3个表格,其序号分别为0,1,2) 必需
2 caption 各列的标题文字,用"|"分隔,也可用setCaption方法设置 可选
3 dataType 指定各列的数据类型,用"|"分隔,也可用setDataType方法设置 可选
4 tcStyle 控件的CSS样式,也可用setTcStyle方法设置 可选
5 tblStyle 被控表格的CSS样式,也可用setTblStyle方法设置 可选
6 rowStyle 被控表格各行的CSS样式,可设多个用"|"分隔的样式,多个样式将交替呈现,也可用setRowStyle方法设置 可选
7 colStyle 被控表格各列的CSS样式,可设多个用"|"分隔的样式,多个样式将交替呈现,也可用setColStyle方法设置 可选

参数的附加说明:tbl可以是表格的ID或表格的序号,如一个表格ID为table1,它是网页上的第一个表格,则tc=new alai_tc(table1)和tc=new alai_tc(0)两种方法调用都可以,建议使用第一种方法。


控件接口对象和方法

setCaption 方法 设置各列的标题文字。

参数:用"|"分隔字符串。

setDataType 方法 指定各列的数据类型,使排序结果正确。

参数:dataType为用"|"分隔的各列的数据类型。可选的数据类型有:char(字符串)、num(数值)、date(日期型)、CNPY(中文拼音顺序)、CNBH(中文笔画顺序),以上类型大小写不敏感,用户还可通过extConvert接口扩展数据类型。如果类型未指定或指定了未定义的类型都会被当作char类型处理。

extConvert 方法 用户自定义数据类型接口。

参数:Data,DataType,为数据和数据类型

setTcStyle 方法 设置控件样式,参数值应该为CSS样式表

参数:style为CSS样式表。

setTblStyle 方法 设置表格样式,参数值应该为CSS样式表

参数:style为CSS样式表。

setRowStyle 方法 设置表格各行的样式,可设多个用"|"分隔的样式,多个样式将交替呈现

参数:style为CSS样式表,或多个用"|"分隔的样式表。

setColStyle 方法 设置表格各列的样式,可设多个用"|"分隔的样式,多个样式将交替呈现

参数:style为CSS样式表,或多个用"|"分隔的样式表。

doResize 方法 为控件加入控件表格列宽度大小的功能。无参数。
selectOne 方法 为表格加入单行选择的功能,即单击表格对应的行被选择。

有两个可选参数:bColor、fColor用于指定选择行的背景和前景色。

multiSelect 方法 为表格加入多行选择的功能。

有两个可选参数:bColor、fColor用于指定选择行的背景和前景色。

selRow 对象 或

对象数组

若为单行选择(调用了selectOne方法后),selRow保存已选择的表格行(TR)对象,若没有已选择的行则为null;若为多行选择(调用了multiSelect方法)selRow为一个数组,数组元素是已选择的行。
selData 字符串数组 selData保存已选择行各个单元格的数据,若为单行选择(调用了selectOne方法),selData为一维数组;若为多行选择(调用了multiSelect方法),selData为二维数组。
mouseOver 方法 为表格加入感应鼠标移动的动态效果。即鼠标移动时,对应的行或列改变颜色。

有两个可选参数:bColor、fColor用于指定选择行的背景和前景色。

contextMenu 方法 为控件和表格分别加入一个上下文菜单。无参数。
tblMenu ctrMenu 对象 表格的上下文菜单和控件的上下文菜单。这两个对象只有在调用了contextmenu方法之后才可用。可通过add/remove方法增加或删除菜项,通过show/hide方法控制显示/隐藏菜单。
ctr 对象 控件对象
tbl 对象 控件控制的表格对象
col 对象数组 控件上的列对象数组,数组元素为一单元格(TD)对象,如第一列为col[0]
err 字符串 运行错误信息,如果运行正常为一个空字符串。

请注意区分大小写


copywrite by 赖国欣 2003 All right reserved

Email: a@lai.com.cn website: http://www.9499.net