treean.js

一个很好的用于生成静态树控件的代码

//构造树
//function BuildTree(divname, jsonsource, width,rootname, usearrows, autoscroll, animate, enabledd, IsCheck, checkmodel, onlyleafcheckable, singleClickExpand)
//{
	document.write("<script language='javascript'>");
	document.write("Ext.BLANK_IMAGE_URL = '../Ext/resources/images/default/s.gif';");
	document.write("var Tree = Ext.tree;");
	
	//设置树面板
	document.write("var tree = new Tree.TreePanel({");
	document.write("el:'" + s_divname + "'");
	document.write(",width:" + s_width);
	document.write(",useArrows:" + s_usearrows);
	document.write(",autoScroll:" + s_autoscroll);
	document.write(",animate:" + s_animate);
	document.write(",enableDD:" + s_enabledd);
	document.write(",singleExpand:" + s_singleExpand);
	document.write(", containerScroll: true");
	document.write(", rootVisible:" + s_rootVisible);
	document.write(",checkModel:'" + s_checkmodel + "'");
	document.write(",onlyLeafCheckable:" + s_onlyleafcheckable + "");
	document.write(",loader : new Tree.TreeLoader({");
	if(s_IsCheck)//是否显示复选框
	{
		document.write("baseAttrs:{uiProvider: Ext.tree.TreeCheckNodeUI},");
	}
	document.write("dataUrl : '" + s_jsonsource + "'");//指定并读取数据源
	//异步加载树必须 Start
	document.write(",listeners : {");
	document.write("beforeload :function(treeLoader, node){");
	document.write("treeLoader.baseParams = {};");
	document.write("if(node == tree.root){");
	document.write("treeLoader.dataUrl = '" + s_jsonsource + "';");
	document.write("return;}");
	document.write("treeLoader.dataUrl = '" + s_jsonsource + "?nid=' + node.id + '&parent=' + node.parentNode.id;");
	document.write("treeLoader.baseParams = node.attributes.paras;}");
	document.write("}");
	document.write("})");
	//异步加载树 end
	document.write("});");
	
	//给树添加右键菜单
	document.write("var treerightmenu = new Ext.menu.Menu({");
	document.write("id: 'mainMenu',");
	document.write("items: [");
	document.write("{");
	document.write("id : 'add',");
	document.write("text: '新增节点',");
	document.write("handler: function(){}");
	document.write("},");
	document.write("{");
	document.write("id : 'modify',");
	document.write("text: '修改该节点',");
	document.write("handler: function(){}");
	document.write("},");
	document.write("{");
	document.write("text: '删除该节点',");
	document.write("handler: function(){}");
	document.write("}");
	document.write("]");
	document.write("});");
	
	//设置动态加载树的根
	document.write("var root = new Tree.AsyncTreeNode({ text: '" + s_rootname + "', id:'source',checked:false,");
	document.write("singleClickExpand: " + s_singleClickExpand + " });");
	document.write("tree.setRootNode(root);");
	
	//给Tree注册点击节点事件
	/*document.write("tree.on('click',function (node){");
	document.write("if(node.isLeaf()){");
	document.write("alert(node.id);window.open('TreeAnData.aspx?nid=' + node.id,null,'width=800,height=480,status=no,toolbar=no,menubar=no,location=no,status=no');");
	//在此添加当节点是最终节点时所执行的方法代码
	document.write("}else{");
	document.write("alert(node.id);window.open('TreeAnData.aspx?nid=' + node.id,null,'width=800,height=480,status=no,toolbar=no,menubar=no,location=no,status=no');");
	//在此添加当节点包含下级节点所执行的方法代码
	document.write("");
	document.write("node.toggle();}});");
	//给Tree注册点击复选框事件
	document.write("tree.on('check',function (node, checked){");
	document.write("if(checked){");
	//在此添加当复选框选中时所执行的方法代码
	document.write("}else{");
	//在此添加当复选框取消选定时所执行的方法代码
	document.write("}});");*/
	
	//给Tree注册点击节点事件
	if(s_treeonclick != "")
	{
		document.write("tree.on('click'," + s_treeonclick + ");");
	}
	
	//给Tree注册点击复选框事件
	if(s_treeonchecked != "")
	{
		document.write("tree.on('check'," + s_treeonchecked + ");");
	}
	
	//给Tree注册拖拽事件
	if(s_treeondrag != "")
	{
		document.write("tree.on('nodedrop'," + s_treeondrag + ");");
	}
	
	//给Tree注册右键菜单
	if(s_treeonrightclick != "")
	{
		document.write("tree.on('contextmenu'," + s_treeonrightclick + ");");
	}
	
	//填充树
	document.write("Ext.onReady(function(){");
	document.write("Ext.BLANK_IMAGE_URL = '../Ext/resources/images/default/s.gif';");
	document.write("Ext.QuickTips.init();");
	document.write("tree.render();");
	//是否展开树
	if(s_expand)
	{
		document.write("root.expand(true,false);");
	}
	else
	{
		document.write("root.expand(false,false);");
	}
	document.write("});");
	document.write("<\/script>");
