码迷,mamicode.com
首页 > 其他好文 > 详细

jqtree使用说明

时间:2019-11-28 13:33:37      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:html   函数   节点   点击   document   拖放   href   container   selected   

JqTree is a jQuery widget for displaying a tree structure in html 
It supports json data, loading via ajax and drag-and-drop.

Download jqTree

 

 1 //使用js的严格模式
 2 ‘use strict‘;
 3 
 4 var $tree = $(‘#menutree‘);
 5 $(document).ready(function () {
 6     getSingle("/oa/api/menu/", function (data) {
 7         data = JSON.parse(data);
 8         console.log(data);
 9         $tree.tree({
10             //rtl: true,//可以使用rtl选项从右到左显示树。
11             //buttonLeft: false,//将切换按钮,放到右侧
12     //         onDragMove: function () {
13     //             console.log("tuozdaew")   //将菜单拖到树外触发的函数
14     //         },
15     // onDragStop: function () {
16     //                     console.log("11111111111")  //拖动菜单 松开鼠标后触发的函数
17     //
18     // },
19             data: data,
20             autoOpen: 0,//true  打开全部节点  设置为0以打开第一级节点。
21             dragAndDrop: true, //选项设置为true来添加拖放支持。现在,您可以将树节点拖动到另一个位置。
22             saveState: true,//如果将选项saveState设置为true,则jqtree会在页面重新加载后记住树的状态。
23             onCreateLi: function (node, $li) {
24                 $li.find(‘.jqtree-element‘).append(
25                     ‘<a href="#node-‘ + node.id + ‘" class="edit" data-node-id="‘ + node.id + ‘">‘ +
26                     ‘<i class="fa fa-pencil-square-o"></i>编辑</a>‘
27                 );
28             },
29             closedIcon: $(‘<i class="fa fa-arrow-circle-right"></i>‘),
30             openedIcon: $(‘<i class="fa fa-arrow-circle-down"></i>‘)
31         });
32     });
33 /*
34     $tree.on(‘tree.click‘, function (e) {
35         // Disable single selection
36         e.preventDefault();
37         var selected_node = e.node;
38         console.log(selected_node);
39         if (selected_node.id === undefined) {
40             console.warn(‘警告,每个菜单条目都必须有一个唯一的ID!‘);
41         }
42 
43         if ($tree.tree(‘isNodeSelected‘, selected_node)) {
44             $tree.tree(‘removeFromSelection‘, selected_node);//取消选择
45 
46         } else {
47             $tree.tree(‘addToSelection‘, selected_node);//点击选中
48 
49 
50         }
51     });
52 */
53 // 绑定编辑事件
54     $tree.on(‘click‘, ‘.jqtree_common div a.edit‘, function (e) {
55         // Get the id from the ‘node-id‘ data property
56         var node_id = $(e.target).data(‘node-id‘);
57         console.log(node_id);
58         // Get the node from the tree
59         var node = $tree.tree(‘getNodeById‘, node_id);
60         console.log(node);
61 
62         if (node) {
63             // Display the node name
64             alert(node.name);
65         }
66     })
67 
68 
69 });

 

jqtree使用说明

标签:html   函数   节点   点击   document   拖放   href   container   selected   

原文地址:https://www.cnblogs.com/Mengchangxin/p/11949240.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!