本Tree,是基于在一个弹框的div中以easyui为框架+Ztree的技术,做的一个异步加载,即选即现的一个例子。
实现的功能:
1、点击某DIV以外的区域,隐藏/关闭本DIV。
2、点击一个input标签,在本标签的相对位置,弹出DIV 模仿select形式。(忽视分辨率等问题。)
3、Ztree显示,各种功能的实现,详细可以参考api
4、对于check的内容能够即时的显示与input标签中。
5、隐藏域传值。
希望能对于此有学习的人有些帮助。
依赖的jar包,js文件,不再多说。
本人用的 Ztree V3
private int id;
private int pid;
private String name;
private boolean isParent;
get set 方法,不再一一添加。
action--以下的层不再一一累述。就是在在数据库中一个菜单级联类似的一个数据表,可自行设计。
页面:
<div id="divtree" class="easyui-dialog" data-options="
closed:true,
closable:false,
noheader : true,
border : true,
",
closed="true" style="height:222px;top:91px;" >
<div class="zTreeDemoBackground left" " >
<ul id="tree" class="ztree"></ul>
</div>
<td></td>
<td id="memch">
<input id="mem" class="easyui-combobox" type="text" style="width:196px;"
data-options="panelHeight : 0,
onShowPanel : function (rec){
createTree();
}">
<input id="mc" name="member_choose" type="text" style="width:190px;display:none;" ></td>
PS:div dialog,嵌套一个div-tree。class ztree为必设置。
mc为隐藏属性,select 也就是mem的combobox样式为下拉框,显示名字属性,而往后台传入为ID。所以做隐藏域。
data-options="panelHeight : 0,
下拉框的下拉面板高度为,直接不显示,不用掩盖覆盖。
js如下。
var ss=1;//为点击本DIV以外的区域可以关闭本div做的一个初始化值。供选择。
var zTreeNodes = [ {
"id" : "1",
"pId" : "0",
"name" : "rose",
isParent : true
} ];//数据
var setting = {
view: {
selectedMulti: false
},
check: { //光裕选项的处理。是否显示复选框,什么样式的,以及父子关系是否级联。
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "s", "N": "s" },
autoCheckTrigger: true
},
async : { //关于异步加载的一些属性值。
enable : true,
url : "member_tree_list.action",
autoParam : ["id"],
dataType : "text",
type : "post",
dataFilter:filter //调用处理方法,进行数据的预处理
},
expandSpeed : "slow",
data : {<span> </span>//必须填写项目。
simpleData : {
enable : true,
idKey : "id",
pIdKey : "p_id",
rootPId : 0
}
},
callback : {<span> </span>//关于一些事件的处理,后边为函数名称,函数在下方。
beforeClick : beforeClick,
beforeAsync : beforeAsync,
onAsyncError : onAsyncError,
onAsyncSuccess : onAsyncSuccess,
onCheck: zTreeOnCheck,
}
};
/*
对数据进行预处理,可以修改节点的属性
*/
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, '.');
childNodes[i].target = "_self";//修改target的属性
}
return childNodes;
}
function beforeClick(treeId, treeNode) {
if (!treeNode.isParent) {
return false;
} else {
return true;
}
}
var log, className = "dark";
function beforeAsync(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeAsync ] "
+ ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
return true;
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus,
errorThrown) {
showLog("[ " + getTime() + " onAsyncError ] "
+ ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
showLog("[ " + getTime() + " onAsyncSuccess ] "
+ ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
}
function showLog(str) {
if (!log)
log = $("#log");
log.append("<li class='"+className+"'>" + str + "</li>");
if (log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now = new Date(), h = now.getHours(), m = now.getMinutes(), s = now
.getSeconds(), ms = now.getMilliseconds();
return (h + ":" + m + ":" + s + " " + ms);
}
function refreshNode(e) {
var zTree = $.fn.zTree.getZTreeObj("tree"), type = e.data.type, silent = e.data.silent, nodes = zTree
.getSelectedNodes();
if (nodes.length == 0) {
alert("请先选择一个父节点");
}
for ( var i = 0, l = nodes.length; i < l; i++) {
zTree.reAsyncChildNodes(nodes[i], type, silent);
if (!silent)
zTree.selectNode(nodes[i]);
}
}
//点击之后加载的函数,此时显示出DIV,并加载成功树状结构。
function createTree() {
ss=3;// 创建树成功后,将SS设置为3 点击不再关闭窗口。
var y = $('#memch').offset().top;
var x = $('#memch').offset().left;
var z = $('#memch').height();
y=y+z-1;
//var s=attr.setAttribute("style", "left:"+x+"px;");
//attr.setAttribute("style", "width:820px;");
//$('#divtree').css("width","800px");
$('#divtree').dialog('move',{
left:x,
top:y
});
//document.getElementById( "divtree").style.display = "block";
$('#divtree').dialog('open').dialog('setTitle',null);
$.fn.zTree.init($("#tree"), setting, zTreeNodes);
$("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode);
$("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
$("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
$("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
};
///操作被选中的节点
var memname='';
function zTreeOnCheck(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getCheckedNodes(true);
var str="";
var mid="";
for(var i=0;i<nodes.length;i++){
str =str+nodes[i].name+",";
mid =mid+nodes[i].id+",";
}
str=str.substr(0,str.length-1);
mid=mid.substr(0,mid.length-1);
$('#member_choose').combobox('setValue', str);
document.getElementById("mc").value=mid;
};
///操作被点击的节点
//此方法暂时未用,为点击之后选择提交选项。
function getck(){
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getCheckedNodes(true);
var str="";
var mid="";
for(var i=0;i<nodes.length;i++){
str =str+nodes[i].name+",";
mid =mid+nodes[i].id+",";
}
str=str.substr(0,str.length-1);
mid=mid.substr(0,mid.length-1);
$('#member_choose').combobox('setValue', str);
document.getElementById("mc").value=mid;
$('#dtree').dialog('close');
}
function closetree(){
$('#dtree').dialog('close');
}
//此方法为启用,未鼠标移动过div之后,关闭div。
function aa(){
$("#dtree").mouseleave(function(){
closetree();
});
}
//此方法为点击其他区域,关闭div。
$(document).click(function (e) {
var drag = $("#dtree"),
dragel = $("#dtree")[0],
target = e.target;
if (dragel !== target && !$.contains(dragel, target)&&ss==2) {
closetree();
}
ss=2;
});
主要是js的一些控制。ztree的api介绍的也比较详细。