//}

function s_BuildAnTree(divname, jsonsource, width,rootname, usearrows, autoscroll, animate, enabledd, IsCheck, checkmodel, onlyleafcheckable, singleClickExpand)
{			
		Ext.onReady(function(){
		Ext.BLANK_IMAGE_URL = 'Ext/resources/images/default/s.gif';
		Ext.QuickTips.init();
		var Tree = Ext.tree;
		var tree = new Tree.TreePanel(
			{el: divname
			,useArrows: usearrows
			,width : width
			,autoScroll:autoscroll
			,animate:animate
			,enableDD:enabledd, 
			containerScroll: true,
			checkModel:checkmodel,onlyLeafCheckable:onlyleafcheckable,
			loader : new Tree.TreeLoader({
				baseAttrs:{uiProvider: Ext.tree.TreeCheckNodeUI},
				dataUrl : jsonsource,
				listeners : {
					beforeload :function(treeLoader, node){
						treeLoader.baseParams = {};
						if(node == tree.root){
							treeLoader.dataUrl = jsonsource;
						return;}
						treeLoader.dataUrl =jsonsource + "?nid=" + node.id;
						treeLoader.baseParams = node.attributes.paras;
					}
				}
			})
		});
		
		var treerightmenu = new Ext.menu.Menu({
			id: 'mainMenu',
			items: [
	            {
					id : 'add',
					text: '新增节点',
					handler: function(){}
				},
				{
					id : 'modify',
	                text: '修改该节点',
	                handler: function(){}
				},
				{
	                text: '删除该节点',
	                handler: function(){}
				}
			]
		});
		
		var root = new Tree.AsyncTreeNode({ text:rootname, id:'source',
			singleClickExpand:singleClickExpand });
		tree.setRootNode(root);
		
		//给Tree注册单击事件
		tree.on('click',function (node){
		if(node.isLeaf()){
		//在此添加当节点是最终节点时所执行的方法代码
		}else{
		//在此添加当节点包含下级节点所执行的方法代码
		node.toggle();}});
		
		//给Tree注册点击复选框事件
		tree.on('check',function (node, checked){
		if(checked){
			//在此添加当复选框选中时所执行的方法代码
		}else{
			//在此添加当复选框取消选定时所执行的方法代码
		}});
		
		//给Tree注册拖拽事件
		tree.on('nodedrop',function(de){
		var ns = de.dropNode, p = de.point, t = de.target;
		if(!(ns instanceof Array)){ ns = [ns]; }
		var sourceId=ns[0].attributes['id'];
		var targetId=t.attributes['id'];
		var margeUrl=jsonsource + "?format=drag&sid=" + sourceId + "&pid=" + targetId;
		var confirmStr='你确定将<' + ns[0].attributes['text'] + '>归并到<'+t.attributes['text']+'>吗？';
		if(p!='append' && targetId==1){
			margeUrl=jsonsource + "?format=drag&sid=" + sourceId;
			confirmStr='你确定将<' + ns[0].attributes['name'] + '>归并为一级吗？';
		}
		Ext.MessageBox.confirm('温馨提醒',confirmStr,
			function(btn, text) {
				if (btn == 'yes') {
					Ext.Ajax.request({
						url : margeUrl,
						method : 'post',
						success : function(form, action) {
							tree.getRootNode().reload();
							Ext.Msg.alert('温馨提醒', '归并成功.');
						},
						failure : function(form, action) {
							Ext.Msg.alert('温馨提醒', '归并失败.');
						}
					});
					}else{
						tree.getRootNode().reload();
					}
				})
		});
	    
	    //给Tree注册右键菜单
		tree.on('contextmenu',function(node, event){
			event.preventDefault();
			//node.selected();
			treerightmenu.showAt(event.getXY());
	    });
	    
		tree.render();
		root.expand(false,false);
	});
}