{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 树\n",
    "\n",
    "使用Quasar的[QTree](https://quasar.dev/vue-components/tree)组件显示层次数据。\n",
    "\n",
    "如果使用 `ID`，确保它们在整个树中是唯一的。\n",
    "\n",
    "要使用复选框和 `on_tick`，请将 `tick_strategy` 参数设置为 `\"leaf\"`、`\"leaf-filtered\"`或`\"strict\"`。\n",
    "\n",
    "- `nodes`: 节点对象的分层列表\n",
    "- `node_key`: 每个节点对象的属性名，用于存储其唯一id（默认：`\"id\"`）\n",
    "- `label_key`: 每个节点对象的属性名，用于存储其标签（默认：`\"label\"`）\n",
    "- `children_key`: 每个节点对象的属性名，用于存储其子列表（默认：`\"children\"`）\n",
    "- `on_select`: 当节点选择改变时调用的回调函数\n",
    "- `on_expand`: 当节点展开状态改变时调用的回调函数\n",
    "- `on_tick`: 当节点被勾选或取消勾选时调用的回调函数\n",
    "- `tick_strategy`: 是否以及如何使用复选框（`\"leaf\"`、`\"leaf-filtered\"`或`\"strict\"`；默认：`None`）"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.tree.Tree at 0x126fafe8bd0>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.tree([\n",
    "    {'id': 'numbers', 'children': [{'id': '1'}, {'id': '2'}]},\n",
    "    {'id': 'letters', 'children': [{'id': 'A'}, {'id': 'B'}]},\n",
    "], label_key='id', on_select=lambda e: ui.notify(e.value))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 自定义树冠和树干\n",
    "\n",
    "树节点的头部和主体可以使用作用域插槽来插入自定义内容。更多信息请参阅[Quasar文档](https://quasar.dev/vue-components/tree#customize-content)。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.slot.Slot at 0x1268f2fd110>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "tree = ui.tree([\n",
    "    {'id': 'numbers', 'description': 'Just some numbers', 'children': [\n",
    "        {'id': '1', 'description': 'The first number'},\n",
    "        {'id': '2', 'description': 'The second number'},\n",
    "    ]},\n",
    "    {'id': 'letters', 'description': 'Some latin letters', 'children': [\n",
    "        {'id': 'A', 'description': 'The first letter'},\n",
    "        {'id': 'B', 'description': 'The second letter'},\n",
    "    ]},\n",
    "], label_key='id', on_select=lambda e: ui.notify(e.value))\n",
    "\n",
    "tree.add_slot('default-header', '''\n",
    "    <span :props=\"props\">Node <strong>{{ props.node.id }}</strong></span>\n",
    "''')\n",
    "tree.add_slot('default-body', '''\n",
    "    <span :props=\"props\">Description: \"{{ props.node.description }}\"</span>\n",
    "''')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 编程式的展开和折叠\n",
    "\n",
    "整个树或单个节点可以使用 `expand()` 和 `collapse()` 方法进行编程式的展开和折叠。即使节点被禁用（例如，用户无法点击），这也同样适用。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "t = ui.tree([\n",
    "    {'id': 'A', 'children': [{'id': 'A1'}, {'id': 'A2'}], 'disabled': True},\n",
    "    {'id': 'B', 'children': [{'id': 'B1'}, {'id': 'B2'}]},\n",
    "], label_key='id').expand()\n",
    "\n",
    "with ui.row():\n",
    "    ui.button('+ all', on_click=t.expand)\n",
    "    ui.button('- all', on_click=t.collapse)\n",
    "    ui.button('+ A', on_click=lambda: t.expand(['A']))\n",
    "    ui.button('- A', on_click=lambda: t.collapse(['A']))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带有复选框的树\n",
    "\n",
    "通过设置 `\"tick-strategy\"` 属性，树可以与复选框一起使用。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.tree.Tree at 0x1268f305d50>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.tree([\n",
    "    {'id': 'A', 'children': [{'id': 'A1'}, {'id': 'A2'}]},\n",
    "    {'id': 'B', 'children': [{'id': 'B1'}, {'id': 'B2'}]},\n",
    "], label_key='id', tick_strategy='leaf', on_tick=lambda e: ui.notify(e.value))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}