xloadtree的一个改造

修改了xloadtree的部分源码以适合自己使用。

1.修改了因节点个数过多而造成刷新时候的缓慢。（你可以用原版试试加上500个子节点，然后调用reload()方法）。

2.加入了单选和复选的功能。

3.加入了线程，在500个子节点以上才会启用。引用Thread.js，设置webFXTreeConfig.useThread=true.

4.增加了data属性，使得每个节点都可以绑定自己想绑定的数据上去。

确定线程不能保证节点的顺序，如果对顺序有要求，那就不适用了。

该例子实现了对一颗树的增删改查。

因为是延迟加载，所以在每个父节点的子节点1000以内都是比较快的。

看哈效果图：

 

 项目jar包：

看哈部分代码treeRadio.js：

webFXTreeConfig.rootIcon		= "xloadtree/images/xp/folder.png";
webFXTreeConfig.openRootIcon	= "xloadtree/images/xp/openfolder.png";
webFXTreeConfig.folderIcon		= "xloadtree/images/xp/folder.png";
webFXTreeConfig.openFolderIcon	= "xloadtree/images/xp/openfolder.png";
webFXTreeConfig.fileIcon		= "xloadtree/images/xp/file.png";
webFXTreeConfig.lMinusIcon		= "xloadtree/images/xp/Lminus.png";
webFXTreeConfig.lPlusIcon		= "xloadtree/images/xp/Lplus.png";
webFXTreeConfig.tMinusIcon		= "xloadtree/images/xp/Tminus.png";
webFXTreeConfig.tPlusIcon		= "xloadtree/images/xp/Tplus.png";
webFXTreeConfig.iIcon			= "xloadtree/images/xp/I.png";
webFXTreeConfig.lIcon			= "xloadtree/images/xp/L.png";
webFXTreeConfig.tIcon			= "xloadtree/images/xp/T.png";
webFXTreeConfig.blankIcon       = "xloadtree/images/blank.png";
webFXTreeConfig.type            = "radio"; //checkbox or radio

var prjPath = '/xloadtreeDemo';
var actionSuffix = '.action';
var namespace = '/Controller';
var loadRootNodeAction = 'loadRootNode_XloadTree';
var initAction = 'init_XloadTree';
var addNodeAction = 'addNode_XloadTree';
var saveOrUpdateRootNodeAction = 'saveOrUpdateRootNode_XloadTree';
var deleteNodeAction = 'deleteNode_XloadTree';
var loadChildNodeAction = 'loadChildNode_XloadTree';
var updateNodeAction = 'updateNode_XloadTree';
var loadTreeUrl = prjPath + namespace+'/' + loadRootNodeAction + actionSuffix;
var loadChildNodeUrl = prjPath + namespace+'/' + loadChildNodeAction + actionSuffix;
var initTreeUrl = prjPath + namespace+'/' + initAction + actionSuffix;
var addNodeUrl = prjPath + namespace+'/' + addNodeAction + actionSuffix;
var saveOrUpdateRootNodeUrl = prjPath + namespace+'/' + saveOrUpdateRootNodeAction + actionSuffix;
var deleteNodeUrl = prjPath + namespace+'/' + deleteNodeAction + actionSuffix;
var updateNodeUrl = prjPath + namespace+'/' + updateNodeAction + actionSuffix;
var tree;

$(function(){
	loadTree();
});

//加载根节点
function loadTree(){
	$.ajax({
		url:loadTreeUrl,
		dataType:'json',
		success:function(rootNode){
			var id = rootNode.id;
			if(id != '0'){
				updateTree(rootNode);
			}else{
				$('#rootId').html('null');
				$('#rootPid').html('null');
			}
		}
	});
	
}

