阿赖的网页表格控件应用示例：控件功能扩展及高级应用

　

表格六，ID：table6
选择表格样式：
1

monitor

 广东东莞

2,223

04/17/1997

2

printer

 美国加州

107,526

02/13/1998
3

pc

 台湾

888

01/01/2000
4

scaner

 美国

69

11/19/2000
5 speaker 香港

1,412,351

09/18/2001
6

server

 台湾

4,097

11/12/2001
7 hub 新加坡

4,742

12/30/2001
8 note book 美国

698

02/08/2002

9

pocket pc

 香港

321

11/01/2002
10

mic

 广州

5,415

11/27/2002
11

net card

 北京

7,094

01/28/2003
12

louter

 加拿大

2,442

05/21/2003
13

cpu

 美国

1,046

12/17/2003


NO： 品名： 产地：
数量： 日期：

本示例主要演示如何自定义数据类型、如何增加和删除上下文菜单项（表格上点鼠标右键出现的菜单），以及结合网页

表单对数据进行编辑等功能，全部程序代码如下：

程序分析：

    (1)用户自定义数据类型：表格的第四列数据是逗号分隔千分位的数值，如果应该将数据进行一定转换再进行排序，

否则排序结果将是杂乱无章的，利用控件提供的extConvert接口可以做到这一点。转换程序算法很简单，就是将逗号去

掉然后转换成整数就行了，代码如下：

tc6.extConvert=function(Data,Type)

{

    switch(Type.toLowerCase())

    {

        case "comma_num": //comma_num就是新定义的类据类型了

            return parseInt(Data.replace(/,/g,""));

            break;

        default:

            return Data

    }

}

这样新的数据类型comma_num就诞生了，然后将第四列的数据类型设为comma_num排序结果就准确了，如下：

tc6.setDataType("num|char|cnbh|comma_num|date")

　

    (2)上下文菜单(tblMenu和ctrMenu)的扩展：控件提供的菜单本身又是一个可扩展的控件，它的方法有：add、remove、show、hide，还可通过item数组对象来引用菜单项。本例通过扩展菜单演示了即时更改表格外观风格的功能，非常的实用！看看其中一段程序：

tc6.tblMenu.add("绿茵豪情").onclick=function()

add方法返回了菜单项item对象，因此在add方法之后就可以直接定义onclick事件的功能，这是很简洁灵法的用法。其它的代码留给大家慢慢研究。

    (3)表格数据编辑功能：我只想说这个例子对于用ASP、JSP、PHP之类进行数据库处理的程序员一定很有启发作用。

最后欢迎大家与我多多交流！

copywrite by 赖国欣 2003 All right reserved

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