ztree看得我晕呼呼,折腾了一小会,实现了简单调用的办法。
ztree官网
http://www.treejs.cn/v3/main.php
点击需要选择的按钮或文本框均可在其位置下拉
调用方法
<input type="input" id="pname" value="" onfocus="clickme(this);" />
<button onclick="clickme(this);">选择</button>
<script>
function clickme(eleObj){
//参数依次为
//参照位置的元素eleObj
//加载json分类数据
//预选择的初始值
//回调callback,点击后赋值等逻辑
showztree(eleObj,'./app/api_ztree_type.php','祖先',function(pname,pid){
alert('你选择了我:'+pname+' 我是编号:'+pid);
eleObj.value=pname;
});
}
</script>
具体看代码
function showztree(showObj,url="./app/api_ztree_type.php",initSelectName='视频',tocallback=null){
//可复用的弹出树
var treeBoxId='menuContent';
var treeObjId='treeDemo';
var html='<div id="'+treeBoxId+'" style="display:none; position: absolute; z-index: 999999"><ul id="'+treeObjId+'" class="ztree" style="margin-top:0; width:200px;"></ul></div>';
if($('#'+treeBoxId).length==0){
$("body").append(html);
}
//var cityObj = $("#"+showObjId);
var cityObj=$(showObj);
//var cityOffset = cityObj.position();
var cityOffset = cityObj.offset();
$("#"+treeBoxId).css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").on("mousedown", function(event){
if (!(event.target.id == "menuBtn" || event.target.id == treeBoxId || $(event.target).parents("#"+treeBoxId).length>0)) {
//hideMenu();
$("#"+treeBoxId).fadeOut("fast");
}
});
//var curAsyncCount=0;
//var curStatus = "init";
//var asyncForAll = false;
//var goAsync = false;
$.fn.zTree.init($("#"+treeObjId), {
async: {
enable: true,
url:url,
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"},
//otherParam: ["id", "0", "name", "test"],
dataFilter: function(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;
},
type: "get"
},
view: {
showLine: true,
showIcon: true
},
callback: {
beforeAsync: function(){
},
onAsyncSuccess: function (event, treeId, treeNode, msg) {
var zTreeMenu = $.fn.zTree.getZTreeObj(treeObjId);
var selnode=zTreeMenu.getNodeByParam('name',initSelectName);
//var selnode=zTreeMenu.getNodeByParam('id',4);
if (selnode){
zTreeMenu.cancelSelectedNode();//先取消所有的选中状态
zTreeMenu.selectNode(selnode,true);//将指定ID的节点选中
zTreeMenu.expandNode(selnode, true, false);//将指定ID节点展开
}
},
onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){
},
beforeClick: function(treeId, treeNode){
var check = (treeNode.name != initSelectName) || (treeNode.id==0);
return check;
},
onClick: function(e, treeId, treeNode){
var zTree = $.fn.zTree.getZTreeObj(treeObjId),
nodes = zTree.getSelectedNodes(),
vn ="";
vid="";
vpoint="";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
vn += nodes[i].name + ",";
vid += nodes[i].id + ",";
}
if (vn.length > 0 ) vn = vn.substring(0, vn.length-1);
if (vid.length > 0 ) vid = vid.substring(0, vid.length-1);
console.log(vid);
if(!treeNode.isParent){
$("#"+treeBoxId).fadeOut("fast");
}
//执行回调
if(tocallback!=null){
//选中的分类名称vn和值分类vid
tocallback(vn,vid);
}
}
}
});
}