//获取根节点的子节点集合
function updateTree(rootNode){
	$('#rootText').val(rootNode.text);
	$('#rootAction').val(rootNode.action);
	$('#rootId').html(rootNode.id);
	$('#rootPid').html('null');
	tree = new WebFXLoadTree(rootNode.text,initTreeUrl,rootNode.action);
	tree.data = rootNode;
	$('#radioDiv').html(tree.toString());
}

//点击单选按钮的回调事件
function setRadioData(data){
	if(typeof(data) == 'string'){
		data = jQuery.parseJSON(data);
	}
	$('#pid').val(data.id);
}

//添加新节点
function addNode(){
	var selectNode = tree.selectNode;
	if(selectNode==null){
		alert('选中一个节点进行新增操作!');
		return;
	}
	var treeNode = new Object();
	treeNode.text = $("#text").val();
	treeNode.action = $("#action").val();
	treeNode.pid = $("#pid").val();

	if(treeNode.text==''){
		alert('text必须填写!');
		return;
	}
	
	$.ajax({
		type:'POST',
		url:addNodeUrl,
		data:treeNode,
		dataType:'json',
		success:function(newNode){
			//直接添加即可
			selectNode.add(new WebFXTreeItem({
				text:newNode.text,
				action:newNode.action,
				data:newNode
			}));
			selectNode.src = newNode.src;
			selectNode.expand();
			//清空内容
			$("#text").val('');
			$("#action").val('');
		}
	});
}

//保存根节点信息
function saveOrUpdateRootNode(){
	var treeNode = new Object();
	treeNode.text = $("#rootText").val();
	treeNode.action = $("#rootAction").val();
	treeNode.id = $("#rootId").html();
	if(treeNode.text==''){
		alert('text不能为空');
		$("#rootText").focus();
		return;
	}
	if(treeNode.id == 'null')treeNode.id = -1;
	$.ajax({
		type:'POST',
		url:saveOrUpdateRootNodeUrl,
		data:treeNode,
		dataType:'json',
		success:function(rootNode){
			$("#"+tree.id+"-anchor").html(rootNode.text);
		}
	});
}

//刷新选中节点的子节点信息
function flushNode(){
	var selectNode = tree.selectNode;
	if(selectNode==null){
		alert('选中一个节点进行刷新操作!');
		return;
	}
	if(selectNode.childNodes.length!=0){
		if(selectNode.reload){
			selectNode.reload();
		}else{
			var parentNode = selectNode.parentNode;
			var index = selectNode.index;
			if(parentNode){
				parentNode.reload();
			}
		}	
	}
}

//删除节点
function delNode(){
	var selectNode = tree.selectNode;
	if(selectNode==null){
		alert('选中一个节点进行删除操作!');
		return;
	}
	var data = selectNode.data;
	if(typeof(data) == 'string'){
		data = jQuery.parseJSON(data);
	}
	$.ajax({
		type:'POST',
		url:deleteNodeUrl,
		data:{id:data.id},
		success:function(result){
			if(Number(result)!=0){
				selectNode.remove();
				tree.selectNode = null;
			}
		}
	});
}

//编辑节点信息
function editNode(){
	var selectNode = tree.selectNode;
	if(selectNode==null){
		alert('选中一个节点进行编辑操作!');
		return;
	}
	var data = selectNode.data;
	if(typeof(data) == 'string'){
		data = jQuery.parseJSON(data);
	}
	var treeNode = new Object();
	treeNode.text = $("#text").val();
	treeNode.action = $("#action").val();
	treeNode.id = data.id;
	if(treeNode.text==''){
		alert('text不能为空');
		$("#text").focus();
		return;
	}
	$.ajax({
		type:'POST',
		url:updateNodeUrl,
		data:treeNode,
		dataType:'json',
		success:function(updateNode){
			$("#"+selectNode.id+"-anchor").html(updateNode.text);
			$("#"+selectNode.id+"-anchor").attr('href',updateNode.action);
			selectNode.data = updateNode;
		}
	});
	
}

 

 xloadtreeDemo.rar 附带mysql脚本数据。