1.option items. Object: TableTree4J
option
config.treeMode: The mode of the tree,value: "GRID"|"MENU"
config.treeStyle: The style of the tree,value: "GRIDTREESTYLE"|"MENUTREESTYLE"
config.dafultTarget: Dafult link target,value: null|String
config.rootNodeBtn: Boolean show the root node button,value: true|false
config.folderAutoUrl: Boolean auto to add url to the folder,value: true|false
config.nodeHrefSelectBg: Boolean highlight the selected leaf node,value: true|false
config.hrefOnfouceLine: Boolean the fouce link show dashed,value: true|false
config.hrefIconOnfouceLine: Boolean the fouce ICON link show dashed,value: true|false
config.showTipTitle: Boolean the link show tip,value: true|false
config.showStatusText: Boolean the link show status tip,value: true|false
config.inOrder: Boolean order the node,value: true|false
config.useCookies: Boolean use cookies to save the node status(open or close),value: true|false
config.cookieTime: The live time of Cookie,value: 30*24*60*60*1000
config.useIcon: Boolean the node use icon,value: true|false
config.useLine: Boolean the tree use node dashed,value: true|false
config.booleanInitOpenAll: Boolean open all node when the tree init,value: true|false
config.booleanHighLightRow: HighLight the select row,value: true|false
config.highLightRowClassName: The style of the highlight row,value: "GridHighLightRow"
setImgRootPath(path): Change the image root path,Param: path of the dir
The dafult option of GridTree mode and MenuTree mode :
option |
GridTree mode |
MenuTree mode |
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.The functions and vars of the TableTree4J Object
Explain the useful functions and vars :
* new TableTree4J(objectName,rootPath): The formation function of TableTree4J class. Param(instantiation name,TableTree4J root path):
* tableDesc: A var,user to describe the table label
* setHeader(arrayHeader,id,headerWidthList,booleanOpen,classStyle,hrefTip,hrefStatusText,icon,iconOpen)
The function of the GridTree mode to set the header of the table. Param(values Array,root id,width value Array,boolean open,css className,link tip,link status tip,close icon,open icon)
* gridHeaderColStyleArray: Grid header col class name array
* gridDataCloStyleArray: Grid data col class name array
* addGirdNode(dataList,id,pid,booleanOpen,order,url,target,hrefTip,hrefStatusText,classStyle,icon,iconOpen):
The function of the GridTree mode to add node. Param(values Array,node id,parent node id,boolean open,oder,link,link target,link tip,ink status tip,css className,close icon,open icon)
* toMenuMode(): The function of the MenuTree mode to init the tree
* setMenuRoot(rootName,id,booleanOpen,classStyle,hrefTip,hrefStatusText,icon,iconOpen):
The function of the MenuTree mode to set the root node. Param(root name,root node id,boolean open,css className,link tip,ink status tip,close icon,open icon)
* addMenuNode(menuName,id,pid,booleanOpen,order,url,target,hrefTip,hrefStatusText,classStyle,icon,iconOpen):
The function of the MenuTree mode to add node. Param(node name,node id,parent node id,boolean open,order,link,link target,link tip,ink status tip,css className,close icon,open icon)
* printTableTreeToElement(eleId): The function will print the tree to a html element,it can be use after the html has inited. Param(an id of html element)
* printTableTree(): The function will print the tree,if use thie function to print the tree ,it must be use when the html init.
* findTreeNodeByMapId(nodeId): Find a node by nodeId,this function will be return a node object.
* removeTreeCookies(): Remove all the cookies of the tree.
* openAllNodes(): Open all nodes.
* closeAllNodes(): Close all nodes.
The flow of build a GridTree:
//init a tree object
var gridTree=new TableTree4J("gridTree","../");
//desc the table
gridTree.tableDesc="<table border=\"1\" class=\"GridView\" width=\"100%\" id=\"table1\"
cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\"
bordercolordark=\"#C0C0C0\" bordercolorlight=\"#C0C0C0\" >";
//if you want to change the dafule option,you can write in here
//gridTree.config.XXX=XXX;.....
//set the table header
var headerDataList=new Array("ModuleName","CreateTime","Status","Option");
//set the TD width value array
var widthList=new Array("20%","40%","10%","30%");
//table header
gridTree.setHeader(headerDataList,id,widthList,true,"GridHead","This is a tipTitle of head href!","header status text","","");
//set header col style
gridTree.gridHeaderColStyleArray=new Array("","","","centerClo");
//set data col style
gridTree.gridDataCloStyleArray=new Array("","","","centerClo");
//add nodes,you can use defferent language to circling add nodes here,just like jsp,asp,php and also.
//the value array of node
var dataList=new Array("SystemManager","2007-12-10","inUse",".......");
//add node
gridTree.addGirdNode(dataList,1,-1,null,3,"#",null,"hello!","Status Text",null,null,null);
......
......
//pring the tree to the div
gridTree.printTableTreeToElement("DivId");
//you can also use "gridTree.printTableTree()" to pring a tree
The flow of build a MenuTree
//init a tree object
var menuTree=new TableTree4J("menuTree","../");
//the function use to init the MenuTree.
menuTree.toMenuMode();
//if you want to change the dafule option,you can write in here,but you must write after the function called "toMenuMode()".
//menuTree.config.XXX=XXX;.....
//set the root node
menuTree.setMenuRoot("ModuleName",id,true,"MenuRoot","menu root href tip!","header status text","","");
//add nodes,you can use defferent language to circling add nodes here,just like jsp,asp,php and also.
menuTree.addMenuNode("SystemManager",1,-1,null,5,"#","_self","tip","",null,null,null);
......
......
//pring the tree
menuTree.printTableTreeToElement("DivId");
//menuTree.printTableTree()
3.The var of the node Object
vars:
dataList - value array
id - node id
pid - parent id
name - node name
order - node order
icon - node close icon
iconOpen - node open icon
classStyle - css className
url - link url
target - link target
hrefStatusText - the status tip of the node
booleanOpen - boolean open
hrefTip - link tip
childNodes - the child nodes of the node
pNode - the parent node
level - the level of the node
visible - boolean the node visible
cloBtnImg - the close button image of the node
opnBtnImg - the open button image of the node
booleanRoot - boolean is root
booleanLeaf - boolean is leaf
booleanLastNode - boolean is last child node in the parent node
htmlcode - the html code of the node
4.The CSS
dafult CSS file:
In the dafule css,the name of the items who called "GRIDTREESTYLE" and "MENUTREESTYLE" and their child items must not be change,because their name
was appointed in the js,you only can change their value.
If you want to use another css file,the file which you appointed must contains some items what I say in the upwards sentence.
GRIDTREESTYLE : The css class appointed the GridTree style except the tree header style.
MENUTREESTYLE : The css class appointed the MenuTree style except the tree header style.
*If you want to use another css file , I suggest you use the class name which in the dafult css file ,it may be better.