3f:null 40:["$","title",null,{"children":"Fancytree: Tree view / tree grid | Kevin Hernández Rostrán | Observable"}] 46:T474,

47:T73c,skins = [ { name: "XP", value: "xp", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-xp/ui.fancytree.min.css", mapPreset: {} }, { name: "Vista (classic Dynatree)", value: "vista", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-vista/ui.fancytree.css", mapPreset: {} }, { name: "Win7", value: "win7", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-win7/ui.fancytree.css", mapPreset: {} }, { name: "Win8", value: "win8", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-win8/ui.fancytree.css", mapPreset: {} }, { name: "Win8-N", value: "win8n", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-win8-n/ui.fancytree.css", mapPreset: {} }, { name: "Win8 xxl", value: "win8xxl", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-win8-xxl/ui.fancytree.css", mapPreset: {} }, { name: "Lion", value: "lion", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-lion/ui.fancytree.css", mapPreset: {} }, { name: "FontAwesome 4", value: "awesome4", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-awesome/ui.fancytree.min.css", mapPreset: presets.awesome4, glyphStyle: html`` }, { name: "FontAwesome 5", value: "awesome5", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.2/skin-awesome/ui.fancytree.min.css", mapPreset: presets.awesome5, glyphStyle: html`` } ]48:T1023,presets = new Object({ awesome4: { _addClass: "fa", checkbox: "fa fa-square-o", checkboxSelected: "fa fa-check-square-o", checkboxUnknown: "fa fa-square fancytree-helper-indeterminate-cb", dragHelper: "fa fa-arrow-right", dropMarker: "fa fa-long-arrow-right", error: "fa fa-warning", expanderClosed: "fa fa-caret-right", expanderLazy: "fa fa-angle-right", expanderOpen: "fa fa-caret-down", // We may prevent wobbling rotations on FF by creating a separate sub element: loading: { html: "" }, nodata: "fa fa-meh-o", noExpander: "", radio: "fa fa-circle-thin", // "fa-circle-o" radioSelected: "fa fa-circle", // radioUnknown: "fa fa-dot-circle-o", // Default node icons. // (Use tree.options.icon callback to define custom icons based on node data) doc: "fa fa-file-o", docOpen: "fa fa-file-o", folder: "fa fa-folder-o", folderOpen: "fa fa-folder-open-o", }, awesome5: { // fontawesome 5 have several different base classes // "far, fas, fal and fab" The rendered svg puts that prefix // in a different location so we have to keep them separate here _addClass: "", checkbox: "far fa-square", checkboxSelected: "far fa-check-square", // checkboxUnknown: "far fa-window-close", checkboxUnknown: "fas fa-square fancytree-helper-indeterminate-cb", radio: "far fa-circle", radioSelected: "fas fa-circle", radioUnknown: "far fa-dot-circle", dragHelper: "fas fa-arrow-right", dropMarker: "fas fa-long-arrow-alt-right", error: "fas fa-exclamation-triangle", expanderClosed: "fas fa-caret-right", expanderLazy: "fas fa-angle-right", expanderOpen: "fas fa-caret-down", loading: "fas fa-spinner fa-pulse", nodata: "far fa-meh", noExpander: "", // Default node icons. // (Use tree.options.icon callback to define custom icons based on node data) doc: "far fa-file", docOpen: "far fa-file", folder: "far fa-folder", folderOpen: "far fa-folder-open", }, bootstrap3: { _addClass: "glyphicon", checkbox: "glyphicon-unchecked", checkboxSelected: "glyphicon-check", checkboxUnknown: "glyphicon-expand fancytree-helper-indeterminate-cb", // "glyphicon-share", dragHelper: "glyphicon-play", dropMarker: "glyphicon-arrow-right", error: "glyphicon-warning-sign", expanderClosed: "glyphicon-menu-right", // glyphicon-plus-sign expanderLazy: "glyphicon-menu-right", // glyphicon-plus-sign expanderOpen: "glyphicon-menu-down", // glyphicon-minus-sign loading: "glyphicon-refresh fancytree-helper-spin", nodata: "glyphicon-info-sign", noExpander: "", radio: "glyphicon-remove-circle", // "glyphicon-unchecked", radioSelected: "glyphicon-ok-circle", // "glyphicon-check", // radioUnknown: "glyphicon-ban-circle", // Default node icons. // (Use tree.options.icon callback to define custom icons based on node data) doc: "glyphicon-file", docOpen: "glyphicon-file", folder: "glyphicon-folder-close", folderOpen: "glyphicon-folder-open", }, material: { _addClass: "material-icons", checkbox: { text: "check_box_outline_blank" }, checkboxSelected: { text: "check_box" }, checkboxUnknown: { text: "indeterminate_check_box" }, dragHelper: { text: "play_arrow" }, dropMarker: { text: "arrow-forward" }, error: { text: "warning" }, expanderClosed: { text: "chevron_right" }, expanderLazy: { text: "last_page" }, expanderOpen: { text: "expand_more" }, loading: { text: "autorenew", addClass: "fancytree-helper-spin", }, nodata: { text: "info" }, noExpander: { text: "" }, radio: { text: "radio_button_unchecked" }, radioSelected: { text: "radio_button_checked" }, // Default node icons. // (Use tree.options.icon callback to define custom icons based on node data) doc: { text: "insert_drive_file" }, docOpen: { text: "insert_drive_file" }, folder: { text: "folder" }, folderOpen: { text: "folder_open" }, } })49:[{"id":"4dee43e8b9a5b7c06af3bfb7e98bce8f6ccd5fabfc835356990f8e44712c84a9b0cf9b3c5490bc47328942616ecca6b1f05d68233f1b5e49c3fdc9a425d5ae67","href":"https://static.observableusercontent.com/files/4dee43e8b9a5b7c06af3bfb7e98bce8f6ccd5fabfc835356990f8e44712c84a9b0cf9b3c5490bc47328942616ecca6b1f05d68233f1b5e49c3fdc9a425d5ae67","name":"example_awesome.png","type":"image/png","lastModified":1669063303270.666,"size":64183},{"id":"d8de8e9a7931371eca80c69cb8d7555662469cac84eb04d8b1d44eb0242f537f67ba416efc419bc89b2dcfb31efac18ff6ba22b4744a58e934142dfebf06cdbe","href":"https://static.observableusercontent.com/files/d8de8e9a7931371eca80c69cb8d7555662469cac84eb04d8b1d44eb0242f537f67ba416efc419bc89b2dcfb31efac18ff6ba22b4744a58e934142dfebf06cdbe","name":"ajax-tree-products.json","type":"application/json","lastModified":1669063517038.757,"size":2936},{"id":"ad17757aa24705446e69e1f60a5c6f56e3635b20d49a75edad106c470c19a5b5dfe4b8aeb911d25d312e9633a8527b371fdaa5fbacb164445ced822df56c138e","href":"https://static.observableusercontent.com/files/ad17757aa24705446e69e1f60a5c6f56e3635b20d49a75edad106c470c19a5b5dfe4b8aeb911d25d312e9633a8527b371fdaa5fbacb164445ced822df56c138e","name":"ajax-sub2.json","type":"application/json","lastModified":1669063579068.309,"size":97}] 44:{"id":"e9305496dad5ee6c","slug":"jquery-fancytree","title":"Fancytree: Tree view / tree grid","thumbnail":"481982a031de62900acbc0c62b8f9f9f6aae358b61a04d3001dd180a01d02f3a","access_level":"public","create_time":"$D2022-11-21T17:11:06.738Z","update_time":"$D2022-11-30T23:32:35.514Z","view_time":null,"first_public_time":"$D2022-11-21T17:56:31.365Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6fd0285f3ab12b9e","login":"kevinah95","name":"Kevin Hernández Rostrán","avatar_url":"https://avatars-next.observableusercontent.com/f96153a30d564e4372442574fb8e5dc2990136f0ae80b066af521153391d2ebb","tier":"starter_2024","bio":"A child of God • Trust in «as for me and my family, we will serve the Lord» • Software Developer 💻 • Graphic Designer 😍 • Creative 👌 • Thankful","following":false},"version":362,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e8185a03aa2dfdf","login":"kevinah95","name":"Kevin Hernández Rostrán","avatar_url":"https://avatars-next.observableusercontent.com/f96153a30d564e4372442574fb8e5dc2990136f0ae80b066af521153391d2ebb","tier":null,"bio":"A child of God • Trust in «as for me and my family, we will serve the Lord» • Software Developer 💻 • Graphic Designer 😍 • Creative 👌 • Thankful","following":false}],"members":[{"type":"individual","id":"3e8185a03aa2dfdf","login":"kevinah95","name":"Kevin Hernández Rostrán","avatar_url":"https://avatars-next.observableusercontent.com/f96153a30d564e4372442574fb8e5dc2990136f0ae80b066af521153391d2ebb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fancytree: Tree view / tree grid","cells":[{"id":0,"value":"# Fancytree: Tree view / tree grid ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"> This library is maintained by [Martin Wendt](https://github.com/mar10/fancytree). Thank you Martin and contributors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"md`To import jquery.fancytree into your own notebooks, add a cell with the following code:\n~~~ js\nimport { $ } from '@kevinah95/jquery-fancytree'\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"And don't forget to add the styles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`Glyph style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"selectedSkin.glyphStyle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`To get started, see the [An introduction to Fancytree](https://github.com/mar10/fancytree/wiki) and [Try the live demo](http://wwwendt.de/tech/fancytree/demo).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"### Select skin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"viewof selectedSkin = Inputs.select(skins, {\n value: skins.find(s => s.value === \"awesome4\"),\n format: (d) => d.name,\n label: \"Select skin\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"### Default Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"Add the html ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"$46","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"selectedSkin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"Use jquery fancytree constructor:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"$$(function () {\n // using default options\n $(\"#tree\").fancytree({\n extensions: [\"glyph\"],\n glyph: {\n map: selectedSkin.mapPreset\n },\n });\n\n // get the tree after initialization:\n const tree = $.ui.fancytree.getTree(\"#tree\");\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"Inputs.button(\"Reload\", {value: null, reduce: () => { const tree = $.ui.fancytree.getTree(\"#tree\"); console.log(ajaxTreeProducts); tree.reload(ajaxTreeProducts); }} )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"### Glyph Themes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"#### FontAwesome 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"md`Please select Font Awesome 4 skin and add an extra style for Awesome 4 on your notebook:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"// html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"$$(function () {\n\n $(\"#tree-awesome4\").fancytree({\n source: ajaxTreeProducts,\n extensions: [\"glyph\"],\n glyph: {\n map: selectedSkin.mapPreset\n },\n lazyLoad: function(event, data) {\n data.result = d3.json(\"https://raw.githubusercontent.com/mar10/fancytree/master/demo/ajax-sub2.json\")\n },\n checkbox: true,\n selectMode: 3\n });\n\n // get the tree after initialization:\n const tree = $.ui.fancytree.getTree(\"#tree-awesome4\");\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"#### FontAwesome 5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"md`Please select Font Awesome 5 skin and add an extra style for Awesome 5 on your notebook:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"//html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"$$ = {\n const $ = window.$ = window.jQuery = await require('jquery@3.6.0');\n await require('https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js')\n .then(ui => (window.$))\n await require('https://cdn.jsdelivr.net/npm/jquery.fancytree@2.23.0/dist/jquery.fancytree-all.min.js') \n \n return window.$;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"ajaxTreeProducts = FileAttachment(\"ajax-tree-products.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"ajaxSub2 = FileAttachment(\"ajax-sub2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"