50

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

AngularJS 和 KendoUI 可以一起使用吗？

4

9 回答 9

45

查看ui-grid

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

于 2012-10-30T06:44:07.747 回答
10

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

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

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

于 2012-09-18T23:37:32.177 回答
9

您还可以使用智能表。

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

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

主页上的Edit cell部分下有一个In-Line 编辑示例。双击进入单元格编辑模式。

Github: lorenzofox3 / Smart-Table

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

于 2013-06-10T08:57:41.753 回答
6

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

于 2013-10-15T12:20:28.817 回答
4

Kendo 正在研究 AngularJS http://kendo-labs.github.io/angular-kendo/

于 2013-05-19T09:30:52.307 回答
4

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

编辑的文档页面在这里

要进行编辑，请在列定义中将 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;
    }
}
于 2015-04-28T22:20:51.567 回答
3

你可以使用ng-table指令来让你的表活跃起来。它支持排序、过滤和分页。在编译期间会自动生成带有标题和过滤器的标题行。

For example

可编辑的演示

于 2013-12-24T04:53:37.720 回答
2

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

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

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

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;
}

希望它有效，让我知道是否有任何问题。

于 2016-01-09T16:00:45.673 回答
1

我能看到的最新开源角网格是 ux-angularjs-datagrid，我没有尝试过，但演示看起来很有希望......

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

于 2014-07-28T13:58:37.620 回答