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的模式还有沿用其命名，以达到最佳效果