純粋なフロントエンドテーブルコントロールSpreadJS-簡単なデータバインディング

 

SpreadJSv14.0公式バージョンのダウンロード

1.SpreadJSデータバインディングの概要

序文

SpreadJSは 、純粋なフロントエンドExcelテーブルコントロールとして、Excelと非常によく似た機能を備えていますが、Excelにはない独自の機能も多数備えています。その中で、データバインディングはSpreadJSの最も一般的に使用される関数の1つです。

以下では、SpreadJSデータバインディングの原理、実装、操作、および拡張アプリケーションについて詳しく説明します。

SpreadJSデータバインディングの原則

SpreadJSは純粋なフロントエンドコントロールであり、バックエンド構造が含まれていないため、データベースのバインドを直接完了することはできません。SpreadJS自体にバインドされたデータソースは、ユーザーからフロントエンドに渡されるjson形式のデータソースであり、バックエンドのビジネスロジックユーザーはそれを自分で処理できます。

これの利点は、フロントエンドとバックエンドの結合と分離が少ないことです。サーバー側はビジネスロジックの処理を専門とし、フロントエンドはページ表示機能のみを担当します。安全性と標準化の両方が、一般的な開発習慣に沿っています。

SpreadJSのデータバインディングプロセスでは、デザイナまたはコードを介して、SpreadJSでデータソースDataSourceとの1対1のマッピング関係を確立する必要があります。

SpreadJSデータバインディングは、ワークシート（シート）に基づくバインディングです。シートは1つのデータソースにのみバインドできますが、複数のシートを同じデータソースにバインドできます。

マッピング関係を設定した後、対応するインターフェイスを介してフロントエンドが受信したデータソースにデータを入力すると、SpreadJSは、マッピング関係に従って、関連するデータを対応する場所に自動的に表示します。

SpreadJSデータバインディング自体は双方向バインディングです。名前が示すように、ユーザーがビューのコンテンツを更新すると（バインドされたアイテムのコンテンツはページの関連するセルにあります）、データソースも同期的に変更されます。このメカニズムを使用すると、ページ上でユーザーが更新したデータをより簡単に取得できます。

SpreadJSの代表的な使用シナリオの1つであるオンラインレポートは、SpreadJSのデータバインディングモードをうまく利用しており、ユーザーから報告されたデータを双方向バインディングでリアルタイムに取得して保存します。

SpreadJSデータバインディングメソッド

SpreadJSは、フォームバインディング、セルバインディング、およびテーブルバインディングの3つのデータバインディングメソッドを提供します。

細胞結合

文字通り、セル結合とは、データソース内のフィールドをセルを介して結合することを意味します。この方法は、一部のファイリングドキュメントでより一般的です。

フォームバインディングとフォームバインディング

フォームバインディングとフォームバインディングを文字通り混同するのは簡単ですが、両者の違いは次の点に分けられます。

1. バインディング領域：フォームバインディング領域は、Excelのシート、つまりワークシートを参照します。

フォームのバインドとは、データソースをフォーム全体にバインドすることです。フォームにバインドされたデータソースの行数によって、シートがバインドされた後の最初の行数が決まります。シートの新しい行または縮小された行ごとに、データソースは次のようになります。変化する。

テーブルバインディング領域は、シートで作成されたテーブルを参照します。

テーブルバインディングは、データソースをSheetによって作成されたテーブルにバインドします。データソースの行数によって、バインドが完了した後のテーブルの初期行数が決まります。テーブルの行数を変更するだけで、シート全体ではなく、変更するデータソース。

2. データソース形式：

記事の前半で説明したように、シートはデータバインディングで1つのデータソースにのみバインドできるため、フォームにバインドされたデータソースの各フィールドはフォームの特定の列に対応します。したがって、データソースは次のようなJSON配列です。

 

var dataSource = [ 
{ID：0、名前： 'A'、Info1： 'Info0'}、
{ID：1、名前： 'B'、Info1： 'Info1'}、
{ID：2、名前： 'C' 、Info1： 'Info2'}、
];

 

