(JQuery)如何给JsTree生成的树的每个节点添加上自定义的右键菜单?

栏目:资讯发布:2023-11-29浏览:3收藏

(JQuery)如何给JsTree生成的树的每个节点添加上自定义的右键菜单?,第1张

一个带有右键操作的树形菜单

$(document)ready(function(){

    $ajaxSetup({cache:false});

    $("#browser")tree({

    data  : {

        type  : "json",

        url   : src,

        async : true,

        async_data : function (NODE) {

                                        return { parent_Id : $(NODE)attr("id") || 0}

                                     }

      },

      lang:{

           loading:"目录加载中……"

            },

      rules:

      {

      draggable   : "all"   //这个设置可以使得节点进行拖动操作

      },

      ui:{

           context     : [ //自定义右键操作的可操作内容

            {

                id      : "create",

                label   : "添加下级目录", //右键弹出菜单的此项操作屏显字样

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); }, //允许节点被右击时出现操作菜单

                icon    : "<%=requestgetContextPath() %>/css/themes/default/createpng",//右键弹出菜单的此项操作图标

                action  : function (NODE, TREE_OBJ) {

                                                //进行此项操作,将有这个函数事件被响应

                                                     }

            },

            "separator"//这个是在两个操作之间画一条分隔线

           ,

            {

                id      : "edit",

                label   : "编辑目录信息",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/image/reg2gif",

                action  : function (NODE, TREE_OBJ) {

                                                    openWindow('myurl','','',function(){treeRefresh($(NODE)attr("id"));});

                                                    }

            },

            "separator"

            ,

            {

                id      : "privilege",

                label   : "设置目录权限",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/themes/default/renamepng",

                action  : function (NODE, TREE_OBJ) {

                                                    openWindow('myurl','','',function(){treeRefresh($(NODE)attr("id"));});

                                                    }

            },

            "separator",

            {

                id      : "delete",

                label   : "删除",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/themes/default/removepng",

                action  : function (NODE, TREE_OBJ) {

                                                    var tree=$tree_reference("browser");

                                                    openWindow('myurl','','',function(){

                                               //下边的parent()和refresh()均为v098版本提供,如果你使用的是其他版本如v096等,这些将不被支持。

                                                    NODE=$(treeparent(NODE));

                                                    if($(NODE)attr("id")==undefined){

                                                        treerefresh();

                                                    }else{

                                                        TreeRefresh();

                                                    }

                                                    });

                                                    }

            },

            "separator",

            {

                id      : "others",

                label   : "其他操作",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/images/cutpng",

                action  : function (NODE, TREE_OBJ) {

                                                    alert("暂无可提供操作。");

                                                    }

            }

            ]

      },

   callback : {

         onselect: function(node) {

            //(a);

           

        }

    }

 

});

function treeRefresh(nodeid){

                     var rid=nodeid;

                    var tree=$tree_reference("browser");

                    var par_node=treeparent($("#"+rid));

                    treerefresh(par_node);

}

});

//缩起全部

$('tree > ul li')hide();

//展示第一个

$('tree > ul > li: first')show();

大概就是这样

下次问问题建议贴代码(htmlcssjs),不要放,没法调试。。。

query ztree 当前父节点下增加子节点问题_点击事件增加子节点

一、功能描述:利用jQuery ztree31版本插件做导航树形菜单时,页面打开先加载二级菜单,通过点击事件,异步加载的方式,在添加当前父节点的子节点。

二、初始步骤:

1按照文档要求,导入jquery包,ztree插件包31版本;

2编写相应的jsp页面代码

三、遇到问题:

1、通过chrome调试的时候,提示:addNodes不是当前jquery对象treeObj的方法。但是在api文档里确实存在这个方法。

2、经过很长时间的摸索,开始把ztree-corejs插件换成高版本的,结果addNodes好用了,但是没有了菜单的图标,而且所有的都是异步加载。

四、解决问题:

原因:最后在32版本更新日志中,发现这么一句话:

修改代码结构,将 addNodes、removeNode、removeChildNodes 方法 和 beforeRemove、onRemove 回调 转移到 core 内。

最终领悟,原来32版本之前的addNodes。。。等一些方法在ztreeexeditjs中,而且在31文档中,方法前也有E字母标识。

所以只要引入jqueryztreeexedit-31js 包,即可解决这个问题。

五、总结

粗心浪费了好多时间,注意API中的小细节。

这是jqueryztree 各个版本的URL:http://codegooglecom/p/jquerytree/downloads/list,供大家参考。

六、jsp代码,只需要加入jqueryztreeexedit-31js ,url换了即可。

%@ page language="java" import="javautil" pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Strict//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-strictdtd">

<html>

<head>

<title>机构维护</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="/zTreeStyle/zTreeStylecss" type="text/css"/>

<script type="text/javascript" src="/jquery-142js"></script>

<script type="text/javascript" src="/jqueryztreecore-31js"></script>

<script type="text/javascript"

</head>

<body>

<div>

<ul id="orgTree" class="ztree" style="width:230px; overflow:auto;"></ul>

</div>

<script type="text/javascript">

//配置setting

var ztreeObj,

setting = {

async: {

enable: true,//开启异步加载模式

contentType: "application/json", //Ajax 提交参数的数据类型。

type: "post",

dataType: "text",//Ajax 获取的数据类型

"url" : "${pageContextrequestcontextPath}/org/makeOrgTreeaction",

//自动提交当前节点的id

//假设 异步加载 父节点(node = {id:1, name:"test"}) 的子节点时,将提交参数 id=1

autoParam: ["id"]

},

//Ajax 返回的数据格式中,页面主要参数的设置

data: {

simpleData: {

enable: true,

idKey: "id",

pIdKey: "pid",

rootPid: "0"

}

},

//树形图动作

view: {

expandSpeed: "fast", //节点展开的速度

selectedMulti: false //设置是否允许同时选中多个节点。

},

//回调函数的设置

callback: {

onClick: zTreeOnClick //点击事件,当点击节点,做的事情。

}

};

/

初始化树形菜单

/

$(function(){

ztreeObj = $fnzTreeinit($("#orgTree"),setting);

});

//点击事件的处理

function zTreeOnClick(event,treeId,treeNode){

pid =treeNodeid;

var data = {"orgid":pid};

$ajax({

url:"${pageContextrequestcontextPath}/org/makeOrgTreeAgainaction",

type: "post",

dataType: "json",

data: data,

cache: false,

success: function(jsonArray){

var treeObj = $fnzTreegetZTreeObj("orgTree");

treeObjaddNodes(treeNode,jsonArray);

}

});

}

</body>

</html>

(JQuery)如何给JsTree生成的树的每个节点添加上自定义的右键菜单?

一个带有右键操作的树形菜单$(document)ready(function(){    $ajaxSetup({cache:false});    $("#browser")tree({    data ...
点击下载
热门文章
    确认删除?
    回到顶部