xtree,xloadtree API解析和实例

最新推荐文章于 2015-06-11 10:34:00 发布

熏肉大饼

最新推荐文章于 2015-06-11 10:34:00 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： xtree xloadtree

本文链接：https://blog.youkuaiyun.com/w5167839/article/details/39202017

版权

javascript 专栏收录该内容

5 篇文章

订阅专栏

js下载地址:http://download.youkuaiyun.com/detail/w5167839/7894001

XTREE API
本人英语不好,有误请不要见怪, xtree api英文地址:http://webfx.eae.net/dhtml/xtree/api.html
---------------------------------------------------------
WebFXTreeAbstractNode
父类对象有共同的函数和方法被WebFXTree和WebFXTreeItem两个子类对象继承;

参数
id          Number    只读属性，节点的唯一ID
                              如果只读HTML元素的id就能得到JS对象然后放入webFXTreeHandler集合.
text              String    节点的文本
action            String      响应关联uri给节点
open              Boolean     只读。返回节点是否打开如果没有子节点一直返回false
icon              String      节点图像,未指定时
openIcon          String      节点打开时的图像，未指定时
parentNode        Reference   关联父节点
childNodes        Array       所有子节点

方法
add(oNode, [bNoIdent]) Reference 添加
indent()               void       缩进
toggle()               void    切换
expand()               void    打开树节点
collapse()             void    关闭树节点
expandAll()            Void       打开所有节点
collapseAll()          Void    关闭所有节点
getNextSibling()       Reference 得到前一兄弟节点
getPreviousSibling()   Reference 得到后一的兄弟节点
toString()             String     返回HTML格式
--------------------------------------------------------
WebFXTree

构造方法:
new WebFXTree([text], [action], [behavior])

参数
text              String    节点的文本
action            String      响应关联uri给节点
behavior          String      节点的行为
icon              String      节点图像,未指定时
openIcon          String      节点打开时的图像，未指定时

属性：
rendered 标志位，boolean类型，表明树是否已创建并渲染

方法
getSelected()           Reference 得到被选中的对象
setBehavior(sBehavior) Void      默认为classic,如果设置为explore时可以使树节点展示看起来更像windows Explore
getBehavior()           String    返回classic/explore

---------------------------------------
WebFXTreeItem
构造方法
new WebFXTreeItem([text], [action], [parent], [icon], [openIcon])

参数
text              String    节点的文本
action            String      响应关联uri给节点
parent            Reference   父节点（可选参数）
icon              String      节点图像,未指定时
openIcon          String      节点打开时的图像，未指定时

方法
getFirst() Reference 返回一个子节点的引用
getLast() Reference 返回最后一个子节点的引用

实例
--------------------------------------------------------------
------------JSP view

<%@ page language="java" pageEncoding="gbk"%>
</html>
<%--1.注意三个js文件和一个css文件,还需要一个images文件夹里面放了显示文件的图片--%>
<script type="text/javascript" src="Js/xtree.js"></script>
<script type="text/javascript" src="Js/xmlextras.js"></script>
<script type="text/javascript" src="Js/xloadtree.js"></script>
<link type="text/css" rel="stylesheet" href="Js/xtree.css"></link>
<style type="text/css">
 body { background: white; color: black; }
 input { width: 120px; }
</style>
<body>
<script type="text/javascript">

/// XP Look
webFXTreeConfig.rootIcon		= "images/folder.png";
webFXTreeConfig.openRootIcon	          = "images/openfoldericon.png";
webFXTreeConfig.folderIcon		= "images/foldericon.png";
webFXTreeConfig.openFolderIcon	= "images/openfoldericon.png";
webFXTreeConfig.fileIcon		= "images/file.png";
webFXTreeConfig.lMinusIcon		= "images/Lminus.png";
webFXTreeConfig.lPlusIcon		= "images/Lplus.png";
webFXTreeConfig.tMinusIcon		= "images/Tminus.png";
webFXTreeConfig.tPlusIcon		= "images/Tplus.png";
webFXTreeConfig.iIcon		= "images/I.png";
webFXTreeConfig.lIcon		= "images/L.png";
webFXTreeConfig.tIcon		= "images/T.png";
//根节点;WebFXTree静态类型;
var tree =new WebFXTree("xxxxxxxxxxxxxxxxxxx");
//第一个子节点;动态子节点;3个参数name,action,javascript动作;
var shz =new WebFXLoadTreeItem("xxxxxxxxx","xloadtree.action?orgid=00000000001651","javascript:void(0)");
tree.add(shz);
document.write(tree);
</script> 
</body>
</html>

------Servlet control

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("gbk");
		String orgid = (String)req.getParameter("orgid");
		//注意返回格式;
		resp.setContentType("text/xml; charset=gbk");
		PrintWriter out =resp.getWriter();
		Base base = new Base();
		
		String selectData[] = {"o1.orgid","o1.nodename"};
		String fromData= "orgtree o1,orgtree o2";
		String whereData = "o2.nodeid = o1.parentid and o2.orgid = '"+orgid+"'";
		String str =base.select_XML(selectData,fromData,whereData);
		out.print(str);
	}

-------------Base model

/**将SQL结果处理XML
	 * @param selectData
	 * @param fromData
	 * @param whereData
	 * @return
	 *<?xml version="1.0" encoding="gbk"?><tree>
	 *<tree text="abc1" action="javascript:void(0)" src="xloadtree.action?orgid=abcd"  />
	 *   <tree text="abc12" action="javascript:void(0)" />	
	 *<tree text="abc2" action="javascript:void(0)" src="xloadtree.action?orgid=abcd" />
	 *</tree>
	 */
	public String select_XML(String selectData[],String fromData,String whereData){
		//select orgid,nodename from orgtree where orgid=abcd00141
		//设置查询数据;
		Model model = new Model();
		model.setSelectData(selectData);
		model.setFromData(fromData);
		model.setWhereData(whereData);
		//返回数据;
		List<String> treeList = model.select();
		//建立XML格式;注意<tree>顶格写不然读取不出来
		String treeStr = "<?xml version=\"1.0\" encoding=\"gbk\"?><tree>";
		int t = -1;
		while(t<treeList.size()-1){
		  String orgid = treeList.get(++t).trim();
		  //<tree text="abc" action="javascript:void(0)" src="xloadtree.action?orgid=abcd"
		  treeStr += "<tree ";
				treeStr += "text=\""+treeList.get(++t).trim()+"\" ";
						//"action=\"javascript:window.location.reload()\"
				//判断是否有子节点;
				if(!isChild(orgid))
					treeStr +=" src=\"xloadtree.action?orgid="+orgid+"\"";
				//注意" />"
				treeStr +=" />";
		}
		//注意</tree>
		treeStr +="</tree>";
		return treeStr;
	}
	/**
	 * 判断是否有子节点;
	 * @param _orgid
	 * @return
	 */
	public boolean isChild(String _orgid) {
		//select y1.orgid from orgtree y1,orgtree y2
		//where y1.parentid = y2.nodeid and y2.orgid=_orgid; 
		Model model = new Model();
		String _selectData[] ={"y1.orgid"};
		model.setSelectData(_selectData);
		model.setFromData("shz_orgtree y1 , orgtree y2");
		model.setWhereData(" y1.parentid = y2.nodeid and y2.orgid='"+_orgid+"'");
		if(model.select().toString().equals("[]"))
		   return true;
		return false;
	}