Question

对于提供在线编辑的DataGrid，是否有任何AngularJS模块？ KendoUI中有一个 http://demos.kendoui.com/web/grid/editing-inline.html

AngularJS＆amp; KendoUI可以一起使用吗？

Answer 1

结帐ui-grid

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

Answer 2

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

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

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

Answer 3

您也可以使用智能表。

示例，双击余额列中的项目：http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview

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

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

Github：lorenzofox3 / Smart-Table

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

Answer 4

您也可以尝试使用angular-xeditable 表格如下：

Answer 5

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

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

Answer 7

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

For example

editable demo

Answer 8

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

我制作了一个支持的基本样本： -

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

申请一个简单的CSS

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

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

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

Answer 9

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

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

AngularJS中的可编辑DataGrid

9 个答案: