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是和页面分开的，有多余的代码请自行优化。