codeaxion/nestifyx

NestifyX 包提供了管理应用中分类或嵌套元素的功能。

v1.0.0 2024-02-24 18:27 UTC

This package is auto-updated.

Last update: 2024-09-25 19:12:02 UTC


README

概述

NestifyX Laravel 包提供了使用递归方法管理分类和操作应用内嵌套元素的功能。

轻松组织您的分类。


特性

  1. 分类树管理:此模块包括分类管理,并具有使用拖放功能更改其位置的能力,您只需包含一个按钮组件即可。

  2. 递归方法:此模块包括各种递归方法,如生成树、获取子/父ID、生成面包屑、在下拉菜单中显示树视图等...

  3. 性能:将在单个查询中完成所有工作。

运行 Js Tree 弹出所需依赖项

AlpineJs、Jquery、Jstree

演示视频

安装

要在您的应用程序中使用 NestifyX 包,请按照以下步骤操作

  1. 安装:通过 Composer 安装 NestifyX 包
  composer require codeaxion/nestifyx
  1. 通过 CDN 添加您的必需依赖项(没有这些依赖项,jstree 将无法工作)
  //only optional if you have already have alpine js and tailwindcss package installed
  <script src="//unpkg.com/alpinejs" defer></script> 
  <script src="https://cdn.tailwindcss.com"></script>

  //jquery in header
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  //jstree scripts and css (add styles in header and scripts in body)
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  1. 运行必要的迁移

将在您的分类表中添加位置列以进行排序

  php artisan migrate;
  1. 集成:包含 Nestify 门面
  use CodeAxion\NestifyX\Facades\NestifyX;

这就完成了,您的设置已就绪

可选

  1. (可选)如果您有不同的表名,请发布配置文件
php artisan vendor:publish --provider="CodeAxion\NestifyX\NestifyXServiceProvider" --tag="config"

  1. (可选)如果您想,请发布迁移
php artisan vendor:publish --provider="CodeAxion\NestifyX\NestifyXServiceProvider" --tag="migrations"

使用方法

添加分类模块滑块

添加此 blade 组件后,单击名为“分类树”的按钮以打开分类模块滑块

  <x-nestifyx::category-tree-alpine />

将普通 Eloquent 集合/数组转换为嵌套树

 use CodeAxion\NestifyX\Facades\NestifyX;

 $categories = Category::orderByRaw('-position DESC')->get();

 $categories = NestifyX::nestTree($categories);

不将其转换为树即可排序子项

  use CodeAxion\NestifyX\Facades\NestifyX;

  $categories = Category::orderByRaw('-position DESC')->get(); //Sort by children with it's position (RECOMMENDED after sorting is done by jstree)
  //OR
  $categories = Category::get() //Sort by only children;

  //will return original database collection 
  $categories = NestifyX::setIndent('|--')->sortChildren($categories); //fetch all categories and subcategories
  //OR
  $categories = NestifyX::setIndent('|--')->sortChildren($categories,5) //Pass different category id if you want their children of (refer to 2nd example)

  // In view
  @foreach($categories as $category)
  <div> {{$category->indent}} {{$category->name}} </div>
  @endforeach

  //Will result
  /** 
  Electronics
  |-- Mobiles
  |-- |-- All Mobiles
  |-- Headphones
  |-- |-- All Headphones
  |-- Gaming
  |-- |-- Gaming Laptops
  |-- |-- Business Laptops
  |-- Laptops
  |-- |-- All Laptops
  |-- |-- Apple Laptops
  |-- |-- Microsoft Laptops
  */

平铺子项(对下拉菜单很有用)

    use CodeAxion\NestifyX\Facades\NestifyX;

    $categories = \App\Models\Category::orderByRaw('-position DESC')->get();

    //fetch all categories and subcategories (CASE 1)
    $categories = NestifyX::setIndent('|--')->listsFlattened($categories); 

    //OR
    //pass different category id if you want their children of (CASE 2)
    $categories = NestifyX::setIndent('|--')->listsFlattened($categories,5);
    //OR
    ////if your column name is different (default will be name)
    $categories = NestifyX::setIndent('|--')->setColumn('title')->listsFlattened($categories); 

    dd($categories);

    //Result (CASE 1):
    /**
      #items: array:7 [▼
        4 => "Electronics"
        5 => "|--Laptops"
        9 => "|--|--All Laptops"
        7 => "|--Mobiles"
        10 => "|--|--All Mobiles"
        8 => "|--Headphones"
        11 => "|--|--All Headphones"
      ]
    */

    //Result (CASE 2):
    /**
      #items: array:7 [▼
        5 => "Laptops"
        9 => "|-- All Laptops"
      ]
    */
  <!-- In view -->
 <select class="border-gray-400" name="" id="">
      @foreach ($categories as $id => $name)
      <option value="{{$id}}"> {{$name}} </option>
      @endforeach
  </select>

为所有分类生成面包屑

    $categories = \App\Models\Category::orderByRaw('-position DESC')->get();
 
    $categories = NestifyX::setIndent(' \ ')->generateBreadCrumbs($categories);

    //will return flattened Result:
    
    array:7 [▼ // routes\web.php:27
      4 => "Electronics"
      5 => "Electronics \ Laptops"
      9 => "Electronics \ Laptops \ All Laptops"
      7 => "Electronics \ Mobiles"
      10 => "Electronics \ Mobiles \ All Mobiles"
      8 => "Electronics \ Headphones"
      11 => "Electronics \ Headphones \ All Headphones"
    ]

生成当前面包屑

    $categories = Category::get();

    $categories = NestifyX::generateCurrentBreadCrumbs($categories,5); //2nd param: child id 

    array:2 [▼ 
      4 => array:2 [▼
        "name" => "Electronics"
        "category" => array:8 [▼
          "id" => 4
          "name" => "Electronics"
          "parent_id" => null
          "created_at" => "2024-02-18T13:37:52.000000Z"
          "updated_at" => "2024-02-22T16:40:00.000000Z"
        ]
      ]
      5 => array:2 [▼
        "name" => "Laptops"
        "category" => array:8 [▼
          "id" => 5
          "name" => "Laptops"
          "parent_id" => 4
          "created_at" => "2024-02-18T13:43:26.000000Z"
          "updated_at" => "2024-02-22T16:40:00.000000Z"
        ]
      ]
    ]
//in view

  <div class="flex gap-2">
      <a href="/"> Home </a> 
      @foreach ($categories as $category)
      <a href="{{route('shop-page',$category['category']['id'])}}"> \ {{$category['name']}} </a>
      @endforeach
  </div>
        

获取子分类的所有父 ID

    $categories = Category::get();
   
    $categories = NestifyX::collectParentIds($categories,11);

获取父分类的所有子 ID

    $categories = Category::get();

    $categories = NestifyX::collectChildIds($categories,4);

即将推出功能

  • 在分类中添加 Nestable2 插件功能
  • 移除 Alpine js 依赖项
  • 添加对 Bootstrap 的支持

欢迎提出新功能建议

变更日志

有关最近更改的更多信息,请参阅变更日志

贡献

有关详细信息,请参阅贡献指南

鸣谢

许可证

MIT 许可证(MIT)。有关更多信息,请参阅许可证文件