标签: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.
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 });
标签:html 函数 节点 点击 document 拖放 href container selected
原文地址:https://www.cnblogs.com/Mengchangxin/p/11949240.html