AngularJS和jqGrid

我试图找到一个简单的例子，将jqGrid与AngularJS的框架（最好是作为承载网格的指令）集成在一起。 SO jqGrid with AngularJS提出了这个问题，但没有完全回答。此时我不想使用另一个第三方库。我希望看到将jqGrid与AngularJS整合在一起的最佳做法，只需使用控制器和mv *风格方法。AngularJS和jqGrid

还有一个由Wintellect https://github.com/Wintellect/Angular-MVC-Cookbook开发的Angular jqGrid食谱，但是它使用$ route对象，在这一点上我并不是疯狂的。我现在不打算建立一个SPA（或许晚些时候）。

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

来源

2013-10-17 Niner

免责声明：

我从来没有听说过的jqGrid之前。
我没有太多jQuery的经验。
从我可以告诉它的API不利于将Angular的数据绑定方式与手动操作进行1对1映射。

这是我想出来的。它是如何包装这一个基本的例子（或任何可能）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-31 21:37:35

jqGrid是一个流行的网格插件 - http://www.trirand.com/blog/。我很伤心，我在这里找不到合适的答案。 – Niner

你是什么意思 - 你检查了普朗克吗？我做了一个最低功能的包装，我认为它足以展示如何扩展它。它不是你需要它的吗？ –

感谢您的更新评论。不知何故，我错过了你的脚本中的jqGrid部分，并且我不太熟悉plunkr看到整个事情。这实际上是我正在寻找的，它将成为我的好榜样。 – Niner

我不能评论，所以我在这里发布，这是问题的连续性.. 我也检查你的GitHub项目luacassus，如果我可以，我会作出贡献。不错的功能，像杰瑞德的话。正如你所说的，还有就是我想用角向wrappe该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); 
      });

但我想摆脱身份证，在这里进入艰难的方式。之后，我会尝试像您一样使用API来实现可能的单元格/行/导航栏编辑。（通过修改网格内的数据修改示波器数据...如果有人已经有东西...）

来源

2014-04-17 10:30:34

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

来源

2016-08-02 20:24:07

AngularJS和jqGrid

回答

相关问题