var root = $(div).attr("root");
var zNodes =[
{id:1, parent_id:0, name:"AAA",title:"123"},
{id:2, parent_id:0, name:"BBB"},
{id:3, parent_id:0, name:"CCC"},
{id:4, parent_id:0, name:"EEE", open:true},
{id:41, parent_id:4, name:"aaa"},
{id:42, parent_id:4, name:"bbb"},
{id:43, parent_id:4, name:"ccc"},
{id:44, parent_id:4, name:"ddd"},
];
require(['ztree'],function(z){
var setting = {
view: {
dblClickExpand: true
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parent_id",
rootPId: 0
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
if(root=="是")setting.callback.beforeClick="";
var src = $(div).attr("src"); //table
if(src==null||src==""){
var tree = $.fn.zTree.init($("#"+treeDemo), setting, zNodes);
}else{
$.get(src,function(r){ //renderJson(0,"",data);
var tree = $.fn.zTree.init($("#"+treeDemo), setting, r.data);
if($(div).attr("nodeall")=="是"){
tree.expandAll(true);
}else{
tree.expandAll(false);
}
});
}
$("#"+input1_id).focus(function(){
if($("#"+menucontent).is(":hidden")){
showMenu();
}else{
hideMenu();
}
});
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeDemo);
nodes = zTree.getSelectedNodes();
var v = nodes[0].name;
var id = nodes[0].title;
if(id==null)$("#"+input1_id).attr("key", v);
$("#"+input1_id).val(v);
$("#"+input1_id).attr("key", id);
hideMenu();
}
function showMenu() {
var cityObj = $("#"+input1_id);
var tableH = 0;
var width = cityObj.parents("table").length;
if(page.mode==2) width-=1;//编辑态多一层table
for(var i = 0;i<width;i++){
tableH +=cityObj.parents("table")[i].offsetTop;
}
var cityOffset = $("#"+input1_id).offset();
$("#"+menucontent).css({left:cityOffset.left + "px", top:tableH+$("#"+input1_id)[0].offsetTop + $("#"+input1_id)[0].offsetHeight+ "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#"+menucontent).fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#"+menucontent).length>0)) {
hideMenu();
}
}
function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) alert("不可选择此节点");
return check;
}
});
效果展示:
用到了require和ztree。