web-dev-qa-db-ja.com

AngularJSとjqGrid

JqGridをAngularJSのフレームワークと統合する簡単な例を見つけようとしています（できればグリッドをホストするディレクティブとして）。この質問はSO jqGrid with AngularJS ）で提起されましたが、完全には回答されていません。現時点では、別のサードパーティライブラリを使用したくありません。コントローラーとmv *スタイルのアプローチだけでjqGridをAngularJSと統合するベストプラクティスを確認します。

WintellectによるAngular jqGridクックブック https://github.com/Wintellect/Angular-MVC-Cookbook もありますが、私が使用する$ routeオブジェクトを使用します。この時点では夢中ではありません。現在（おそらく後で）SPAを構築しようとはしていません。

誰かがJSFiddleの簡単な例や何かを教えてもらえますか？ありがとう。

angularjsjqgrid
9
Niner

免責事項：

  1. JqGridのことは聞いたことがありません。

  2. JQueryの経験はあまりありません。

  3. 私が言えることから、そのAPIは、これを行うためのAngularのデータバインディング方法と手動操作の1対1のマッピングを助長していません。

これが私が思いついたものです。これは、この（またはおそらく）jQueryプラグインをAngularディレクティブでラップする方法の基本的な例です：

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

ラッピングのヘルプが必要なjqGridAPIの特定の部分がある場合はお知らせください。

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]);
      }
    });
  }
};
});
17
Words Like Jared

コメントできないので、ここに投稿します。質問の継続性です。githubプロジェクトのluacassusもチェックしています。できれば、貢献します。素晴らしい機能、Jaredのような言葉。あなたが言ったように、私が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を使用しようとします。 （グリッド内のデータを変更してスコープデータを変更するには...誰かがすでに何かを持っている場合...）

1
roro_57

私は現在、jQgridのAngularへの完全な置き換えに取り組んでおり、jqGridテーブルなどからのバックエンド応答の例を適応させています...作業は数日しかないので、協力したい場合は大歓迎です！： ngGrid

0
Mijail Dan Cohen