1、根据treeId展开指定节点并触发单击事件
ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点
ztree.selectNode(ztree.getNodeByParam("id",treeId,null));//选中指定节点
ztree.setting.callback.onClick(null, ztree.setting.treeId, ztree.getNodeByParam("id",treeId,null));//触发函数
2、默认选中指定节点并执行事件
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getNodeByParam("id", "370000");
treeObj.selectNode(node);
setting.callback.onClick = onClick;
3、初使化所有被选中的节点
//初使化所有被选中的节点
function initChecked(){
var zTree = $.fn.zTree.getZTreeObj("resTree");
var orgId = $("#orgId").val();
if(orgId!=null && orgId !=''){
var node = zTree.getNodeByParam("orgId", orgId, null); //得到选中节点
zTree.checkNode(node, true, true); <span style="white-space:pre"> </span> //显示选中节点
zTree.selectNode(node);<span style="white-space:pre"> </span> //打开选中节点的父节点
}
}
4、选中,展开指定节点
$.fn.zTree.init($("#tree-div"), setting, zNodes);
$("#tree-div").parent().parent().parent().css("overflow-x","hidden");
var ids = $("#ids").val();
if(ids.trim()!=""){
var tree = $.fn.zTree.getZTreeObj("tree-div");
var strs = ids.split(",");
for(var j=0;j<strs.length;j++){
var node = tree.getNodeByParam("id",strs[j]);
var parent = node.getParentNode();
if(!parent.open){
tree.expandNode(parent,true,true);
}
tree.checkNode(node , true,true);
}
}
5、ztree动态添加节点
当弹出ztree树的时候,是这样的:IT分享这个时候点击新增按钮,会弹出一个隐藏的框框,添加完信息后,把新添加的节点添加到ztree树中。
可是在调用addNodes方法的时候会出现节点添加两次的现象,大家在网上可能会找到很多有关ztree添加节点重复的问题,这个我就不提了。
现在给出不一样的解决方案,我们首先知道,为什么会出现重复添加的问题。
原因在于:我们异步加载了一次,然后再addNodes 这样就添加了两个节点。(这里如果我们调用展开节点方法,expendNode 这个方法貌似是不好使的,我也没搞清楚这是为什么,当我们调用reAsyncChildNodes方法的时候会自动展开树)
所以本人就不去调用addNodes方法了,这样就不会出现重复添加的问题了,但是怎么才能把添加的节点自动勾选上呢?
这个真是个问题,所以采用后台添加的方式:
async:{
autoParam:["id"],
enable:true,
url : getUrl
}
在ztree的属性中添加这个,其中的getUrl为自己定义的一步方法的url。
这里先提供自身在弹出页面填写后ajax返回的操作方法:
if($("#customerForm").valid()){
$('#customerForm').ajaxSubmit({
type:"post",
dataType: "json",
async : false,
url: '${ctx}/system/cusCustomerInfo/saveAndReturnJSON.action',
success: function(data){
var oldNode = zTreeObj.getNodeByParam("id",$("#customerId").val());
if(oldNode){
oldNode.checked = false;
zTreeObj.updateNode(oldNode);
}
$("#customerId").val(data.id);
var node = zTreeObj.getNodeByParam("id",data.companyProfession);
node.isParent = true;
zTreeObj.reAsyncChildNodes(node, "refresh");
closeAddDiv();
}
});
}else{
$.watermark.showAll();
}
这里会看见, $("#customerId").val(data.id); 这个赋值就个为了下方 zTreeObj.reAsyncChildNodes(node, "refresh");刷新的时候调用一步方法的url的参数。
function getUrl(treeId,treeNode){
var idsStr = pId == '1' ? $("#customerId").val() : $("#partcId").val();
return "${ctx}/system/cusContactInfo/toSetCustomerToContact.action?idsStr="+idsStr;
红色字体就是自动选中的隐藏域id。
这时在后台遍历添加上checked=true就ok了。}
6、zTree自动点击第一个节点
var setting = {
view: {
dblClickExpand: true,//双击展开
showLayer: false,
selectedMulti: false,//是否允许多选
showIcon: showIconForTree//显示节点小图标
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: "0"
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
//加载当前项目的树形结构信息列表
function loadStructureInfoTreeJson(projectId) {
$.ajax({
type: "POST",
dataType: "json",
url: "../Tools/StructureModel.ashx",
data: { act: "LoadModelTreeByProjectid",
pid: projectId
},
success: function (data) {
if (data.length == 0) {
} else {
$.fn.zTree.init($("#tree"), setting, data);
var zTree = $.fn.zTree.getZTreeObj("tree");//获取ztree对象
var node = zTree.getNodeByParam('id', 1);//获取id为1的点
zTree.selectNode(node);//选择点
zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事件
}
},
error: function () {
alert("载入树形结构出现问题!");
}
});
}
function showIconForTree(treeId, treeNode) {
return treeNode.isParent;//如果是父节点就显示小图标
};
7、zTree 查找所有的叶子节点
// 保存所有叶子节点 10 为初始化大小,并非数组上限
var arrayObj = new Array([10]);
/*
treeNode:
根节点
result:
用于保存叶子节点的数组
*/
// 获取所有叶子节点
function getAllLeafNodes(treeNode, result) {
if (treeNode.isParent) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
if (!childrenNodes[i].isParent) {
arrayObj.push(childrenNodes[i]);
} else {
arrayObj = getAllLeafNodes(childrenNodes[i], arrayObj);
}
}
}
} else {
arrayObj.push(treeNode);
}
return arrayObj;
}
8、ztree获取节点,增加节点
// 获取树节点
var treeObj = $.fn.zTree.getZTreeObj("divTreeContainer");
// 获取树所有的节点
var nodes = treeObj.getNodes();
// 通过 tid 获取节点
var node = treeObj.getNodeByTId(node.tId);
// 创建一个节点
var newNode = { id: 1, name:‘wisdo’‘, filePath: 'http://www.111cn.net'};
// 追加节点
treeObj.addNodes(parentNode, newNode)
本文来自:http://www.suchso.com/projecteactual/ztree-click-event-checkbox.html