TableTree4J 1.1RE API
1.树的设置选项 Object: TableTree4J

设置选项说明:
config.treeMode: 树的显示模式,值: "GRID"|"MENU"
config.treeStyle: 树的样式,值: "GRIDTREESTYLE"|"MENUTREESTYLE"
config.dafultTarget: 树的超链接默认目标,值: null|String
config.rootNodeBtn: 根节点按钮是否显示,值: true|false
config.folderAutoUrl: 可折叠节点是否自动加链接,值: true|false
config.nodeHrefSelectBg: 选中的页节点是否加背景色高亮,值: true|false
config.hrefOnfouceLine: 选中的超链接文字是否显示虚线边框,值: true|false
config.hrefIconOnfouceLine: 选中的超链接图标是否显示虚线边框,值: true|false
config.showTipTitle: 超链接是否显示提示,值: true|false
config.showStatusText: 超链接是否显示状态栏提示,值: true|false
config.inOrder: 节点是否排序,值: true|false
config.useCookies: 节点是否使用cookies保存节点展开或关闭的状态,值: true|false
config.cookieTime: 保存的cookie生存期,值: 30*24*60*60*1000
config.useIcon: 节点是否使用图标,值: true|false
config.useLine: 树是否显示连接节点的虚线,值: true|false
config.booleanInitOpenAll: 树初始化时是否展开所有节点,值: true|false
config.booleanHighLightRow: 高亮鼠标所在行,值: true|false
config.highLightRowClassName: 高亮鼠标所在行使用的样式,值: "GridHighLightRow"
setImgRootPath(path): 设置更改节点图标的根目录,参数: path 路径

表格模式和菜单模式下的树默认设置:
设置 表格模式 菜单模式
config.treeMode "GRID" "MENU"
config.treeStyle "GRIDTREESTYLE" "MENUTREESTYLE"
config.dafultTarget null null
config.rootNodeBtn true false
config.folderAutoUrl false true
config.nodeHrefSelectBg false true
config.hrefOnfouceLine false false
config.hrefIconOnfouceLine false false
config.showTipTitle true true
config.showStatusText true true
config.inOrder true true
config.useCookies false false
config.useIcon false true
config.useLine true true
config.booleanInitOpenAll false false
config.booleanHighLightRow true false


2.树的函数及使用的变量 Object: TableTree4J

调用的函数及变量说明:
* new TableTree4J(objectName,rootPath): 树的构造函数 参数(实例化的名称,树的根目录):
* tableDesc: 树的tableDesc变量,用于表格模式描述表格
* setHeader(arrayHeader,id,headerWidthList,booleanOpen,classStyle,hrefTip,hrefStatusText,icon,iconOpen)
表格模式设置表格头函数 参数(值数组,根id,宽度比数组,是否展开,css类名,超链接提示,超链接状态栏提示,关闭时的图标,打开时的图标)
* gridHeaderColStyleArray: 定义表格头每一列的样式名集合
* gridDataCloStyleArray: 定义表格数据每一列的样式名集合
* addGirdNode(dataList,id,pid,booleanOpen,order,url,target,hrefTip,hrefStatusText,classStyle,icon,iconOpen):
表格模式增加节点函数 参数(值数组,节点id,父节点id,是否打开,排序顺序,超链接,超链接目标框架,超链接提示,超链接状态栏提示,css类名,关闭时的图标,打开时的图标)
* toMenuMode(): 菜单模式下的默认初始化
* setMenuRoot(rootName,id,booleanOpen,classStyle,hrefTip,hrefStatusText,icon,iconOpen):
菜单模式下设置菜单的根节点函数 参数(根节点名,根id,是否展开,css类名,超链接提示,超链接状态栏提示,关闭时的图标,打开时的图标)
* addMenuNode(menuName,id,pid,booleanOpen,order,url,target,hrefTip,hrefStatusText,classStyle,icon,iconOpen):
菜单模式下增加节点函数 参数(节点名,节点id,父节点id,是否打开,排序顺序,超链接,超链接目标框架,超链接提示,超链接状态栏提示,css类名,关闭时的图标,打开时的图标)
* printTableTreeToElement(eleId): 树的打印函数,可在网页加载完毕后使用显示树 参数(要把树打印到指定的html标签元素的id)
* printTableTree(): 树的打印函数,必须在网页加载没有完成的时候和网页一起初始化
* findTreeNodeByMapId(nodeId): 根据节点id找到节点,返回一个节点Node的实例
* removeTreeCookies(): 清除树的cookies
* openAllNodes(): 展开所有节点
* closeAllNodes(): 关闭所有节点

