JSTree使用

最新推荐文章于 2024-06-13 09:33:09 发布

crazylanguage_mo

最新推荐文章于 2024-06-13 09:33:09 发布

阅读量3.3k

点赞数

分类专栏：前端文章标签： jstree

本文链接：https://blog.csdn.net/sinat_25552937/article/details/89947604

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JSTree使用

1、jstree.js 下载地址:https://www.jstree.com/

2、当然，jstree.js的使用肯定是离不开jquery.js的。不过下载好的包里是包含了jquery.js的。

3、一些相关的插件，简单说下几个常用的：

Checkbox:复选框

Dnd：可拖拽功能

Contextmenu:菜单功能

4、由于要求做一个支持菜单功能、可拖拽、增删改节点功能的属性菜单，所以本次值用到了Checkbox、Dnd、Contextmenu这三个，当然由于期间还用到弹出框功能，就使用jqueryUI的dialog所以还需要引入jquery-ui.js。

5、下面就是代码了:

		    <head>
		    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		    <link rel="stylesheet" href="./resources/css/style.min.css" />
		    <link rel="stylesheet" href="./resources/css/jquery-ui.css" />
		    <script type="text/javascript" src="./resources/js/jQuery-1.12.4.js"></script>
		    <script type="text/javascript" src="./resources/js/jquery-ui.js"></script>
		    <script type="text/javascript" src="./resources/js/jstree.js"></script>
		    <script type="text/javascript"
		        src="./resources/js/jstree.contextmenu.js"></script>
		    <script type="text/javascript" src="./resources/js/jstree.checkbox.js"></script>
		    <script type="text/javascript" src="./resources/js/jstree.dnd.js"></script>
		    <script type="text/javascript" src="./resources/js/jstree.state.js"></script>
		    <script type="text/javascript" src="./resources/js/jstree.types.js"></script>
		    <title>Insert title here</title>
		    </head>
		    <body>
		        <div id="demoTree"></div>
		    
		        <div id="addNode" style="display: none;" title="Add/Update Node">
		            <table>
		                <tr>
		                    <td><input type="hidden" name="parent" id="parent" /> <input
		                        type="hidden" name="nodeId" id="nodeId" /> Name:<input type="text"
		                        name="nodeName" id="nodeName" /></td>
		                </tr>
		            </table>
		        </div>
		    
		        <div id="message" style="display: none;" title="Delete Node">
		            <h1>Sure to Delete ?</h1>
		        </div>
		        
		        <div id="move" style="display: none;" title="Move Node">
		            <h1>Sure to Move ?</h1>
		        </div>
		    </body>
		    </html>

这里主要就是页面html块，主要的树的节点所在呢，就是ID为demoTree的DIV了；然后后面的ID为addNode、message、move的三个DIV主要是用来弹出框的，分别是增加和修改节点功能、确定删除、确定移动。

6、以下是JavaScript块：

			$("#demoTree").on('move_node.jstree', function(e,data){
                console.info(data);
                moveNode(data);
            }).jstree({
                'core':{
                    'check_callback' : true,
                    'data': {
                        "url" : "./getNodeListJson.htm",
                        "dataType" : "json"
                    }
                },
                'plugins' : ['themes','json_data','checkbox','ui','contextmenu','dnd', 'state', 'types'],
                'contextmenu' : {
                    'select_node' : false,
                    'show_at_node' : true,
                    'items':{
                         "create":{
                             'separator_before'    : false,
                            'separator_after'    : true,
                            '_disabled'            : false,
                            'label':'Add',
                            'action':function(data){
                                $("#nodeId").val("");
                                $("#parent").val("");
                                $("#nodeName").val("");
                                 var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
                                $("#parent").val(obj.id);
                                $("#addNode").dialog("open");
                            }
                        },
                        'remove':{
                            'separator_before'    : false,
                            'separator_after'    : true,
                            '_disabled'            : false,
                            'label' : 'Delete',
                            'action':function(data){
                                 var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
                                 deleteNode(obj.id);
                            }
                        },
                        'rename':{
                            'separator_before'    : false,
                            'separator_after'    : true,
                            '_disabled'            : false,
                            'label':'Update',
                            'action':function(data){
                                $("#nodeId").val("");
                                $("#parent").val("");
                                $("#nodeName").val("");
                                 var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
                                $("#nodeId").val(obj.id);
                                $("#nodeName").val(obj.text);
                                $("#addNode").dialog("open");
                            }
                        }
                    }
                } 
            });

这里主要就是给DIV加载树了；首先给树绑定了一个’move_node.jstree’，这个是用于给树加上拖拽功能，里面的moveNode(data)主要是一个确定移动的弹框以及ajax请求。当然拖拽功能还需要在jstree内的core加上这一属性，否则会拖拽不了。

		 'core':{
                'check_callback' : true,
                'data': {
                    "url" : "./getNodeListJson.htm",
                    "dataType" : "json"
                }
            },

首先，树的数据就是通过图中data的url请求服务端获取的json数据，当然这个json数据是要遵循一定的格式的，我的是根据下载好的包中的demo的root.json的格式拼接的。

再看plugins，这里主要就是声明你要用的哪些插件

下面主要说一下contextmenu：

Select_node：是指是否选中当前节点

Show_at_node:是指是否在当前节点展示菜单

Items：是指菜单元素

Items自带的几个节点就是create、remove、rename。

separator_before、separator_after:是指是否在菜单元素前或后加上分割线

Label：这个就是菜单元素的名称了

Action：是指这个菜单元素下的一系列操作了

7、弹出框:

	 $(function(){
        $("#addNode").dialog({
            autoOpen: false,
            width: 400,
            buttons: [
                {
                    text: "Ok",
                    click: function() {
                        var nodeId = $("#nodeId").val();
                        var parent = $("#parent").val();
                        var nodeName = $("#nodeName").val();
                        if(null == nodeName || "" == nodeName){
                            alert("Name is null");
                            return;
                        }
                        $.ajax({
                            url : './saveNode.htm',
                            data : {
                                'nodeId' : nodeId,
                                'parent': parent,
                                'name' : nodeName
                            },
                            type : 'POST',
                            dataType : 'json',
                            success : function(data){
                                if(data.result == 'success'){
                                    alert("Done success");
                                    window.location.reload();
                                }else if(data.result == 'fail'){
                                    alert("Done failed");
                                }else{
                                    alert(data.result);
                                }
                            }
                        });
                        $( this ).dialog( "close" );
                    }
                },
                {
                    text: "Cancel",
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
            ]
        });

这个就是给div绑定弹出框功能。

8、整体效果图，由于历史比较久远，后续补上

crazylanguage_mo

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JSTree使用

JSTree使用1、jstree.js 下载地址:https://www.jstree.com/2、当然，jstree.js的使用肯定是离不开jquery.js的。不过下载好的包里是包含了jquery.js的。3、一些相关的插件，简单说下几个常用的：Checkbox:复选框Dnd：可拖拽功能Contextmenu:菜单功能4、由于要求做一个支持菜单功能、可拖拽、增删改节点功能的属...
复制链接

扫一扫

专栏目录