テーブルのバインド。シートには複数のテーブルが存在する可能性があるため、各テーブルはデータソースのフィールドにバインドできます。したがって、対応するデータソースはJSONオブジェクトであり、オブジェクトの各フィールドはJSON配列になります。各フィールド次のように、テーブルにバインドされます。

 

var dataSource = { 
table1：[ 
{orderDate： '1/6/2013'、item： 'Pencil'、units：95、cost：1.99}、
{orderDate： '4/1/2013'、item： 'Binder'、ユニット：60、コスト：4.99}、
{orderDate： '6/8/2013'、アイテム： 'ペンセット'、ユニット：16、コスト：15.99} 
]、
table2：[ 
{orderDate： '1/6/2013' 、アイテム： '鉛筆'、ユニット：95、コスト：1.99}、
{orderDate： '2013年4月1日'、アイテム： 'バインダー'、ユニット：60、コスト：4.99}、
{orderDate： ' 6/8 / 2013 '、アイテム：'ペンセット '、ユニット：16、コスト：15.99} 
] 
};

 

上記は、SpreadJSデータバインディングの原則と3つのバインディング方法です。

2、SpreadJSフォームバインディング操作

序文

最初のセクションでは、データバインディングの概要を説明し、2番目のセクションでは、SpreadJSデータバインディングを完了する方法に焦点を当てます。ここでは、最初にフォームレベルのバインディング操作を実行する方法を紹介します。

使用前に知っておく

1. フォームバインディングを他の2つのバインディングと混合することはできません。

   シート全体にバインドされるフォームバインドは、セルまたはテーブルに基づいてバインドすることはできません。

2. フォームバインディングはデザイナで設定できず、コードを介してのみ設定できます。

   Spread Designerで設定できるのは、テーブルバインディングとセルバインディングのみです。

詳細な操作

SpreadJSのフォームバインディングは、フロントエンドで取得したデータソースデータソースをフォーム全体にバインドします。データソースは2次元のテーブル構造であるため、データソースの各フィールドは列でバインドされます。ここでautoGenerateColumnsを設定すると、バインドされた列を自動的に生成するかどうかを制御できます。以下では、自動生成と手動生成の2つの方法で詳細を紹介します。

バインドされた列を自動的に生成する

autoGenerateColumnsがtrueに設定されている場合、これはバインドされた列を自動的に生成するためのモードです。

まず、フロントエンドが受信するデータソースは次の構造であると想定します（データソースは、一般的に使用されるajax、getjsonなどの任意の方法で取得できます）。

 

var dataSource = [ 
{ID：0、名前： 'A'、Info1： 'Info0'}、
{ID：1、名前： 'B'、Info1： 'Info1'}、
{ID：2、名前： 'C' 、Info1： 'Info2'}、
];

 

バインドする必要のあるワークシートオブジェクトを取得し、シートとして宣言します。次に、このコードを使用して、バインドされた列モードを自動的に生成するようにバインドモードを設定します。

 

sheet.autoGenerateColumns = true;

 

次に、setDataSourceメソッドを使用してデータソースを設定し、それをシートオブジェクトに渡します。

 

sheet.setDataSource（dataSource）;

 

上記のコードを実行すると、ページに次のコンテンツが表示されます。

上の図からわかるように、列ヘッダーは、データソース内の対応するフィールドの名前として自動的に定義されます。列ヘッダーは、バインドされたフィールドに応じて変化します。これは、フォームバインディングの重要な機能の1つでもあります。

フォームに入力して編集した後、この時点でgetDataSourceメソッドを使用してデータソースオブジェクトを取得できます。たとえば、上記のページに入力して編集した後は、次のようになります。

SpreadJS |ダウンロードトライアル

純粋なフロントエンドテーブルコントロールSpreadJSは、Web Excelコンポーネント開発、データ入力、オンラインドキュメント、グラフ式のリンク、.NET、Java、AppなどのアプリケーションでのExcelのようなUIデザインなどのビジネスシナリオに対応できます。データの視覚化とExcelでのエクスポート、数式参照、データバインディング、フレームワークの統合には、多くのコード開発とテストが必要ないため、企業のR＆Dコストとプロジェクト提供のリスクが大幅に削減されます。

以下に示すように、sheet.getDataSource（）を介してデータソースオブジェクトを取得する場合：

