相关代码 |
|
阿赖网页表格控件应用示例
P {
MARGIN: 3px; body: font-size:10pt
}
BODY {
FONT-SIZE: 10pt
}
阿赖的网页表格控件应用示例：控件参数的使用
表格一，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： color=#800000>"background-color:lightcyan;|background-color:palegoldenrod;"
-- 设置各表格行的样式，给定两种背景色(用|分隔)交替作用于各行。
参数7： color=#800000>"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/
//表格一
tc1=new alai_tc(table1)
//表格二
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;")
//表格三
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;")