在 JHipster 中拖放重新排序的列表：推荐啥？

Posted 2023-02-23

【中文标题】在 JHipster 中拖放重新排序的列表：推荐啥？

【英文标题】：Drag/drop reordered lists in JHipster: What's recommended?在 JHipster 中拖放重新排序的列表：推荐什么？

【发布时间】：2020-06-03 04:41:29

【问题描述】：

寻求一些建议/指导。我想在 JHipster 6.7.1 中实现（我认为这是一个非常标准的功能）一个拖放可重新排序的列表。

具体来说，假设您创建了一个自定义的有序对象列表。除了从列表中添加/删除项目外，用户还希望重新排序列表。例如，假设希望将[Epsilon] 按顺序排在第二位（在[Alpha] 之后）：

(before)         (after)
[Alpha]          [Alpha]
[Beta] \---+     [Epsilon]
[Gamma]    |     [Beta]
[Delta]    |     [Gamma]
[Epsilon]--+     [Delta]

只需将[Epsilon] 拖放到[Alpha] 和[Beta] 之间的某个位置，然后放下它。该列表以新的顺序重新呈现。完毕。显然，在后端，代码必须持久化/管理新的索引/排序，但用户体验直观且快速。

拖放可重新排序将允许用户快速将项目拖放到任何所需的顺序中。多年来，我使用简单的 javascript 库多次实现了这种事情。我希望 JHipster 6.7.1 能帮助快速找到一个好的现代解决方案。

Ng-bootstrap 似乎只提供静态工具。 （没有拖放。）

Angular Materials 看起来很完美！！ 在努力让 JHipster 中的东西移动之后，甚至尝试了JHipster Angular Material generator，我惊讶地发现JHipster does not (and may never) support Angular Materials！与 Bootstrap 踩到 Angular Material 的脚趾有关...好的。

然后我尝试使用SortableJS 使用ngx-sortable。没有运气。

我发现了一些对PrimeNG 的引用，它是 JHipster 开发人员的流行工具集。 These Drag/Drop set of directives 看起来很有用，但没有示例显示简单的可重新排序列表（从一个列表拖到另一个列表不是我在说的）。 picklist directives 也不是我想要的。我会继续玩 PrimeNG...

与此同时，我不再独自挣扎，而是向 *** 上的好人寻求一些智慧。

有人在 JHipster 应用程序中实现了简单的拖放列表排序机制吗？ 在 JHipster 中可以使用哪些库/方法？ SortableJS/NGX-SortableJS 对你有用吗？ PrimeNG？还有什么？ 我注意到一个叫做 NG-Dragula... 有没有人在 JHipster 应用程序中尝试过这个？ 我应该使用 Vue、React 还是其他前端（而不是 Angular）？这会给我提供更多的灵活性吗？ 我是不是想多了。并且遗漏了一些明显的东西？

我真的很想尝试使用 JHipster/Angular，但我的开发时间还早，可以接受其他选择...

提前致谢！

【开发环境为：Windows 10 Pro； IntelliJ 2019.3.3；开放JDK 13；节点 12.15.0； npm 6.13.7；梯度 6.1.1； Chrome v80.0.3987.116]

[PS：我很乐意提供更多细节。只要问！]

【问题讨论】：

对于 PrimeNG 与 JHipster 的集成，vicpermir 提供了详细的答案：***.com/a/60085001/7773582

【参考方案1】：

在玩了PrimeNG 之后，我找到了OrderList，它提供了拖放重新排序。它不像Angular Material 版本那么简单优雅。在某些方面，它更加雄心勃勃，也许有点过度设计。有时少即是多，需要做一些工作来“简化”小部件，但到目前为止它是有效的。

非常感谢Jochen Gebsattel 提供指向Jhipster/PrimeNG integration guide 的链接。像魅力一样工作。

之后，我在我的模块中添加了以下内容：

import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  OrderListModule  from 'primeng/orderlist';

...

@NgModule(
  imports: [..., BrowserAnimationsModule, OrderListModule],
  ...
)
export class ...Module 

我在组件中添加了以下内容：

export class ...Component implements OnInit, OnDestroy 
books: string[] = [
                    'Moby Dick',
                    'Brave New World',
                    'Great Expectations',
                    'Wuthering Heights',
                    'King James Bible'
                  ];
lheight: string;

...

  ngOnInit(): void 
    this.lheight = String( 41 * this.books.length ) + 'px';
  

...

  onReorder(): void 
    console.log(this.books); // eslint-disable-line no-console
  

然后我将以下内容添加到组件的模板中：

...

<p-orderList [value]="books" dragdrop="true" (onReorder)="onReorder()" [listStyle]="'height': lheight">
  <ng-template let-book pTemplate="item">
    <div class="ui-helper-clearfix">
      <p>book</p>
    </div>
  </ng-template>
</p-orderList>

...

注意，lheight 属性允许我动态调整列表窗口的大小，以便所有项目始终可见。

PrimegNG 看起来有一些不错的功能。它不是 Angular Material，而是我的老祖父曾经说过的：“如果你得不到你爱的那一个，你最好爱你能得到的那个！”。

【参考方案2】：

从 Sudharaka 的演示项目https://github.com/SudharakaP/JHipsterProtractorDragAndDrop 开始， 我在 Jhipster 6.7.0 项目中实现了@angular/cdk/drag-drop。

我使用了 jHipster 标准生成器，然后使用npm install @angular/cdk@8.2.3 添加了 cdk 库（最后一个模块 9.0.1 不适用于 @angular/core 8.2.14）

在您的模块中导入 DragDropModule：

import DragDropModule from '@angular/cdk/drag-drop'; imports: [ DragDropModule ]

然后您可以使用官方文档中解释的 DragDrop 指令： https://material.angular.io/cdk/drag-drop/overview

【讨论】：

感谢您的建议，毛罗！如果有机会，我会尝试一下，并提供我的经验反馈。