この記事はから再生されたブドウ市

 

1.SpreadJSデータバインディングの概要

序文

SpreadJSは 、純粋なフロントエンドExcelテーブルコントロールとして、Excelと非常によく似た機能を備えていますが、Excelにはない独自の機能も多数備えています。その中で、データバインディングはSpreadJSの最も一般的に使用される関数の1つです。

以下では、SpreadJSデータバインディングの原理、実装、操作、および拡張アプリケーションについて詳しく説明します。

SpreadJSデータバインディングの原則

SpreadJSは純粋なフロントエンドコントロールであり、バックエンド構造が含まれていないため、データベースのバインドを直接完了することはできません。SpreadJS自体にバインドされたデータソースは、ユーザーからフロントエンドに渡されるjson形式のデータソースであり、バックエンドのビジネスロジックユーザーはそれを自分で処理できます。

これの利点は、フロントエンドとバックエンドの結合と分離が少ないことです。サーバー側はビジネスロジックの処理を専門とし、フロントエンドはページ表示機能のみを担当します。安全性と標準化の両方が、一般的な開発習慣に沿っています。

SpreadJSのデータバインディングプロセスでは、デザイナまたはコードを介して、SpreadJSでデータソースDataSourceとの1対1のマッピング関係を確立する必要があります。

SpreadJSデータバインディングは、ワークシート（シート）に基づくバインディングです。シートは1つのデータソースにのみバインドできますが、複数のシートを同じデータソースにバインドできます。

マッピング関係を設定した後、対応するインターフェイスを介してフロントエンドが受信したデータソースにデータを入力すると、SpreadJSは、マッピング関係に従って、関連するデータを対応する場所に自動的に表示します。

SpreadJSデータバインディング自体は双方向バインディングです。名前が示すように、ユーザーがビューのコンテンツを更新すると（バインドされたアイテムのコンテンツはページの関連するセルにあります）、データソースも同期的に変更されます。このメカニズムを使用すると、ページ上でユーザーが更新したデータをより簡単に取得できます。

SpreadJSの代表的な使用シナリオの1つであるオンラインレポートは、SpreadJSのデータバインディングモードをうまく利用しており、ユーザーから報告されたデータを双方向バインディングでリアルタイムに取得して保存します。

SpreadJSデータバインディングメソッド

SpreadJSは、フォームバインディング、セルバインディング、およびテーブルバインディングの3つのデータバインディングメソッドを提供します。

細胞結合

文字通り、セル結合とは、データソース内のフィールドをセルを介して結合することを意味します。この方法は、一部のファイリングドキュメントでより一般的です。

フォームバインディングとフォームバインディング

フォームバインディングとフォームバインディングを文字通り混同するのは簡単ですが、両者の違いは次の点に分けられます。

1. バインディング領域：フォームバインディング領域は、Excelのシート、つまりワークシートを参照します。

フォームのバインドとは、データソースをフォーム全体にバインドすることです。フォームにバインドされたデータソースの行数によって、シートがバインドされた後の最初の行数が決まります。シートの新しい行または縮小された行ごとに、データソースは次のようになります。変化する。

テーブルバインディング領域は、シートで作成されたテーブルを参照します。

テーブルバインディングは、データソースをSheetによって作成されたテーブルにバインドします。データソースの行数によって、バインドが完了した後のテーブルの初期行数が決まります。テーブルの行数を変更するだけで、シート全体ではなく、変更するデータソース。

2. データソース形式：

記事の前半で説明したように、シートはデータバインディングで1つのデータソースにのみバインドできるため、フォームにバインドされたデータソースの各フィールドはフォームの特定の列に対応します。したがって、データソースは次のようなJSON配列です。

 

var dataSource = [ 
{ID：0、名前： 'A'、Info1： 'Info0'}、
{ID：1、名前： 'B'、Info1： 'Info1'}、
{ID：2、名前： 'C' 、Info1： 'Info2'}、
];

 

テーブルのバインド。シートには複数のテーブルが存在する可能性があるため、各テーブルはデータソースのフィールドにバインドできます。したがって、対応するデータソースはJSONオブジェクトであり、オブジェクトの各フィールドはJSON配列になります。各フィールド次のように、テーブルにバインドされます。

 

