xloadtree的一个改造

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脚本数据。

• 
• 大小: 11 KB

• 
• 大小: 11.3 KB

• 
• 大小: 36.3 KB

• xloadtreeDemo.rar (138.3 KB)