Javascript AngularJS 中的可编辑 DataGrid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12016566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Editable DataGrid in AngularJS
提问by Anand
Is there any AngularJS module as for DataGrid which provides In-Line Editing? There is one in KendoUI http://demos.kendoui.com/web/grid/editing-inline.html
是否有任何 AngularJS 模块作为 DataGrid 提供内联编辑？KendoUI 中有一个 http://demos.kendoui.com/web/grid/editing-inline.html
Can AngularJS & KendoUI be used together?
AngularJS 和 KendoUI 可以一起使用吗？
采纳答案by timothyswt
回答by Luke
look at this quite generic example, where i loop first through rows and then through columns. then a simple change between a span and an input field. http://jsfiddle.net/3BVMm/3/
看看这个非常通用的例子，我首先遍历行，然后遍历列。然后是跨度和输入字段之间的简单更改。 http://jsfiddle.net/3BVMm/3/
this would enable you to make inline editing with a few lines of code.
这将使您能够使用几行代码进行内联编辑。
BUT: it doesnt work as expected, as there seems to be an bug, which I posted already on angular.
但是：它没有按预期工作，因为似乎存在一个错误，我已经在 angular 上发布了该错误。
回答by R?zvan Flavius Panda
You can also use Smart Table.
您还可以使用智能表。
Example, double click on an item in balance column: http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview
例如，双击余额列中的项目：http: //plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview
label: 'Balance',
map: 'balance',
isEditable: true,
type: 'number',
There is an In-Line editing exampleon the home pageunder Edit cellsection. Cell edit mode is entered with double click.
有一个在在线编辑例如在上主页下编辑单元格部分。双击进入单元格编辑模式。
Github: lorenzofox3 / Smart-Table
Github: lorenzofox3 / Smart-Table
It has features like pagination, sorting, filtering, data formatting, row selection and it also generates a simple table structure which makes it easier to style/customize.
它具有分页、排序、过滤、数据格式化、行选择等功能，它还生成一个简单的表格结构，使其更容易设置样式/自定义。
回答by vitalets
You can also try angular-xeditable.
For tables it has following:
您也可以尝试 angular-xeditable。
对于表，它具有以下内容：
回答by Saber
Kendo is working on AngularJS http://kendo-labs.github.io/angular-kendo/
Kendo 正在研究 AngularJS http://kendo-labs.github.io/angular-kendo/
回答by Ceolter
The grid Angular Gridis able to do inline editing. It is an AngularJS directive, so plugs into your Angular app. Also comes with other standard grid features (selection, filtering etc).
网格Angular Grid能够进行内联编辑。它是一个 AngularJS 指令，因此可以插入到您的 Angular 应用程序中。还带有其他标准网格功能（选择、过滤等）。
The documentation page for editing is here
用于编辑的文档页面在这里
To do editing, set editable to true in the column definition ie:
要进行编辑，请在列定义中将 editable 设置为 true，即：
colDef.editable = true;
By default, the grid manages as a string value. If you want to do custom handling of the cell, eg to convert it into an integer, or to do validation, you provide a newValueHandler onto the column definition ie:
默认情况下，网格作为字符串值进行管理。如果您想对单元格进行自定义处理，例如将其转换为整数，或进行验证，您可以在列定义上提供一个 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;
}
}
回答by Prabin Tp
回答by user5767237
You can make your own using richness of Angular. Perhaps you don't need to look for third party plugins.
您可以使用丰富的 Angular 制作自己的作品。也许您不需要寻找第三方插件。
I have made a basic sample that supports:-
我制作了一个基本示例，支持：-
- Inline Editingof Binded-Data.
- Add new Rowon hitting last Grid-cell.
- 绑定数据的内联编辑。
- 在点击最后一个网格单元格时添加新行。
https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview
https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview
Apply a simple css
应用一个简单的css
.TextBoxAsLabel
{
border: none;
background-color: #fff;
background: transparent;
width:100%;
}
//for Dropdown
.selectable::-ms-expand {
display: none;
}
.selectable{
-webkit-appearance: none;
appearance: none;
}
hope it works, lemme know if any issues.
希望它有效，让我知道是否有任何问题。
回答by Srivathsa Harish Venkataramana
The more recent open source angular grids I can see is ux-angularjs-datagrid, I haven't tried it but demos look promising...
我能看到的最近的开源角度网格是 ux-angularjs-datagrid，我还没有尝试过，但演示看起来很有希望......