var dataSource = { 
table1：[ 
{orderDate： '1/6/2013'、item： 'Pencil'、units：95、cost：1.99}、
{orderDate： '4/1/2013'、item： 'Binder'、ユニット：60、コスト：4.99}、
{orderDate： '6/8/2013'、アイテム： 'ペンセット'、ユニット：16、コスト：15.99} 
]、
table2：[ 
{orderDate： '1/6/2013' 、アイテム： '鉛筆'、ユニット：95、コスト：1.99}、
{orderDate： '2013年4月1日'、アイテム： 'バインダー'、ユニット：60、コスト：4.99}、
{orderDate： ' 6/8 / 2013 '、アイテム：'ペンセット '、ユニット：16、コスト：15.99} 
] 
};

 

上記は、SpreadJSデータバインディングの原則と3つのバインディング方法です。

2、SpreadJSフォームバインディング操作

序文

最初のセクションでは、データバインディングの概要を説明し、2番目のセクションでは、SpreadJSデータバインディングを完了する方法に焦点を当てます。ここでは、最初にフォームレベルのバインディング操作を実行する方法を紹介します。

使用前に知っておく

1. フォームバインディングを他の2つのバインディングと混合することはできません。

   シート全体にバインドされるフォームバインドは、セルまたはテーブルに基づいてバインドすることはできません。

2. フォームバインディングはデザイナで設定できず、コードを介してのみ設定できます。

   Spread Designerで設定できるのは、テーブルバインディングとセルバインディングのみです。

詳細な操作

SpreadJSのフォームバインディングは、フロントエンドで取得したデータソースデータソースをフォーム全体にバインドします。データソースは2次元のテーブル構造であるため、データソースの各フィールドは列でバインドされます。ここでautoGenerateColumnsを設定すると、バインドされた列を自動的に生成するかどうかを制御できます。以下では、自動生成と手動生成の2つの方法で詳細を紹介します。

バインドされた列を自動的に生成する

autoGenerateColumnsがtrueに設定されている場合、これはバインドされた列を自動的に生成するためのモードです。

まず、フロントエンドが受信するデータソースは次の構造であると想定します（データソースは、一般的に使用されるajax、getjsonなどの任意の方法で取得できます）。

 

var dataSource = [ 
{ID：0、名前： 'A'、Info1： 'Info0'}、
{ID：1、名前： 'B'、Info1： 'Info1'}、
{ID：2、名前： 'C' 、Info1： 'Info2'}、
];

 

バインドする必要のあるワークシートオブジェクトを取得し、シートとして宣言します。次に、このコードを使用して、バインドされた列モードを自動的に生成するようにバインドモードを設定します。

 

sheet.autoGenerateColumns = true;

 

次に、setDataSourceメソッドを使用してデータソースを設定し、それをシートオブジェクトに渡します。

 

sheet.setDataSource（dataSource）;

 

上記のコードを実行すると、ページに次のコンテンツが表示されます。

上の図からわかるように、列ヘッダーは、データソース内の対応するフィールドの名前として自動的に定義されます。列ヘッダーは、バインドされたフィールドに応じて変化します。これは、フォームバインディングの重要な機能の1つでもあります。

フォームに入力して編集した後、この時点でgetDataSourceメソッドを使用してデータソースオブジェクトを取得できます。たとえば、上記のページに入力して編集した後は、次のようになります。

SpreadJS |ダウンロードトライアル

純粋なフロントエンドテーブルコントロールSpreadJSは、Web Excelコンポーネント開発、データ入力、オンラインドキュメント、グラフ式のリンク、.NET、Java、AppなどのアプリケーションでのExcelのようなUIデザインなどのビジネスシナリオに対応できます。データの視覚化とExcelでのエクスポート、数式参照、データバインディング、フレームワークの統合には、多くのコード開発とテストが必要ないため、企業のR＆Dコストとプロジェクト提供のリスクが大幅に削減されます。

以下に示すように、sheet.getDataSource（）を介してデータソースオブジェクトを取得する場合：

この記事はから再生されたブドウ市