web-dev-qa-db-ja.com

AngularJSの編集可能なDataGrid

インライン編集を提供するDataGrid用のAngularJSモジュールはありますか？ KendoUIに1つあります http://demos.kendoui.c​​om/web/grid/editing-inline.html

AngularJSとKendoUIを一緒に使用できますか？

javascriptangularjskendo-ui
50
Sutikshan Dubey

チェックアウト i-grid

テンプレート、仮想化、選択のためのシンプルなデータバインディング、グループ化など.

45
timothyswt

最初に行をループし、次に列をループするこの非常に一般的な例を見てください。次に、スパンと入力フィールド間の単純な変更。 http://jsfiddle.net/3BVMm/3/

これにより、数行のコードでインライン編集を行うことができます。

しかし、バグがあるように思われるので、期待通りに動作しません。これは既に角度で投稿しました。

10
Luke

スマートテーブルを使用することもできます。

例、残高列のアイテムをダブルクリックします： http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview

  label: 'Balance',
  map: 'balance',
  isEditable: true,
  type: 'number',

セルの編集セクションの下の ホームページ にインライン編集の例があります。セル編集モードに入るには、ダブルクリックします。

Github： lorenzofox3/Smart-Table

ページネーション、ソート、フィルタリング、データフォーマット、行選択などの機能があり、スタイル設定/カスタマイズを簡単にするシンプルなテーブル構造も生成します。

9
Răzvan Flavius Panda

Angle-xeditableを試すこともできます。
テーブルの場合、次のとおりです。

6
vitalets

剣道はAngularJSに取り組んでいます http://kendo-labs.github.io/angular-kendo/

4
Saber

グリッド Angular Grid はインライン編集を行うことができます。これはAngularJSディレクティブであるため、Angularアプリにプラグインします。他の標準グリッド機能（選択、フィルタリングなど）も付属しています。

編集用のドキュメントページは here です

編集するには、列定義でeditableをtrueに設定します。つまり：

colDef.editable = true;

デフォルトでは、グリッドは文字列値として管理します。セルを整数に変換したり検証したりするなど、セルのカスタム処理を行う場合は、列定義にnewValueHandlerを提供します。

colDef.newValueHAndler = function(params) {
    var valueAsNumber = parseInt(params.newValue);
    if (isNaN(valueAsNumber)) {
        window.alert("Invalid value " + params.newValue + ", must be a number");
    } else {
        params.data.number = valueAsNumber;
    }
}
4
Ceolter

ng-table ディレクティブを使用して、テーブルを活気づけることができます。ソート、フィルタリング、ページネーションをサポートしています。コンパイル時にタイトルとフィルターを含むヘッダー行が自動的に生成されます。

For example

編集可能なデモ

3
Prabin Tp

Angularの豊富な機能を使用して独自に作成できます。おそらく、サードパーティのプラグインを探す必要はありません。

私は以下をサポートする基本的なサンプルを作成しました-

  1. Binded-DataのインラインEditing。
  2. 最後のグリッドセルを押すと新しい行を追加します。

https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview

シンプルなCSSを適用する

.TextBoxAsLabel
{
   border: none;
   background-color: #fff;
   background: transparent;
    width:100%;
}

//for Dropdown    
.selectable::-ms-expand {   
  display: none; 
}
.selectable{
    -webkit-appearance: none;
    appearance: none;
}

それが機能することを願って、問題があればレンムは知っています。

2
user5767237

もっと最近のオープンソースangularグリッドはux-angularjs-datagridです。まだ試していませんが、デモは有望に見えます...

https://github.com/webux/ux-angularjs-datagrid

1
Srivathsa Harish Venkataramana