Tree

<sw-tree>

ready
you need to declare the functions createNewElement, getChildrenFromParent in the parent.

Usage

Loading...
<sw-tree
    :searchable="false"
    :disableContextMenu="() => { return true; }"
    :onChangeRoute="() => { return false; }"
    :items="[
        { id: 1, name: 'Example #1', childCount: 4, parentId: null, afterId: null, isDeleted: false },
            { id: 6, name: 'Example #6', childCount: 0, parentId: 1, afterId: null },
            { id: 7, name: 'Example #7', childCount: 0, parentId: 1, afterId: 6 },
            { id: 8, name: 'Example #8', childCount: 0, parentId: 1, afterId: 7 },
            { id: 9, name: 'Example #9', childCount: 0, parentId: 1, afterId: 8 },
        { id: 2, name: 'Example #2', childCount: 0, parentId: null, afterId: 1 },
        { id: 3, name: 'Example #3', childCount: 0, parentId: null, afterId: 2 },
        { id: 4, name: 'Example #4', childCount: 0, parentId: null, afterId: 3 },
        { id: 5, name: 'Example #5', childCount: 0, parentId: null, afterId: 4 },
    ]"
    :sortable="true">
    <template slot="items" slot-scope="{ treeItems, sortable, draggedItem, disableContextMenu, onChangeRoute }">
        <sw-tree-item
            v-for="(item, index) in treeItems"
            :key="item.id"
            :item="item"
            :disableContextMenu="disableContextMenu"
            :onChangeRoute="onChangeRoute"
            :sortable="true"></sw-tree-item>
    </template>
</sw-tree>

Component properties

Property name Type Default
items Array
rootParentId String
parentProperty String parentId
afterIdProperty String afterId
childCountProperty String childCount
searchable Boolean true
activeTreeItemId String
translationContext String sw-tree
onChangeRoute Function
disableContextMenu Boolean false
bindItemsToFolder Boolean false
sortable Boolean true
checkItemsInitial Boolean false

Methods

Method name Parameters
getItems parentId searchTerm
searchItems No parameters
getTreeItems parentId
updateSorting items
startDrag draggedComponent
endDrag No parameters
moveDrag draggedComponent droppedComponent
openTreeById id
findTreeByParentId parentId
findById id
onCreateNewItem name
addSubElement contextItem
addElement contextItem pos
getNewTreeItem elem
deleteElement item
abortCreateElement item
onFinishNameingElement draft event
deleteSelectedElements No parameters
checkItem item
saveItems No parameters
onDeleteElements item
onCloseDeleteModal No parameters
onConfirmDelete No parameters

Imports

  • ./sw-tree.html.twig
  • ./sw-tree.scss

Watcher

  • items
  • activeTreeItemId

Twig blocks

  • sw_tree_search
  • sw_tree_actions_headline
  • sw_tree_slot_items
  • sw_tree_items
  • sw_tree_loader
  • sw_tree_content
  • sw_tree_delete_modal_confirm_delete_text
  • sw_tree_delete_modal_cancel
  • sw_tree_delete_modal_confirm
  • sw_tree_delete_modal_footer
  • sw_tree_delete_modal
  • sw_tree

Slots

  • search
  • headline
  • items