1

私が取り組んでいるクエリツールを持っています。これには、入力された角度のあるフォームがあり、送信されると、AJAX を使用して JSON が返され、それがui-gridにレンダリングされます。JSON 応答は次のようになります。

{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "company", "employed"]
"results": [
    {first_name: "John", last_name: "Smith", company: "Abc Inc", employed: true},
    {first_name: "Johnny", last_name: "Rocket", company: "Abc Inc", employed: true}]
}

私は PHP と angular の両方に取り組んでいるので、必要に応じてこの JSON 応答を完全に制御できます。最初の AJAX 呼び出しからの JSON 応答がレンダリングされた後、同じページで別の別の AJAX 呼び出しを実行して新しいデータ セットを取得すると、問題が発生します。この新しいデータ セットは、どの列もレンダリングしません。元のデータセットにはありませんでした。どの列も同じではない場合、テーブルは基本的にクリアされるため、これは非常に問題があり、この単一ページ アプリの ui-grid に完全に異なるデータをロードする必要があることがよくあります。

JSON が受信されたら、ui-grid がバインドされjsonResult.resultsている古い$scope.myData変数に単純にバインドします。

この問題を分離するプランカーを作成しました。「パンク」列を含むデータセットが読み込まれ、「データの交換」をクリックすると、「パンク」ではなく「従業員」列を含むデータセットが読み込まれます。これまで、$watch を使用して $scope.myData 変数が変更されたときに更新またはリロードするディレクティブを調べ、$scope.columnDefs のようなものを見つけて ui-grid に知らせる方法を調べました。angular と javascript は比較的新しいので、ディレクティブはまだ頭を悩ませています。

4

3 に答える 3

4

私はあなたのプランカーを少し更新しました：

$scope.swapData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data2;
    //punk column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'punk' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to punk
  }
};

http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

json に列があるので、かなり簡単に実行できるはずです。

于 2014-12-09T17:56:07.487 に答える
1

ケビン・セージの答えとプランカーの例の助けを借りて私が見つけたもう1つの部分...後方互換性のある「フィールド」属性を使用している場合、2つのセット間でフィールド名が重複しているとスワッピングが正しく機能しません列の定義。この場合、列ヘッダーと列幅は正しく表示されません。列定義の「名前」属性を使用すると、これが修正されます。

    $scope.swapData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { field:'firstName' },
      { field:'lastName' },
      { field:'company' },
      { field:'employee' }
    ];
    $scope.gridOpts.data = data2;
    //punk column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { field:'firstName' },
      { field:'lastName' },
      { field:'company' },
      { field:'punk' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to punk
  }
};

ここでの例:プランカー

于 2015-01-28T19:07:47.280 に答える
1

私の解決策：

$http.get('url').success(function(res) {
// clear data
gridOptions.data.length = 0;
// update data in next digest 
$timeout(function() {
gridOptions.data = res;
});
});
于 2015-05-29T10:47:21.800 に答える