频道导航

AngularJS和jqGrid

2020-02-22 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS和jqGrid，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_0@ 我试图找到一个简单的例子,将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]);
      }
    });
  }
};
});