ztree树的使用记录

zTree的使用记录

zTree是张其纲老师开发的一款免费的、功能比较全的js树形展示插件。本文档记录使用的ztree框架的部分功能的思路，有：异步加载技术、添加复选框、单击节点名实现功能、更换节点图标。

显示如下图：

参考张其纲老师的首页实例，地址：http://www.ztree.me/v3/demo.php#_402

页面如下：

树已经初始化完，在页面中显示的位置如下：

Js代码：

//设置树的初始值

var setting = {

async: {

enable: true,

url: getUrl

},

data: {

simpleData: {

enable: true

}

},

check: {//是否支持复选框

enable: true

},

callback: {

beforeExpand: beforeExpand,

onAsyncSuccess: onAsyncSuccess,

onAsyncError: onAsyncError,

onCheck: onCheck,//选中时触发的事情

onClick:onClick //单机触发的时间

}

};

var log, className = "dark", perCount = 100, perTime = 100;

//初始化AJAX异步调用时的URL值

function getUrl(treeId, treeNode) {

var curCount = (treeNode.children) ? treeNode.children.length : 0;

var getCount = (curCount + perCount) > treeNode.count ? (treeNode.count - curCount) : perCount;

var param = "id="+treeNode.id + "&isCheck=" + treeNode.checked;

return ".. /getNodesForBigData.php?" + param;//AJAX异步交互的地址}

//展开节点异步取子节点之前调用的函数

function beforeExpand(treeId, treeNode) {

if (!treeNode.isAjaxing) {

treeNode.times = 1;

ajaxGetNodes(treeNode, "refresh");

return true;

} else {

alert("zTree 正在下载数据中，请稍后展开节点。。。");

return false;

}

}

//AJAX异步交互成功时调用的函数

function onAsyncSuccess(event, treeId, treeNode, msg) { if (!msg || msg.length == 0) {

return;

}

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

totalCount = treeNode.count;

if (treeNode.children.length < totalCount) {

setTimeout(function() {ajaxGetNodes(treeNode);}, perTime);

} else {

treeNode.icon = "";

zTree.updateNode(treeNode);

zTree.selectNode(treeNode.children[0]);

}

}

//AJAX异步交互出错时调用的函数

function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

alert("异步获取数据出现异常。");

treeNode.icon = "";

zTree.updateNode(treeNode);

}

//AJAX交互得到信息

function ajaxGetNodes(treeNode, reloadType) {

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

if (reloadType == "refresh") {

treeNode.icon = "../img/loading.gif";//异步加载数据时显示的图片

zTree.updateNode(treeNode);

}

zTree.reAsyncChildNodes(treeNode, reloadType, true);

}

//单击是所触发的时间

function onClick(e,treeId, treeNode) {

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

checkCount = zTree.getCheckedNodes(true).length;

if(checkCount > 0){

clearCheckedNodes();

}

//触发进行业务逻辑的处理的信息

…………

}

//当单机选中复选框的时候进行的处理

function onCheck(e, treeId, treeNode){

var ids = '';

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

nodes = zTree.getCheckedNodes(true);

for (var i=0, l=nodes.length; i

ids += nodes[i].id;

if(i != l-1)

ids += ",";

}

//把得到的已选择的节点ID集合进行其他处理

…………

}

//清空已经选中的树的数据

function clearCheckedNodes() {

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

nodes = zTree.getCheckedNodes(true);

for (var i=0, l=nodes.length; i

nodes[i].checked = false;

zTree.updateNode(nodes[i]);

}

}

//进行树中已经选中的统计的函数

function count() {

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

checkCount = zTree.getCheckedNodes(true).length,//所有选中的节点nocheckCount = zTree.getCheckedNodes(false).length,//所有未选中的changeCount = zTree.getChangeCheckedNodes().length;//新更改的节点}

//初始化时的树节点信息

var zNodes =[{name:'北京',id:3038, checked:false,isParent:true, open:true},{name:'上海',id:3091, checked:false,isParent:true, open:true},{name:'上海1',id:3107, checked:false},{name:'天津

',id:3040, checked:false,isParent:true, open:true}];

//初始化页面的树

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

});

说明：异步加载数据时数据返回的样式为：

[{name:'复兴路',id:3046,pId:3045, checked:false,isParent:true, open:true},{name:'啊啊大', id:42, pId:3045, checked:false,icon:'/website/employee/img/diy/3.png'}]

其中：icon:'/website/employee/img/diy/3.png'为该节点要显示的节点图标，checked:false表示：如果父节点在异步加载前是选中状态则用checked:true表示选

中。

Java后台编好要向前台显示的JSON形式的字符串之后发送的编码为：response.setContentType("application/x-json;charset=UTF-8"); try

{

PrintWriter pw = response.getWriter();

pw.println(string);

pw.flush();

pw.close();

}

catch (IOException e)

{

e.printStackTrace();

}