AngularJS和jqGrid

我试图找到一个简单的例子,将jqgrid与AngularJS的框架集成(最好作为托管网格的指令).这个问题在07年07月提出,但没有完全回答.此时我不想再使用另一个第三方库.我想看看最好的做法是将jqgrid与AngularJS集成在一起,只需要控制器和mv *风格的方法.

Wintellect https://github.com/Wintellect/Angular-MVC-Cookbook还有一个Angular jqgrid菜谱,但它使用$route对象,我不是在这一点疯狂.我现在不打算建立一个SPA(或许更晚).

有人能指点一个简单的例子吗？谢谢.

免责声明：

>以前我从来没听说过jqgrid.
>我没有太多的jQuery体验.
>从我可以告诉它的API不利于Angular的数据绑定方式与手动操作的1对1映射.

这是我想出来的.这是一个基本的例子,说明如何使用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]);
      }
    });
  }
};
});

原文地址：https://www.jb51.cc/angularjs/140677.html