AngularJS 和 jqGrid答案

【问题标题】：AngularJS and jqGridAngularJS 和 jqGrid
【发布时间】：2013-10-17 17:45:11
【问题描述】：

我正在尝试找到一个将 jqGrid 与 AngularJS 框架集成的简单示例（最好作为托管网格的指令）。这个问题在 SO jqGrid with AngularJS 中提出，但没有得到完全回答。在这一点上，我不希望使用另一个 3rd 方库。我希望看到仅使用控制器和 mv* 样式方法将 jqGrid 与 AngularJS 集成的最佳实践。

还有一个由 Wintellect https://github.com/Wintellect/Angular-MVC-Cookbook 编写的 Angular jqGrid 食谱，但它使用了 $route 对象，我现在对此并不感兴趣。我现在不打算建立一个 SPA（也许以后）。

有人可以指点我一个简单的例子或JSFiddle中的东西吗？谢谢。

【问题讨论】：

标签： angularjs jqgrid

【解决方案1】：

免责声明：

我以前从未听说过 jqGrid。
我没有太多 jQuery 经验。
据我所知，它的 API 不利于 Angular 的数据绑定方式与手动操作的一对一映射。

这就是我想出的。这是一个基本示例，说明如何使用 Angular 指令包装这个（或任何可能的）jQuery 插件：

http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=preview

如果您需要帮助包装 jqGrid API 的特定部分，请告诉我。

var myApp = angular.module('myApp', []);

myApp.directive('ngJqGrid', function () {
return {
  restrict: 'E',
  scope: {
    config: '=',
    data: '=',
  },
  link: function (scope, element, attrs) {
    var table;

    scope.$watch('config', function (newValue) {
      element.children().empty();
      table = angular.element('<table></table>');
      element.append(table);
      $(table).jqGrid(newValue);
    });

    scope.$watch('data', function (newValue, oldValue) {
      var i;
      for (i = oldValue.length - 1; i >= 0; i--) {
        $(table).jqGrid('delRowData', i);
      }
      for (i = 0; i < newValue.length; i++) {
        $(table).jqGrid('addRowData', i, newValue[i]);
      }
    });
  }
};
});

【讨论】：

jqGrid 是一个流行的网格插件 - trirand.com/blog。很遗憾在这里找不到合适的答案。
你是什么意思 - 你检查了 plunkr 吗？我制作了一个功能最少的包装器，我认为它足以展示如何扩展它。你需要它做什么不做什么？
感谢您更新评论。不知何故，我错过了您在脚本中的 jqGrid 部分，而且我对 plunkr 不是很熟悉，无法看到整个内容。这实际上是我一直在寻找的，它将成为我的一个很好的模型。
出色的代码...非常感谢分享。我只需要在 "scope.$watch('data') 函数中做一个小改动，以检查 oldValue 是否为空，否则 'oldValue.length' 会引发异常。此函数中的 newValue 也是如此。啊，很好让 jqGrid 回来！！

【解决方案2】：

我无法评论，所以我在这里发布，这是问题的连续性.. 我也在检查你的 github 项目 luacassus，如果可以的话，我会为它做出贡献。不错的功能，像贾里德这样的词。正如你所说，我想用 Angular 包装 API 的另一部分，它是“寻呼机”，我是这样管理的：

$scope.config = {
    ...
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    ...
};

指令中的这个：

link: function(scope,element,attrs){
            var table;
            scope.$watch('config', function (newValue) {
                element.children().empty();
                table = angular.element('<table id=\'grid2\'></table>');
                pager = angular.element('<div id=\'pager2\' ></div>');
                element.append(table);
                element.append(pager);
                $(table).jqGrid(newValue);
            });

但是我想摆脱这个ID，在这里进入了艰难的道路。之后，我将尝试像您一样使用 API 来实现单元格/行/导航栏编辑。（通过修改网格内的数据来修改范围数据......如果有人已经有东西......）

【讨论】：

【解决方案3】：

我目前正在努力将 jQgrid 完全替换为 Angular，我正在调整来自 jqGrid 表等的后端响应示例......它只有几天的工作，所以如果你想合作，欢迎你这样做！： ngGrid

【讨论】：