建造一个表格树的基本流程:
//初始化一个树
var gridTree=new TableTree4J("gridTree","../");
//设置表格描述
gridTree.tableDesc="<table border=\"1\" class=\"GridView\" width=\"100%\" id=\"table1\" cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" bordercolordark=\"#C0C0C0\" bordercolorlight=\"#C0C0C0\" >";
//如果要改变默认设置可在这里设置
//gridTree.config.XXX=XXX;.....
//设置表格头的值数组
var headerDataList=new Array("模块名","创建时间","状态","操作");
//设置表格的宽度数组
var widthList=new Array("20%","40%","10%","30%");
//设置表格头
gridTree.setHeader(headerDataList,id,widthList,true,"GridHead","This is a tipTitle of head href!","header status text","","");
//定义表个头列样式集合
gridTree.gridHeaderColStyleArray=new Array("","","","centerClo");
//定义表数据主体的列样式集合

gridTree.gridDataCloStyleArray=new Array("","","","centerClo");
//添加节点,这里可通过不同的变成语言循环调用增加数组,如jsp,asp,php等等
//节点值数组
var dataList=new Array("系统管理","2007-12-10","使用中",".......");
//添加节点
gridTree.addGirdNode(dataList,1,-1,null,3,"#",null,"hello!","状态栏文字",null,null,null);
......
......
//树的打印输出
gridTree.printTableTreeToElement("DivId");
//或者使用 gridTree.printTableTree() 输出树

建造一个菜单树的基本流程:
//初始化一个树
var menuTree=new TableTree4J("menuTree","../");
//菜单模式下的默认初始化 menuTree.toMenuMode(); //如果要改变默认设置可在这里设置,注意必须在toMenuMode()方法执行后
//menuTree.config.XXX=XXX;.....
//设置根节点菜单
menuTree.setMenuRoot("模块名",id,true,"MenuRoot","menu root href tip!","根状态栏文字","","");
//添加菜单节点,这里可通过不同的变成语言循环调用增加数组,如jsp,asp,php等等
menuTree.addMenuNode("系统管理",1,-1,null,5,"#","_self","呵呵呵","",null,null,null);
......
......
//树的打印输出
menuTree.printTableTreeToElement("DivId");
//或者使用 menuTree.printTableTree() 输出树

3.节点类Node变量说明 Object: Node

节点的变量:
dataList - 节点的值数组
id - 节点的id
pid - 节点的父节点id
name - 节点名
order - 节点的排序顺序
icon - 节点关闭时的图标
iconOpen - 节点打开时的图标
classStyle - 节点的css类名
url - 节点的url
target - 节点的url目标框架
hrefStatusText - 节点的状态栏提示
booleanOpen - 节点是否打开状态
hrefTip - 节点的url提示
childNodes - 节点的一级直接点集合
pNode - 节点的父节点对象
level - 节点的层次
visible - 节点是否可见
cloBtnImg - 节点的关闭按钮图标
opnBtnImg - 节点的展开按钮图标
booleanRoot - 是否为根节点
booleanLeaf - 是否为页节点
booleanLastNode - 是否是父节点中最后一个节点
htmlcode - 节点的html代码

4.CSS说明

默认的CSS样式文件说明:
在默认的CSS文件中 GRIDTREESTYLE 项及其子项和 MENUTREESTYLE 项及其子项为js内部指定属性,名字不能修改.
如果你要指定另外的CSS文件该文件必须有这两项及其子项.
GRIDTREESTYLE : 该风格定义了表格模式的树除表头外的风格
MENUTREESTYLE :该风格定义了菜单模式的树除根节点外的风格
*建议用户如果要自定义css按照默认css的模式还有沿用其命名,以达到最佳效果


E-mail:lannerk@qq.com
Copyright (c) 2007-2008 xcode-studio
TableTree4J version:1.1RE updata:2008.5.17