具有动态列添加、删除和重新排列功能的 MVC Grid

Question

我的 MVC 4 (Razor) 项目需要具有以下功能的网格：

1.通过将 DIV 元素拖放到网格中，将列动态添加到网格中： 最初它将是一个空网格（无列表）。我应该能够将外部 DIV 元素拖放到表中，并且将使用 DIV 元素的文本将一列添加到网格中。例如，我应该能够将带有文本“项目编号”的 DIV 从页面的另一部分拖放到网格中，网格将显示一个新列，其中添加了标题“项目编号”。接下来，当我将另一个带有文本“项目描述”的外部 DIV 拖放到网格中时，一个新的网格列“项目描述”将被添加到前一列的右侧。

2。删除网格列： 我应该能够从网格中删除网格列（例如，通过单击列标题处的 X 图标，或通过其他方式）

3。重新排列网格列： 我应该能够通过将列标题拖放到新位置来重新排列网格列。

我探索了一些第三方网格控件如下：

SyncFusion Essential Grid: 我找不到任何添加和删除列（功能 1 和 2）的内置功能，但它确实提供了列重新排列（功能 3）

DevExpress Grid: 似乎不提供任何功能，但允许在列自定义（字段选择器）中进行简单的拖放操作，就像在 Microsoft Outlook 中一样。

基础设施数据网格： 似乎没有提供开箱即用的 3 个功能中的任何一个

我的问题是，有没有人知道第三方网格控件可以通过最少代码（如果不是开箱即用）提供上述功能吗？或者您认为最好使用纯 HTML 表格和您自己的 jQuery 来实现这一点？我已经尝试过后一种方法，并且能够实现功能 2 和 3，但是我在功能 1 上有点挣扎，我需要能够在用户删除后立即在最后一列的右侧添加一列DIV 表中的任何位置。

有什么建议吗？

Answer 1

我会建议你使用 extjs，它是 JavaScript 应用程序框架。它很容易与所有 Web 应用程序框架链接。但就像 DevExpress 一样，你应该付费使用。

http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/ 在树的末尾进行拖放，在这里您将找到解决所有问题的方法。