logo标签列表

AngularJS中可编辑的数据网格

javascriptangularjskendo-ui
50
请看这里的答案： https://dev59.com/CGbWa4cB1Zd3GeqPZbTU#11892676 - ganaraj
你好Ganaraj，你知道有没有人在使用AngularJS和SlickGrid吗？任何指针都会有所帮助，我正在寻找一个包装SlickGrid的指令。 - Anand
你尝试过自己编写一个指令吗？这其实并不难。如果你按照我的Kendo UI Grid示例进行，并进行比较，应该会很容易上手。同时也可以帮助你开始编写适用于SlickGrid的指令。 - ganaraj
为什么你会同时使用Kendo和Angular？我以前不了解Kendo，看起来很酷。 - Mauro
哎呀，但是……Kendo不是免费的吗？ - Mauro
显示剩余2条评论
9个回答
45

查看 ui-grid

使用模板、虚拟化、简单的数据绑定来进行选择、分组等操作。

5
不要使用ng-grid。在目前的状态下，它太容易出现错误和运行缓慢，并且存在许多问题，第三个版本也还没有准备好使用。 - iLemming
1
@Agzam 有什么替代方案吗？商业方案：KendoUI？ - Juri
1
@Jury，老实说，我对这个问题没有明确的答案。我尝试过所有不同的网格小部件，但它们从未完全满足我的需求。我最大的必要条件是在网格中拥有大量行的平稳滚动。我甚至发布了这篇长文 https://dev59.com/7F8e5IYBdhLWcg3whqg4 ，仍在等待某个人来回答它。就目前而言，为了满足我的需求，我选择了ux-angularjs-datagrid。虽然它不是一个完整的网格小部件，你需要实现许多东西，如可调整大小，可拖动列等等。但它非常快速。 - iLemming
另一种选择是使用trNgGrid：http://moonstorm.github.io/trNgGrid/release/index.html - Arne H. Bitubekk
10

看一下这个相当通用的示例，在这个示例中我们首先通过行循环，然后再通过列循环。

然后只需在 <span> 和输入框之间进行简单的更改即可。

http://jsfiddle.net/3BVMm/3/

这样可以让您用几行代码实现内联编辑。

但是：由于存在一个错误，它并不能如预期那样工作，我已经在 Angular 上发布了这个问题。

这个漏洞仍然存在。如果您在任何字段中输入，它会立即退出。 - Adam Arold
9
你也可以使用智能表格。
例如，在余额列中双击一个项目：http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview 
  label: 'Balance',
  map: 'balance',
  isEditable: true,
  type: 'number',

在主页的编辑单元格部分有一个行内编辑示例。双击进入单元格编辑模式。它具有分页、排序、过滤、数据格式化、行选择等功能，并且还生成简单的表格结构，使其更容易进行样式/定制。

Github: lorenzofox3 / Smart-Table
1
对于未来的访问者，我相信开发者已经从Smart-Table中删除了编辑功能，因为该部分不再存在。 - KreepN
1
确实是这样，因为它已经不再相关了。现在，smart-table采用声明性方法，您可以使用主控制器API来扩展它，以进行表格特定操作。内联编辑不是表格特定的，但您可以在表格中使用任何编辑指令，而无需额外工作！ - laurent
任何示例都很好，例如最喜欢智能表格。 - MR.ABC
1
@MR.ABC：添加了一个 Plunker 示例的链接，展示了它的使用方法。 - Răzvan Flavius Panda
接下来的问题是什么时候保存这些内容...（这不再是一种声明性的方法吗？） - MR.ABC
我还没有使用过它。我建议查看源代码（也许是测试https://github.com/lorenzofox3/Smart-Table/tree/master/test/spec）和问题，如果找不到所需内容，请开启一个新问题。 - Răzvan Flavius Panda
6
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;
    }
}
你应该扩展并改进你的回答。 - Jose Ricardo Bustos M.
4
嗯，每个开发者的起价为999美元。 - John Henckel
@JohnHenckel 你说得对，我写这个答案的时候是免费的！ - Saber
3
你可以使用ng-table指令来使你的表格更加生动。它支持排序、过滤和分页。标题行和带有筛选器的行在编译期间会自动生成。请参考ng-table示例。
For example

可编辑演示

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

希望它能够正常工作，如果有任何问题，请告诉我。
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接