• jsTree使用记录


    1. ajax请求生成jsTree

    [javascript] view plain copy
     
    1. <span style="font-size:14px;"><script>  
    2.       
    3.         var r = []; // 权限树中被选中的叶子节点  
    4.         var currentGroupId;  
    5.   
    6.         function showPermitTree(id) {  
    7.             currentGroupId = id;  
    8.             $.ajax({  
    9.                 data : "currentGroupId=" + id,  
    10.                 type : "POST",  
    11.                 //dataType : 'json',  
    12.                 url : "/test/permittree",  
    13.                 error : function(data) {  
    14.                     alert("出错了!!:" + data);  
    15.                 },  
    16.                 success : function(data) {  
    17.                     //alert("success:" + data);  
    18.                     createPermitTree(data);  
    19.                 }  
    20.             });  
    21.               
    22.             ${'buttonDiv'}.style.display="";  
    23.         }  
    24.   
    25.         function createPermitTree(datastr) {  
    26.             datastr = eval("" + datastr + "");  
    27.             $('#permitTree').jstree({  
    28.                 'plugins' : [ "wholerow", "checkbox", "types" ],  
    29.                 'core' : {  
    30.                     "themes" : {  
    31.                         "responsive" : false  
    32.                     },  
    33.                     'data' : datastr  
    34.                 },  
    35.                 "types" : {  
    36.                     "default" : {  
    37.                         "icon" : "fa fa-folder icon-state-warning icon-lg"  
    38.                     },  
    39.                     "file" : {  
    40.                         "icon" : "fa fa-file icon-state-warning icon-lg"  
    41.                     }  
    42.                 }  
    43.             });  
    44.         }  
    45.   
    46.         // listen for event  
    47.         $('#permitTree').on('changed.jstree', function(e, data) {  
    48.             r = [];  
    49.             var i, j;  
    50.             for (i = 0, j = data.selected.length; i < j; i++) {  
    51.                 var node = data.instance.get_node(data.selected[i]);  
    52.                 if (data.instance.is_leaf(node)) {  
    53.                     r.push(node.id);  
    54.                 }  
    55.             }  
    56.             //alert('Selected: ' + r.join('@@'));  
    57.         })  
    58.           
    59.         function saveTree() {  
    60.             $.ajax({  
    61.                 data : {'currentGroupId' : currentGroupId,  
    62.                         'selectedNodes' : r.join('@@')},  
    63.                 type : "POST",  
    64.                 //dataType : 'json',  
    65.                 url : "/test/savetree",  
    66.                 error : function(data) {  
    67.                     alert("出错了!!:" + data);  
    68.                 },  
    69.                 success : function(data) {  
    70.                     alert("保存成功!");  
    71.                 }  
    72.             });  
    73.         }  
    74.           
    75.     </script></span><span style="font-size:24px;">  
    76. </span>  


    直接把测试项目中一段代码copy过来了,这是一棵带复选框的树。页面有地方点击之后触发showPermitTree(id)函数,发送ajax请求给后台,项目使用的是springmvc框架,后台返回JSONArray.toString。

    2. jsTree change事件

    上面代码中含change事件。把所有选中的节点的id放到一个数组中。

    页面上有个按钮,点击后触发saveTree函数,发请求给后台,把选中的节点的id发给后台。

    3.jsTree自定义contextmenu

    [javascript] view plain copy
     
    1. <script>  
    2. $('#jstree').jstree({  
    3.     core : {  
    4.         check_callback : true,  
    5.         data : [  
    6.             { "id" : "1", "parent" : "#", "text" : "root" },  
    7.             { "id" : "2", "parent" : "1", "text" : "child 1" },  
    8.             { "id" : "3", "parent" : "1", "text" : "child 2" }  
    9.         ],  
    10.     },  
    11.     plugins : ["wholerow","contextmenu"],  
    12.     "contextmenu": {    
    13.             "items": {    
    14.                 "create": null,    
    15.                 "rename": null,    
    16.                 "remove": null,    
    17.                 "ccp": null,    
    18.                 "add": {    
    19.                     "label": "add",    
    20.                     "action": function (obj) {  
    21.                         var inst = jQuery.jstree.reference(obj.reference);    
    22.                         var clickedNode = inst.get_node(obj.reference);   
    23.                         alert("add operation--clickedNode's id is:" + clickedNode.id);  
    24.                     }    
    25.                 },    
    26.                 "delete": {    
    27.                     "label": "delete",    
    28.                     "action": function (obj) {  
    29.                         var inst = jQuery.jstree.reference(obj.reference);    
    30.                         var clickedNode = inst.get_node(obj.reference);   
    31.                         alert("delete operation--clickedNode's id is:" + clickedNode.id);  
    32.                     }    
    33.                 }    
    34.             }    
    35.         }   
    36. }).on("ready.jstree", function (e, data) {  
    37.   data.instance.open_all();  
    38. });  
    39. </script>   
    这段代码使用jsTree的contextmenu plugin,去掉jsTree自带的菜单,并自定义菜单

     
    8
  • 相关阅读:
    promise
    ES6中的类
    css基础知识
    ES6数据解构:set map 的介绍
    ES6对象的拓展
    ES6函数的拓展
    ES6数组的拓展
    ES6字符串和数值的扩展
    webpack的三种运行方式
    Mysql数据增删改操作以及复制表小技巧
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7272090.html
Copyright © 2020-2023  润新知