知识管理树控制
右键菜单：
右键点击事件：javascript的右键点击事件；unbind 和bind，什么时候触发，浏览器的右键事件；
div,oncontextmenu
<div oncontextmenu="aa()">asdf</a>
右键点击事件，这个是浏览器的右键点击事件；
--
回调函数中的rightClick:
--
var kynamic = {
init: {
/**
* 给右键菜单声明事件
*/
initEvent: function(){
/**
* 这些事件在执行的时候，右键菜单已经显示出来了，这个时候知识管理树已经被加载出来了
*/
/**
* 增加一个文件夹事件
*/
$("#addFolder").unbind("click");
$("#addFolder").bind("click", function(){
kynamic.kynamicTree.addFolder();//增加文件夹
});
/**
* 增加一个文件事件
*/
$("#addFile").unbind("click");
$("#addFile").bind("click", function(){
kynamic.kynamicTree.addFile();//增加文件
});
/**
* 修改节点事件
*/
$("#updateNode").unbind("click");
$("#updateNode").bind("click", function(){
kynamic.kynamicTree.updateNode();
});
/**
* 删除节点事件
*/
$("#deleteNode").unbind("click");
$("#deleteNode").bind("click", function(){
kynamic.kynamicTree.deleteNode();
});
/**
* 给文本框增加一个change事件
*/
$("#name").unbind("keyup");
$("#name").bind("keyup", function(){
var name = $(this).val();
$.post("kynamicAction_showKynamicTreeLIKEName.action",{
name:name
},function(data){
kynamic.kynamicTree.zTree = $("#kynamicTree").zTree(kynamic.kynamicTree.setting, data.kynamicList);
});
});
}
},
/**
* 关于知识管理树的内容
*/
kynamicTree: {
zTree: '',
treeNode: '',
setting: {
isSimpleData: true,
treeNodeKey: "kid",
treeNodeParentKey: "pid",
showLine: true,
root: {
isRoot: true,
nodes: []
},
//一直保持节点属性文件夹状态
keepParent: true,
callback: {
rightClick: function(event, treeId, treeNode){
kynamic.kynamicTree.treeNode = treeNode;
var x = event.clientX;
var y = event.clientY;
$("#rMenu").css({
"top": y + "px",
"left": x + "px",
"display": "block"
});
if (kynamic.kynamicTree.treeNode.isParent) {//文件夹节点
kynamic.kynamicTree.showRMenu({
addFolder: true,
addFile: true,
updateNode: true,
deleteNode: true
});//显示右键菜单
}
else {//文件节点
kynamic.kynamicTree.showRMenu({
addFolder: false,
addFile: false,
updateNode: true,
deleteNode: true
});//显示右键菜单
}
}
}
},
/**
* 加载知识管理树
*/
loadKynamicTree: function(){
$.post("kynamicAction_showKynamics.action", null, function(data){
kynamic.kynamicTree.zTree = $("#kynamicTree").zTree(kynamic.kynamicTree.setting, data.kynamicList);
});
},
/**
* 增加文件夹
*/
addFolder: function(){
kynamic.kynamicTree.addNode({
message: '请输入文件夹的名称',
isParent: true
});
},
/**
* 增加文件
*/
addFile: function(){
kynamic.kynamicTree.addNode({
message: '请输入文件的名称',
isParent: false
});
},
/**
* 增加节点
*/
addNode: function(addJSON){
/**
* 在树上增加一个文件夹
* 在数据库的kynamic表中增加一行数据
*/
var name = window.prompt(addJSON.message);
if (name != null) {//没有选择取消
if (name != "") {
var parameter = {
pid: kynamic.kynamicTree.treeNode.kid,
name: name,
isParent: addJSON.isParent
};
$.post("kynamicAction_showKynamic.action", {
name: name
}, function(data){
if (data.message == "1") {//该名字可用
$.post("kynamicAction_saveKynamic.action", parameter, function(data1){
var newNode = {
kid: data1.id,
name: name,
isParent: addJSON.isParent,
pid: kynamic.kynamicTree.treeNode.kid
};
/**
* 把新的节点追加到父节点上
*/
kynamic.kynamicTree.zTree.addNodes(kynamic.kynamicTree.treeNode, newNode, true);
});
}
else {//该名字不可用
alert("该名字已经被使用了");
}
});
}
}
},
/**
* 修改节点
*/
updateNode: function(){
var name = window.prompt("请输入节点的名称", kynamic.kynamicTree.treeNode.name);
$.post("kynamicAction_showKynamic.action", {
name: name
}, function(data){
if (data.message == "1") {
$.post("kynamicAction_updateKynamic.action", {
kid: kynamic.kynamicTree.treeNode.kid,
name: name
}, function(data1){
/**
* 1、更改该节点的属性的名称
* 2、刷新整个树
*/
kynamic.kynamicTree.treeNode.name = name;
kynamic.kynamicTree.zTree.refresh();
});
}
else {
alert("节点的名称已经存在了");
}
});
},
/**
* 删除节点
*/
deleteNode: function(){
/**
* 如果删除的是文件节点，则直接删除
* 如果删除的是文件夹节点，则先判断该文件夹下是否存在子节点
* 如果不存在，则删除
* 如果存在，则提示：'不能删除，因为有子节点'
*/
if (kynamic.kynamicTree.treeNode.isParent) {//文件夹节点
//检查该文件夹下是否存在子节点
if (kynamic.kynamicTree.zTree.getNodeByParam("pid", kynamic.kynamicTree.treeNode.kid)) {//如果存在子节点
alert("有子节点，不能删除");
}
else {//不存在子节点
if (window.confirm("您确认要删除吗?")) {
$.post("kynamicAction_deleteKynamic.action", {
kid: kynamic.kynamicTree.treeNode.kid
}, function(data){
//在树上删除该节点
kynamic.kynamicTree.zTree.removeNode(kynamic.kynamicTree.treeNode);
//进行刷新
kynamic.kynamicTree.zTree.refresh();
});
}
}
}
else {//文件节点
if (window.confirm("您确认要删除吗?")) {
$.post("kynamicAction_deleteKynamic.action", {
kid: kynamic.kynamicTree.treeNode.kid
}, function(data){
//在树上删除该节点
kynamic.kynamicTree.zTree.removeNode(kynamic.kynamicTree.treeNode);
//进行刷新
kynamic.kynamicTree.zTree.refresh();
});
}
}
},
/**
* 控制右键菜单的显示
*/
showRMenu: function(rMenuJSON){
if (rMenuJSON.addFolder) {
$("#addFolder").show();
}
else {
$("#addFolder").hide();
}
if (rMenuJSON.addFile) {
$("#addFile").show();
}
else {
$("#addFile").hide();
}
if (rMenuJSON.updateNode) {
$("#updateNode").show();
}
else {
$("#updateNode").hide();
}
if (rMenuJSON.deleteNode) {
$("#deleteNode").show();
}
else {
$("#deleteNode").hide();
}
}
},
/**
* 关于版本的内容
*/
version: {}
};
$().ready(function(){
kynamic.kynamicTree.loadKynamicTree();
$("#rMenu").hover(function(){//进入右键菜单区域后
}, function(){//移出右键菜单区域后
$("#rMenu").hide();
});
/**
* 声明右键菜单事件
*/
kynamic.init.initEvent();
});
------
jquer事件-事件切换，hover(over,out)
移动到一个元素上，触发，移除触发；
--
右键的操作参照给出的demo；
声明时调用，事件触发时调用，这些方法是实现绑定在事件上，事件触发时调用；
1，右键显示div；
右键事件，回调函数中写，div的显示位置；显示div；
然后文件节点和文件夹节点的显示不同
callback: {
rightClick: function(event, treeId, treeNode){
kynamic.kynamicTree.treeNode = treeNode;
var x = event.clientX;//获得坐标；
var y = event.clientY;
$("#rMenu").css({
"top": y + "px",
"left": x + "px",
"display": "block"
});
if (kynamic.kynamicTree.treeNode.isParent) {//文件夹节点
kynamic.kynamicTree.showRMenu({//显示的jquery方法封装，限定四个菜单显示什么；
addFolder: true,
addFile: true,
updateNode: true,
deleteNode: true
});//显示右键菜单
}
else {//文件节点
kynamic.kynamicTree.showRMenu({
addFolder: false,
addFile: false,
updateNode: true,
deleteNode: true
});//显示右键菜单
}
}
}
2，div的各个事件；
因为这里是div的处理：在绑定的时候就需要绑定对应菜单处理事件：
<div class="addnodes" id="rMenu" style="position:absolute;display:none;overflow:hidden">
<ul>
<li id="addFolder" style="background: url(${pageContext.request.contextPath}/css/images/jia.jpg) 10px 5px no-repeat;border-bottom:1px solid #8ab2e6;cursor:pointer;">增加文件夹</li>
<li id="addFile" style="background: url(${pageContext.request.contextPath}/css/images/jia.jpg) 10px 5px no-repeat;border-bottom:1px solid #8ab2e6;cursor:pointer;">增加文件</li>
<li id="deleteNode" style="background: url(${pageContext.request.contextPath}/css/images/jian.jpg) 10px 9px no-repeat;border-bottom:1px solid #8ab2e6;cursor:pointer;">删除节点</li>
<li id="updateNode" style="background: url(${pageContext.request.contextPath}/css/images/jian.jpg) 10px 9px no-repeat;border-bottom:1px solid #8ab2e6;cursor:pointer;">修改节点</li>
</ul>
</div>
init: {
/**
* 给右键菜单声明事件
*/
initEvent: function(){
/**
* 这些事件在执行的时候，右键菜单已经显示出来了，这个时候知识管理树已经被加载出来了
*/
/**
* 增加一个文件夹事件
*/
$("#addFolder").unbind("click");
$("#addFolder").bind("click", function(){
kynamic.kynamicTree.addFolder();//增加文件夹
});
/**
* 增加一个文件事件
*/
$("#addFile").unbind("click");
$("#addFile").bind("click", function(){
kynamic.kynamicTree.addFile();//增加文件
});
/**
* 修改节点事件
*/
$("#updateNode").unbind("click");
$("#updateNode").bind("click", function(){
kynamic.kynamicTree.updateNode();
});
/**
* 删除节点事件
*/
$("#deleteNode").unbind("click");
$("#deleteNode").bind("click", function(){
kynamic.kynamicTree.deleteNode();
});
/**
* 给文本框增加一个change事件
*/
$("#name").unbind("keyup");
$("#name").bind("keyup", function(){
var name = $(this).val();
$.post("kynamicAction_showKynamicTreeLIKEName.action",{
name:name
},function(data){
kynamic.kynamicTree.zTree = $("#kynamicTree").zTree(kynamic.kynamicTree.setting, data.kynamicList);
});
});
}
},
3，加载权限树，同时在这里可以写对应的各个处理方法；写在树里面就可以了；这都是对树的操作；
修改添加的时候需要输入名称，确定是否有重复名称；
传递的JSON数据里面加上callback，然后对一些方法可以封装进去
/**
* 增加节点
*/
addNode: function(addJSON){
/**
* 在树上增加一个文件夹
* 在数据库的kynamic表中增加一行数据
*/
var name = window.prompt(addJSON.message);
if (name != null) {//没有选择取消
if (name != "") {
var parameter = {
pid: kynamic.kynamicTree.treeNode.kid,
name: name,
isParent: addJSON.isParent
};
$.post("kynamicAction_showKynamic.action", {
name: name
}, function(data){
if (data.message == "1") {//该名字可用
addJSON.callback(name,addJSON,parameter,data);
}
else {//该名字不可用
alert("该名字已经被使用了");
}
});
}
}
},
/**
* 修改节点
*/
updateNode: function(callback){
var name = window.prompt("请输入节点的名称", kynamic.kynamicTree.treeNode.name);
$.post("kynamicAction_showKynamic.action", {
name: name
}, function(data){
if (data.message == "1") {
callback(data,name);
}
else {
alert("该名字已经被使用了");
}
});
},
/**
* 增加文件夹
*/
addFolder: function(){
kynamic.kynamicTree.addNode({
message: '请输入文件夹的名称',
isParent: true,
callback: function(name,addJSON, parameter,data){
$.post("kynamicAction_saveKynamic.action", parameter, function(data1){
var newNode = {
kid: data1.id,
name: name,
isParent: addJSON.isParent,
pid: kynamic.kynamicTree.treeNode.kid
};
/**
* 把新的节点追加到父节点上
*/
kynamic.kynamicTree.zTree.addNodes(kynamic.kynamicTree.treeNode, newNode, true);
});
}
});
},
这里面写了一个回调函数，然后其他调用的时候就可以直接：
$("#addFolder").bind("click", function(){
kynamic.kynamicTree.addFolder();//增加文件夹
});
$("#updateNode").bind("click", function(){
kynamic.kynamicTree.updateNode(function(data,name){
$.post("kynamicAction_updateKynamic.action",{
kid:kynamic.kynamicTree.treeNode.kid,
name:name
},function(data1){
/**
* 1、更改该节点的属性的名称
* 2、刷新整个树
*/
kynamic.kynamicTree.treeNode.name = name;
kynamic.kynamicTree.zTree.refresh();
});
});
});
删除操作，就需要进行判断是否是文件夹，是文件夹需要判断是否有子节点，有不能删除；
keepParent：true，一直保持文件夹状态；
=====
遍历子树：
就是在上面显示当前路径：就是树的级联获取位置；
左匹配查询子树：
给文本框增加一个change事件，
事件是在页面的时候加载；
keyup，在文本框输入内容就可以获得数据；
后台遍历对应节点，同时将其子节点获取出来；同时可以写一个帮助类，将其抽取出来；
浙公网安备 33010602011771号