java 动态加载ztree_新手ztree结合springmvc 入门生成动态树

这个是异步加载数据 先看效果图

这里先看数据库

直接上代码

pageEncoding="utf-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

Insert title here

var setting = {

view: {

addHoverDom: addHoverDom,

removeHoverDom: removeHoverDom,

selectedMulti: false

},

async: {

enable: true,

url: "tree/getTreeDate",

autoParam: ["id"]

},

edit: {

enable: true,

editNameSelectAll: true,

showRemoveBtn: showRemoveBtn,

showRenameBtn: showRenameBtn

},

data: {

simpleData: {

enable: true,

idKey:"id",

pIdKey:"pId",

rootPId:0

}

},

callback: {

onAsyncSuccess : function(event, treeId, treeNode, msg){

},

beforeDrag: beforeDrag,

beforeEditName: beforeEditName,

beforeRemove: beforeRemove,

beforeRename: beforeRename,

onClick: zTreeOnClick

}

};

var zNodes =[];//树节点，json格式，异步加载可设置为null或[]

var zTreeObj;//树对象

//拖拽之前

function beforeDrag(treeId, treeNodes) {

return false;

}

//编辑之前

function beforeEditName(treeId, treeNode) {

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

zTree.selectNode(treeNode);

setTimeout(function() {

if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {

setTimeout(function() {

zTree.editName(treeNode);

}, 0);

}

}, 0);

return false;

}

//删除之前

function beforeRemove(treeId, treeNode) {

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

zTree.selectNode(treeNode);

return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");

}

//改名之前

function beforeRename(treeId, treeNode, newName, isCancel) {

if (newName.length == 0) {

setTimeout(function() {

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

zTree.cancelEditName();

alert("节点名称不能为空.");

}, 0);

return false;

}

return true;

}

//显示删除按钮

function showRemoveBtn(treeId, treeNode) {

return !treeNode.isFirstNode;

}

//显示修改按钮

function showRenameBtn(treeId, treeNode) {

return true;

}

var newCount = 1;

//鼠标移动显示控件

function addHoverDom(treeId, treeNode) {

//显示增加按钮

var sObj = $("#" + treeNode.tId + "_span");

if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

var addStr = "";

sObj.after(addStr);

//增加按钮点击

var btn = $("#addBtn_"+treeNode.tId);

if (btn) btn.bind("click", function(){

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"我的文件夹" + (newCount++)});

return false;

});

};

//隐藏增加按钮

function removeHoverDom(treeId, treeNode) {

$("#addBtn_"+treeNode.tId).unbind().remove();

};

//节点点击

function zTreeOnClick(event, treeId, treeNode) {

//调用父类页面

window.parent.fuzhi(treeNode.name);

//

//alert(treeNode.tId + ", " + treeNode.name);

};

//初始化

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting,zNodes);

});

.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}

后端代码

@RequestMapping("getTreeDate")

@ResponseBody

public List getTreeDate(@RequestParam(defaultValue="0")int id){

List list=service.getTree(id);

/*

List> list=new ArrayList>();

Map map=new HashMap();

Map map1=new HashMap();

map1.put("id", "1");

map1.put("pId", "0");

map1.put("name", "我的文件夹");

map1.put("isParent", "true");

map.put("id", "2");

map.put("pId", "0");

map.put("isParent", true);

map.put("name", "我的文件夹1");

list.add(map);

list.add(map1);*/

return list;

}

上了代码估计都知道怎么做了不过这里来解释下几个地方：

这个  autoParame 是传值给后台的，这个值 时id 也可以时pId 没点击一次都会去查询 父节点下的子节点

根据这个id 来检索所有的子节点。

但是第一次检索怎么办？

这里有设置默认值。第一个父节点可以自己设置好。 我这里是0

这样检索就完成了。

其他的上面都有注释应该都能看懂。

这里没有涉及到权限这一块。只是简单的异步加载树。

如果有什么不懂的 也可以直接评论。我会回复的。刚接触使用这个ztree 请指点。