阿赖的网页表格控件应用示例：控件参数的使用

表格一，ID：table1

1	monitor	广东东莞	436	04/17/1997
2	printer	美国加州	18	02/13/1998
3	pc	台湾	143	01/01/2000
4	scaner	美国	511	11/19/2000
5	speaker	香港	199	09/18/2001
6	server	台湾	97	11/12/2001
7	hub	新加坡	47	12/30/2001
8	note book	美国	698	02/08/2002
9	pocket pc	香港	26	11/01/2002
10	mic	广州	415	11/27/2002
11	net card	北京	794	01/28/2003
12	louter	加拿大	442	05/21/2003
13	cpu	美国	1046	12/17/2003

控制此表格的程序代码：

    tc1=new alai_tc(table1)

说明：这是表格控件最简单的调用，只有一个参数 -- 表格的ID，功能也很简单 -- 点击控件可对表格进行排序。

表格二，ID：table2　

1	monitor	广东东莞	436	04/17/1997
2	printer	美国加州	18	02/13/1998
3	pc	台湾	143	01/01/2000
4	scaner	美国	511	11/19/2000
5	speaker	香港	199	09/18/2001
6	server	台湾	97	11/12/2001
7	hub	新加坡	47	12/30/2001
8	note book	美国	698	02/08/2002
9	pocket pc	香港	26	11/01/2002
10	mic	广州	415	11/27/2002
11	net card	北京	794	01/28/2003
12	louter	加拿大	442	05/21/2003
13	cpu	美国	1046	12/17/2003

控制此表格的程序代码：

tc2=new alai_tc(table2,"No|品名|产地|数量|日期","num|char|cnpy|num|date","font-size:9pt;color:blue;","border-collapse:collapse;color:green;border:3 double gray;","border:1 outset;")

说明：此例比上例多了几个参数，各个参数的作用分析 --

    参数1：table2 -- 表格ID；

    参数2："No|品名|产地|数量|日期" -- 标题文字；

    参数3："num|char|cnpy|num|date" -- 数据类型，你可能还不理解数据类型的作用，那么请点击第一个控件和第二个控件，仔细对比一下排序的结果就会发现表格一的1、3、5列排序 结果其实是不正确的，因为缺省的情况下是按字符串（char类型）进行排序的，所以给它指定正确的数据类型后，排序结果才符合要求。第三列cnpy类型表示此列按中文拼音排序，而下面的表格三此列类型设为cnbh，中文笔画排序，请对比一下。

    参数4："font-size:9pt;color:blue;" -- 设置控件样式为字体大小9pt，颜色为兰色。

    参数5：(代码很长) ，设置表格的CSS样式。

    参数6："border:1 outset;" -- 设置表格中各个单元格的样式。

表格三，ID：table3　

1	monitor	广东东莞	436	04/17/1997
2	printer	美国加州	18	02/13/1998
3	pc	台湾	143	01/01/2000
4	scaner	美国	511	11/19/2000
5	speaker	香港	199	09/18/2001
6	server	台湾	97	11/12/2001
7	hub	新加坡	47	12/30/2001
8	note book	美国	698	02/08/2002
9	pocket pc	香港	26	11/01/2002
10	mic	广州	415	11/27/2002
11	net card	北京	794	01/28/2003
12	louter	加拿大	442	05/21/2003
13	cpu	美国	1046	12/17/2003

控制此表格的程序代码：

tc3=new alai_tc(table3,"No|品名|产地|数量|日期","num|char|cnbh|num|date","font-size:9pt;color:darkblue;background-color:sandybrown;","border-collapse:collapse;border:0;font-size:9pt;","background-color:lightcyan;|background-color:palegoldenrod;","color:red;|color:darkblue;|color:green;|color:blue;|color:#800000;")

说明：此例使用了全部的7个参数，下面主要分析一下最后两个 -- 

    参数6："background-color:lightcyan;|background-color:palegoldenrod;" -- 设置各表格行的样式，给定两种背景色(用|分隔)交替作用于各行。

    参数7："color:red;|color:darkblue;|color:green;|color:blue;|color:#800000;" -- 设置各表格列的样式，为各列设置了不同的字体颜色。

除了颜色，字体、尺寸、边框等都可以设。不要为两个参数设置重叠的样式，这样的结果是只有一个会起作用，例如两个参数都设置了交替背景颜色，参数6将优先起作用，出现交替的行背景色，不会出现交替的列背景色。

copywrite by 赖国欣 2003 All right reserved

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