<!--jquery.treeview下载https://github.com/jzaefferer/jquery-treeview，然后将所需要的文件引入html中，第一个简单的树完成了--> <l
<!--jquery.treeview下载https://github.com/jzaefferer/jquery-treeview，然后将所需要的文件引入html中，第一个简单的树完成了-->
<link rel="stylesheet" href="jquery.treeview.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.treeview.js" type="text/javascript"></script>
<ul id="tree" class="filetree">
<li class="filetree"><span class="folder">1</span>
<ul>
<li ><span class="folder">11</span></li>
<li ><span class="folder">22</span>
<ul>
<li >
<span class="folder">222</span>
</li>
<li >
<span class="folder">333</span>
</li>
</ul>
</li>
<li ><span class="folder">1</span>
<ul>
<li ><span class="folder">aa</span></li>
<li ><span class="folder">bb</span></li>
</ul>
</li>
</ul>
</li>
<li ><span class="folder">2</span></li>
<li ><span class="folder">3</span></li>
</ul>
<script type="text/javascript">
$("#tree").treeview();
</script>
<!--ztree的第一个例子，来自原网站，首先下载ztree:https://github.com/zTree/zTree_v3,修改引入js,css的路径定义zTreeNodes,setting,调用初始化方法-->
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<!--
<script type="text/javascript" src="jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript">
var zTreeObj,
setting = {
view: {
selectedMulti: false
}
},
zTreeNodes = [{
"name": "网站导航",
open: false,
children: [{
"name": "google",
"url": "http://g.cn",
"target": "_blank"
}, {
"name": "baidu",
"url": "http://baidu.com",
"target": "_blank"
}, {
"name": "sina",
"url": "http://www.sina.com.cn",
"target": "_blank"
}]
}];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</BODY>
</HTML>
springmvc controller层
@RequestMapping("/treeview")
@ResponseBody
public void treeViewText(HttpServletResponse response, HttpServletRequest request) {
List<Person> list = new ArrayList<Person>();
for (int i = 0; i < 4; i++) {
Person person = new Person();
person.setId(i);
if (i == 0) {
person.setName("菜单");
person.setParent(true);
} else if(i==1){
person.setpId(0);
person.setName("菜单1");
person.setParent(true);
}else if(i==2){
person.setpId(1);
person.setName("菜2");
person.setParent(true);
}else if(i==3){
person.setpId(2);
person.setName("菜3");
person.setParent(false);
}
list.add(person);
}
String json = com.alibaba.fastjson.JSONObject.toJSON(list).toString();
try {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
out.write(json);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
前端简单异步调用。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/testP/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/testP/js/jquery.js"></script>
<script type="text/javascript" src="/testP/js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
var setting = {
view: {
//dblClickExpand: false,
expandSpeed: 100 //设置树展开的动画速度
},
//获取json数据
async: {
enable: true,
url: "/testP/treeview.do", // Ajax 获取数据的 URL 地址
autoParam: ["id"] //ajax提交的时候，传的是id值
},
data: { // 必须使用data
simpleData: {
enable: true,
idKey: "id", // id编号命名
pIdKey: "pId", // 父id编号命名
rootPId: 0
}
},
// 回调函数
//?????treeId
callback: {
onClick: function(event, treeId, treeNode, clickFlag) {
if (true) {
alert(" 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
}
},
//捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
onAsyncSuccess: function(event, treeId, treeNode, msg) {}
}
};
// 过滤函数
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;
}
//
$(document).ready(function() {
$.fn.zTree.init($("#tree"), setting);
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</BODY>
</HTML>
------------------------ztree增删改实例------------------------------------------------
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
//给节点额外增加属性来控制“重命名”、“删除”图标的显示或隐藏
showRenameBtn: showRenameBtn,
showRemoveBtn: showRemoveBtn
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
};
var zNodes = [
//给节点额外增加属性来控制“重命名”、“删除”图标的显示或隐藏
{
id: 1,
pId: 0,
name: "父节点 1",
open: true,
noRemoveBtn: true,
noEditBtn: true
}, {
id: 11,
pId: 1,
name: "叶子节点 1-1",
noRemoveBtn: true,
noEditBtn: true
}, {
id: 12,
pId: 1,
name: "叶子节点 1-2"
}, {
id: 13,
pId: 1,
name: "叶子节点 1-3"
}, {
id: 2,
pId: 0,
name: "父节点 2",
open: true
}, {
id: 21,
pId: 2,
name: "叶子节点 2-1"
}, {
id: 22,
pId: 2,
name: "叶子节点 2-2"
}, {
id: 23,
pId: 2,
name: "叶子节点 2-3"
}, {
id: 3,
pId: 0,
name: "父节点 3",
open: true
}, {
id: 31,
pId: 3,
name: "叶子节点 3-1"
}, {
id: 32,
pId: 3,
name: "叶子节点 3-2"
}, {
id: 33,
pId: 3,
name: "叶子节点 3-3"
}
];
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeEditName ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {
showLog("[ " + getTime() + " onRemove ] " + treeNode.name);
}
function beforeRename(treeId, treeNode, newName) {
className = (className === "dark" ? "" : "dark");
showLog("[ " + getTime() + " beforeRename ] " + treeNode.name);
if (newName.length == 0) {
alert("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function() {
zTree.editName(treeNode)
}, 10);
return false;
}
return true;
}
function onRename(e, treeId, treeNode) {
showLog("[ " + getTime() + " onRename ] " + treeNode.name);
}
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 showRenameBtn(treeId, treeNode) {
//获取节点所配置的noEditBtn属性值
if (treeNode.noEditBtn != undefined && treeNode.noEditBtn) {
return false;
} else {
return true;
}
}
//是否显示删除按钮
function showRemoveBtn(treeId, treeNode) {
//获取节点所配置的noRemoveBtn属性值
if (treeNode.noRemoveBtn != undefined && treeNode.noRemoveBtn) {
return false;
} else {
return true;
}
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
//在addHoverDom中判断第0级的节点不要显示“新增”按钮
if (treeNode.level === 0) {
return false;
} else {
//给节点添加"新增"按钮
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.id + "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.id);
if (btn) btn.bind("click", function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {
id: (100 + newCount),
pId: treeNode.id,
name: "new node" + (newCount++)
});
return false;
});
}
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.id).unbind().remove();
};
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
}
$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#selectAll").bind("click", selectAll);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
</style>
</HEAD>
<BODY>
<h1>高级 增 / 删 / 改 节点</h1>
<h6>[ 文件路径: exedit/edit_super.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
