阿赖网页表格控件程序使用说明
功能概述 |
||
| 本控件采用面向对象的程序设计方法,提供灵活的方法实现对网页表格的各种控制。 | ||
| 一、表格排序 | 采用高效的排序算法对表格进行快速排序,内部支持字符串、数值、日期、中文拼音、中文笔画数五种类型 数据排序,并提供用户自定义数据类型的扩展接口。 | |
| 二、外观控制 | 程序提供了多种途径来实现对表格和控件的外观控制: (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