AngularJS 中的可编辑数据网格答案

【问题标题】：Editable DataGrid in AngularJSAngularJS 中的可编辑数据网格
【发布时间】：2012-08-14 12:54:54
【问题描述】：

是否有任何 AngularJS 模块与 DataGrid 一样提供内联编辑？ KendoUI中有一个 http://demos.kendoui.com/web/grid/editing-inline.html

AngularJS 和 KendoUI 可以一起使用吗？

【问题讨论】：

在这里查看这个答案stackoverflow.com/a/11892676/1057639
谢谢 Ganaraj。根据您对 AngularJS 的经验，编写可编辑的数据网格小部件（与 Kendo UI 内联编辑数据网格一样好）有多难，我们正在考虑将 Silverlight 应用程序移植到 AngularJS，您认为 AngularJS 有多成熟是正确的现在。
我认为 Angular 已经相当成熟了。使用 Angular 创建可编辑的数据网格小部件应该是任何对 Angular 有一定了解（可能有点高级！）的人都可以完成的任务。
嗨 Ganaraj 你知道有人使用 AngularJS 和 SlickGrid 吗？任何指针都会有所帮助，我正在寻找包装 slickgrid 的指令
您是否尝试过自己编写指令？这并不难。如果您浏览我的 kendo-ui 网格示例并继续比较它是如何完成的，那么它应该非常简单。也应该能够帮助您开始为 SlickGrid 编写指令。

标签： javascript angularjs kendo-ui

【解决方案1】：

查看ui-grid

模板化、虚拟化、用于选择的简单数据绑定、分组等......

【讨论】：

远离 ng-grid。在当前状态下，bug 太多、速度太慢并且存在大量问题，而且版本 3 还不能使用。
@Agzam 有哪些替代方案？广告：KendoUI？
@Jury，老实说，我对这个问题没有明确的答案。我尝试过的所有不同的网格小部件都没有让我完全满意。我最大的需要是在网格中使用大量行进行平滑滚动。我什至发布了这个很长的问题stackoverflow.com/questions/25676574/… 并仍在等待有人回答。目前，出于我自己的需要，我选择了 ux-angularjs-datagrid。虽然它不是成熟的网格小部件，但您必须实现许多东西 - 例如可调整大小、可拖动的列等。但它的速度非常快
另一种方法是使用 trNgGrid：moonstorm.github.io/trNgGrid/release/index.html

【解决方案2】：

看看这个非常通用的例子，我首先循环遍历行然后遍历列。然后是跨度和输入字段之间的简单更改。 http://jsfiddle.net/3BVMm/3/

这将使您能够使用几行代码进行内联编辑。

但是：它没有按预期工作，因为似乎有一个错误，我已经在 angular 上发布了。

【讨论】：

bug 仍然存在。如果您在任何字段中输入，它会立即退出。

【解决方案3】：

您也可以使用智能表。

例如，双击余额栏中的一个项目：http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview

  label: 'Balance',
  map: 'balance',
  isEditable: true,
  type: 'number',

编辑单元格部分下的home page 上有一个内嵌编辑示例。双击进入单元格编辑模式。

Github：lorenzofox3 / Smart-Table

它具有分页、排序、过滤、数据格式化、行选择等功能，还可以生成简单的表格结构，使其更易于样式/自定义。

【讨论】：

对于未来的访问者，我相信开发人员已从 Smart-Table 中删除了编辑，因为该部分不再存在。
确实如此，因为不再相关。现在 smart-table 遵循声明式方法，您可以根据需要使用主控制器 API 扩展它以进行特定于表的操作。内联编辑不是特定于表格的，但您可以在表格中使用您想要的任何编辑指令，而无需额外的工作！
任何例子都会很棒。最喜欢智能桌子。
@MR.ABC：添加了一个指向如何使用它的 plunker 示例的链接。
接下来是什么时候保存这些的问题......（它不再是声明性的了吗？）

【解决方案4】：

您也可以尝试 angular-xeditable。
对于表格，它有以下内容：

【讨论】：

【解决方案5】：

Kendo 正在开发 AngularJS http://kendo-labs.github.io/angular-kendo/

【讨论】：

嗯，每位开发者的起价为 999 美元
@JohnHenckel 你是对的，我写这个答案的时候是免费的！

【解决方案6】：

网格Angular Grid 能够进行内联编辑。它是一个 AngularJS 指令，因此插入到您的 Angular 应用程序中。还带有其他标准网格功能（选择、过滤等）。

编辑的文档页面是here

要进行编辑，请在列定义中将 editable 设置为 true，即：

colDef.editable = true;

默认情况下，网格作为字符串值进行管理。如果您想对单元格进行自定义处理，例如将其转换为整数或进行验证，您可以在列定义上提供一个 newValueHandler，即：

colDef.newValueHAndler = function(params) {
    var valueAsNumber = parseInt(params.newValue);
    if (isNaN(valueAsNumber)) {
        window.alert("Invalid value " + params.newValue + ", must be a number");
    } else {
        params.data.number = valueAsNumber;
    }
}

【讨论】：

你应该扩展和改进你的答案

【解决方案7】：

您可以使用ng-table 指令来激活您的表格。它支持排序、过滤和分页。带有标题和过滤器的标题行在编译过程中自动生成。

For example

editable demo

【讨论】：

【解决方案8】：

您可以使用 Angular 的丰富性制作自己的作品。也许您不需要寻找第三方插件。

我制作了一个基本示例，支持：-

绑定数据的内联编辑。
在点击最后一个网格单元时添加新行。

https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview

应用一个简单的 css

.TextBoxAsLabel
{
   border: none;
   background-color: #fff;
   background: transparent;
    width:100%;
}

//for Dropdown    
.selectable::-ms-expand {   
  display: none; 
}
.selectable{
    -webkit-appearance: none;
    appearance: none;
}

希望它有效，如果有任何问题，请告诉我。

【讨论】：

【解决方案9】：

最近能看到的开源角网格是ux-angularjs-datagrid，没试过但是demo看起来很有希望……

https://github.com/webux/ux-angularjs-datagrid

【讨论】：