ztree下拉框的简单实现（这里是单选）
注释中为我想到的省市联动的实现，有问题欢迎指出
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting1);
$.fn.zTree.init($("#treeDemo2"), setting2);
});
/*zTree*/
var setting1 = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
} ,
async: {
enable: true,
url:context +"/stdataType/getStdataTypeForManage.do",
autoParam:["id", "name=n", "level=lv"],
//otherParam:{"otherParam":"zTreeAsyncTest"},
dataType: "text",//默认text
//type:"get",//默认post
dataFilter: filter //异步返回后经过Filter
} ,
callback:{
//beforeAsync: beforeAsync, //异步加载事件之前得到相应信息
asyncSuccess: zTreeOnAsyncSuccess, //异步加载成功的fun
asyncError: zTreeOnAsyncError, //加载错误的fun
beforeCheck :beforeClick, //捕获单击节点之前的事件回调函数*/
onClick: onClick,
onCheck: onCheck
}
};
/*省份列表Tree*/
var setting2 = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
} ,
async: {
enable: true,
url:context +"/stdata/getProvinceInfoAll.do",
autoParam:["id", "name=n", "level=lv"],
//otherParam:{"otherParam":"zTreeAsyncTest"},
dataType: "text",//默认text
//type:"get",//默认post
dataFilter: filter //异步返回后经过Filter
} ,
callback:{
//beforeAsync: beforeAsync, //异步加载事件之前得到相应信息
asyncSuccess: zTreeOnAsyncSuccess, //异步加载成功的fun
asyncError: zTreeOnAsyncError, //加载错误的fun
beforeCheck :beforeClick,
onClick: onClick2,
onCheck: onCheck2
}
};
/*城市列表Tree*/
// var setting3 = {
// check: {
// enable: true,
// chkStyle: "radio",
// radioType: "all"
// },
// view: {
// dblClickExpand: false
// },
// data: {
// simpleData: {
// enable: true,
// idKey: "id",
// pIdKey: "pId",
// }
// },
// callback:{
// //beforeAsync: beforeAsync, //异步加载事件之前得到相应信息
// beforeCheck :beforeClick,
// onClick: onClick3,
// onCheck: onCheck3
// }
// };
function beforeClick(treeId,treeNode){
if(treeNode.isParent){
alert("请选择子节点");
return false;
}else{
return true;
}
}
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onClick2(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo2");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
// function onClick3(e, treeId, treeNode) {
// var zTree = $.fn.zTree.getZTreeObj("treeDemo3");
// zTree.checkNode(treeNode, !treeNode.checked, null, true);
// return false;
// }
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
id="",
v = "";
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
id += nodes[i].id + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
if (id.length > 0 ) id = id.substring(0, id.length-1);
var nameObj = $("#ztreesnames"),
idObj = $("#ztreeids");
nameObj.attr("value", v);
idObj.attr("value", id);
}
// var zNodes3
function onCheck2(e, treeId, treeNode) {
debugger;
var zTree = $.fn.zTree.getZTreeObj("treeDemo2"),
nodes = zTree.getCheckedNodes(true),
id="",
v = "";
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
id += nodes[i].id + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
if (id.length > 0 ) id = id.substring(0, id.length-1);
var nameObj = $("#pronames"),
idObj = $("#proids");
nameObj.attr("value", v);
idObj.attr("value", id);
// var pronames = $('#pronames').val();
// var param = {
// pronames : pronames,
// };
// $.ajax({
// url : context +"/stdataType/getMenuForCity.do",
// type : 'POST',
// data : param,
// success : function(data) {
// zNodes3=data
// $(document).ready(function(){
// debugger;
// $.fn.zTree.init($("#treeDemo3"), setting3,zNodes3);
// });
//
// }
// })
}
function linkClick(event, treeId, treeNode) {
var param = $('#pronames').val(); //获得点击树的ID
var otherTree = $.fn.zTree.getZTreeObj(treeId); // 选取树的所有节点
var nodes = otherTree.getNodesByParam(param); //遍历树的节点
for (var i in nodes) {
if(param==nodes[i].id){
otherTree.selectNode(nodes[i]);
return;
}
}
}
// function onCheck3(e, treeId, treeNode) {
// var zTree = $.fn.zTree.getZTreeObj("treeDemo3"),
// nodes = zTree.getCheckedNodes(true),
// id="",
// v = "";
// for (var i=0, l=nodes.length; i<l; i++) {
// v += nodes[i].name + ",";
// id += nodes[i].id + ",";
// }
// if (v.length > 0 ) v = v.substring(0, v.length-1);
// if (id.length > 0 ) id = id.substring(0, id.length-1);
// var nameObj = $("#citynames"),
// idObj = $("#cityids");
// nameObj.attr("value", v);
// idObj.attr("value", id);
// }
function treeIds(){ //这是将选中的节点的id用;分割拼接起来,用于持久化到数据库
var zTreeO = $.fn.zTree.getZTreeObj("treeDemo"),
nodesO = zTreeO.getCheckedNodes(true),
idListStr = "";
for (var i=0, l=nodesO.length; i<l; i++) {
idListStr += nodesO[i].id + ",";
}
if (idListStr.length > 0 ) v = v.substring(0, v.length-1);
var idObj = $("#ztreeids");
idObj.attr("value", v);
return idObj;
};
// 显示
function showMenu() {
var cityObj = $("#ztreesnames");
var cityOffset = $("#ztreesnames").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown1);
}
function showMenu2() {
var cityObj = $("#pronames");
var cityOffset = $("#pronames").offset();
$("#menuContent2").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown2);
}
// function showMenu3() {
// var cityObj = $("#citynames");
// var cityOffset = $("#citynames").offset();
// $("#menuContent3").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
//
// $("body").bind("mousedown", onBodyDown3);
// }
// 隐藏
function onBodyDown1(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "ztreesnames" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu1();
}
}
function onBodyDown2(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "pronames" || event.target.id == "menuContent2" || $(event.target).parents("#menuContent2").length>0)) {
hideMenu2();
}
}
// function onBodyDown3(event) {
// if (!(event.target.id == "menuBtn" || event.target.id == "citynames" || event.target.id == "menuContent3" || $(event.target).parents("#menuContent3").length>0)) {
// hideMenu3();
// }
// }
//
function hideMenu1() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown1);
}
function hideMenu2() {
$("#menuContent2").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown2);
}
// function hideMenu3() {
// $("#menuContent3").fadeOut("fast");
// $("body").unbind("mousedown", onBodyDown3);
// }
//treeId是treeDemo
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
//异步加载错误的fun
function zTreeOnAsyncError(event, treeId, treeNode){
alert("异步加载失败!");
}
//异步加载成功的fun
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){
if(treeNode==null){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
nodes = zTree.getNodes();
for (var i=0, l=nodes.length; i<l; i++) {
zTree.expandNode(nodes[i], true, false, false);
}
asyncNodes(zTree.getNodes());
if (!goAsync) {
curStatus = "";
}
}
};
function asyncNodes(nodes) {
if (!nodes) return;
curStatus = "async";
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for (var i=0, l=nodes.length; i<l; i++) {
if (nodes[i].isParent && nodes[i].zAsync) {
asyncNodes(nodes[i].children);
} else {
goAsync = true;
zTree.reAsyncChildNodes(nodes[i], "refresh", true);
}
}
}