测试支持火狐,谷歌,IE10等。
主要使用ztree,拥有复选框,增加,修改,删除功能,这些是要连接后台的,自己再修改下就可以用。
效果如下图:
点击增加后会出现
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO - select menu</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-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">
<!--
var setting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: true
},
callback: {
onRightClick: OnRightClick
}
};
var zNodes = [
{ id: 1, pId: 0, name: "随意勾选 1", open: true },
{ id: 11, pId: 1, name: "随意勾选 1-1", open: true },
{ id: 111, pId: 11, name: "随意勾选 1-1-1" },
{ id: 112, pId: 11, name: "随意勾选 1-1-2" },
{ id: 12, pId: 1, name: "随意勾选 1-2", open: true },
{ id: 121, pId: 12, name: "随意勾选 1-2-1" },
{ id: 122, pId: 12, name: "随意勾选 1-2-2" },
{ id: 2, pId: 0, name: "随意勾选 2", checked: true, open: true },
{ id: 21, pId: 2, name: "随意勾选 2-1" },
{ id: 22, pId: 2, name: "随意勾选 2-2", open: true },
{ id: 221, pId: 22, name: "随意勾选 2-2-1", checked: true },
{ id: 222, pId: 22, name: "随意勾选 2-2-2" },
{ id: 23, pId: 2, name: "随意勾选 2-3" }
];
function OnRightClick(event, treeId, treeNode) {
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY);
} else if (tr