1.1. fancytree简介 Fancytree是一个 JavaScript 动态树形jQuery插件，支持持久化，键盘操作，复选框，，表格，拖放，以及延迟加载。 github地址: https://github.com/mar10/fancytree 演示地址: 1.2. 使用实例 目录结构:
>=====>>><script type=”text/javascript”>var treeData = [{title: “item1 with key and tooltip”, tooltip: “Look, a tool tip!” },{title: “item2: selected on init”, selected: true },{title: “Folder”, folder: true, key: “id3”,children: [{title: “Sub-item 3.1”,children: [{title: “Sub-item 3.1.1”, key: “id3.1.1” },{title: “Sub-item 3.1.2”, key: “id3.1.2” }]},{title: “Sub-item 3.2”,children: [{title: “Sub-item 3.2.1”, key: “id3.2.1” },{title: “Sub-item 3.2.2”, key: “id3.2.2” }]}]},{title: “Document with some children (expanded on init)”, key: “id4”, expanded: true,children: [{title: “Sub-item 4.1 (active on init)”, active: true,children: [{title: “Sub-item 4.1.1”, key: “id4.1.1” },{title: “Sub-item 4.1.2”, key: “id4.1.2” }]},{title: “Sub-item 4.2 (selected on init)”, selected: true,children: [{title: “Sub-item 4.2.1”, key: “id4.2.1” },{title: “Sub-item 4.2.2”, key: “id4.2.2” }]},{title: “Sub-item 4.3 (hideCheckbox)”, hideCheckbox: true },{title: “Sub-item 4.4 (unselectable)”, unselectable: true }]},{title: “Lazy folder”, folder: true, lazy: true }];$($(“#tree1”).fancytree({//extensions: [“select”],checkbox: true,selectMode: 1,source: treeData,activate: function(event, data) {$(“#echoActive1”).text(data.node.title);},select: s = data.tree.getSelectedNodes().join(“, “);$(“#echoSelection1”).text(s);},dblclick: function(event, data) {data.node.toggleSelected();},keydown: ( event.which === 32 ) {data.node.toggleSelected();return false;}}});$(“#tree2”).fancytree({//extensions: [“select”],checkbox: true,selectMode: 2,source: treeData,select: selNodes = data.tree.getSelectedNodes();{return “[” + node.key + “]: ‘” + node.title + “‘”;});$(“#echoSelection2”).text(selKeys.join(“, “));},click: ( $.ui.fancytree.getEventTargetType(event) === “title” ){data.node.toggleSelected();}},keydown: ( event.which === 32 ) {data.node.toggleSelected();return false;}},// The following options are only required, if we have more than one tree on one page:cookieId: “fancytree-Cb2”,idPrefix: “fancytree-Cb2-“});$(“#tree3”).fancytree({//extensions: [“select”],checkbox: true,selectMode: 3,source: treeData,lazyLoad: function(event, ctx) {ctx.result = {url: “ajax-sub2.json”, debugDelay: 1000};},loadChildren: function(event, ctx) {ctx.node.fixSelection3AfterClick();},select: selKeys = $.map(data.tree.getSelectedNodes(), node.key;});$(“#echoSelection3”).text(selKeys.join(“, “));// Get a list of all selected TOP nodesvar selRootNodes = data.tree.getSelectedNodes(true);{return node.key;});$(“#echoSelectionRootKeys3”).text(selRootKeys.join(“, “));$(“#echoSelectionRoots3”).text(selRootNodes.join(“, “));},dblclick: function(event, data) {data.node.toggleSelected();},keydown: ( event.which === 32 ) {data.node.toggleSelected();return false;}},// The following options are only required, if we have more than one tree on one page://initId: “treeData”,cookieId: “fancytree-Cb3”,idPrefix: “fancytree-Cb3-“});$(“#tree4”).fancytree({//extensions: [“select”],checkbox: false,selectMode: 2,source: treeData,beforeSelect: ( data.node.folder ){return false;}},select: selNodes = data.tree.getSelectedNodes();{return “[” + node.key + “]: ‘” + node.title + “‘”;});$(“#echoSelection4”).text(selKeys.join(“, “));},click: ( ! data.node.folder ){data.node.toggleSelected();}},dblclick: function(event, data) {data.node.toggleExpanded();},keydown: ( event.which === 32 ) {data.node.toggleSelected();return false;}},// The following options are only required, if we have more than one tree on one page://initId: “treeData”,cookieId: “fancytree-Cb4”,idPrefix: “fancytree-Cb4-“});$(“#btnToggleSelect”).click(function(){$(“#tree2”).fancytree(“getRootNode”).visit(function(node){node.toggleSelected();});return false;});$(“#btnDeselectAll”).click(function(){$(“#tree2”).fancytree(“getTree”).visit(function(node){node.setSelected(false);});return false;});$(“#btnSelectAll”).click(function(){$(“#tree2”).fancytree(“getTree”).visit(function(node){node.setSelected(true);});return false;});});==”description”>单选框=>>>=”description”>This tree has <b>selectMode 2 (multi-selection)</b> enabled.<br>A single-click handler selects the node.<br>A keydown handler selects on [space].=”#” id=”btnSelectAll”>Select all</a> -=”btnDeselectAll”>Deselect all</a> -==>Selected keys: >=”description”>This tree has <b>checkoxes and selectMode 3 (hierarchical multi-selection)</b> enabled.<br>A double-click handler selects the node.<br>A keydown handler selects on [space].=>Selected keys: >>>=”description”>This tree has selectMode 2 (multi-selection) enabled, but <b>no checkboxes</b>.<br>A single-click handler selects the node.<br>A keydown handler selects on [space].<br>A double-click handler expands documents.<br>A onQuerySelect handler prevents selection of folders.=>Selected keys: >=====>=>>
1.3. 演示效果
只要相信，期待就会成真
