9

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

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

有人可以指出我在 JSFiddle 中的一个简单示例或其他内容吗？谢谢。

4

3 回答 3

17

免责声明：

  1. 我以前从未听说过 jqGrid。

  2. 我没有太多的 jQuery 经验。

  3. 据我所知，它的 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]);
      }
    });
  }
};
});
于 2013-10-31T21:37:35.147 回答
1

我无法发表评论，所以我在这里发布，这是问题的连续性。我也在检查你的 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 来实现单元格/行/导航栏编辑。（通过修改网格内的数据来修改范围数据......如果有人已经有东西......）

于 2014-04-17T10:30:34.780 回答
0

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

于 2016-08-02T20:24:07.147 回答