ztree生成流程

首先引入

ztree的js,css

而後，body頁面部分

 <input id="contrast" type="text" readonly="readonly" onclick="showContrast();"/>

<input id="contrasted" name="contrasted" value="${contrasted }" type="hidden"/>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;background-color: #fff;z-index: 999999;">

<ul id="treeDemo1" class="ztree" style="margin-top:0; width:163px; height: 200px;overflow: auto;"></ul>

</div>

js部分

setCheckId(cityId);

var checkedId = "";

function setCheckId(Id){

checkedId = Id;

}

initTree($("#treeDemo1"),url);

function initTree(treeId,url){

var checktype = "checkbox";

if(treeId.selector!="#treeDemo1"){

checktype = "radio";

}

var setting = {

async: {

enable: true,

url:url,

},

view: {

nameIsHTML: true

},

check: {

enable: true,

chkStyle: checktype,

chkboxType: { "Y" : "s", "N" : "ps" }

},

data : {

key : {

name : "label"

},

simpleData : {

enable : true,

idKey : "id",

pIdKey : "pid",

rootPId : -1

}

},

callback: {

onCheck:onCheck,

onAsyncSuccess: onAsyncSuccess,

onAsyncError: onAsyncError

}

};

var treeRoot = $.fn.zTree.init(treeId, setting);

}

function showContrast() {

var cityObj = $("#contrast");

var cityOffset = $("#contrast").offset();

$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

$("body").bind("mousedown", onBodyDown1);

}

function hideMenu() {

$("#menuContent").fadeOut("fast");

}

function onBodyDown1(event) {

if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {

hideMenu();

}

}

function onCheck(e, treeId, treeNode) {

var zTree = $.fn.zTree.getZTreeObj(treeId),

nodes = zTree.getCheckedNodes(true),

v = "";

v2 = "";

for (var i=0, l=nodes.length; i<l; i++) {

v += nodes[i].label + ",";

v2 += nodes[i].id + ",";

}

if (v.length > 0 ) v = v.substring(0, v.length-1);

if (v2.length > 0 ) v2 = v2.substring(0, v2.length-1);

if(treeId=='treeDemo1'){

$("#contrast").val(v);

$('#contrasted').val(v2);

}

}

var treeObj=null;

function onAsyncSuccess(event,treeId,treeNode,msg){//異步加載成功後調用

treeObj = $.fn.zTree.getZTreeObj(treeId);

loadSelectNode(treeId,checkedId);//展開以前選中的節點

//var nodes = treeObj.getNodes();

//hideParentTextbox(nodes);

}

//展開以前選中的節點

function loadSelectNode(treeId,checkedId){

var contreeRoot = $.fn.zTree.getZTreeObj(treeId);

if(checkedId!=null&&checkedId!=""){

var selNode = contreeRoot.getNodeByParam("id", checkedId, null);

if(selNode!=null){

selNode.checked = true;

if(treeId=='treeDemo1'){

$("#contrast").val(selNode.label);

$("#contrasted").val(selNode.id);

}

//treeObj.selectNode(selNode,true);//選中以前選的節點

treeObj.updateNode(selNode);//更新以前選的節點

}

}

}

由於個人js是和頁面分開的，有多餘的代碼請自行優化。