Droptablesのドキュメント

 

前書き

DroptablesはJoomlaのHTMLテーブルをインターフェースのようなスプレッドシートで管理するために使われるJoomlaの拡張です。

Droptablesテーブル拡張

主な特徴:

  • スプレッドシートのようにテーブルを管理する
  • 6テーマが含まれています
  • あらゆる編集者から完全に管理
  • ExcelとGoogleスプレッドシートの同期
  • AJAX自動保存
  • フロントエンド上のソート可能なデータ
  • セル、行、列スタイルエディタ
  • ドラッグ&ドロップでセルをコピー
  • ワンクリックでテーブル全体をコピーする
  • HTMLセルフォーマット
  • 高度なCSSコードエディタ

 

I. DROPTABLESのインストール

1.1インストール

私たちのコンポーネントはJoomla 3.x互換です。 すべての機能とサードパーティの統合はすべてのメンバーシップに含まれています。
私たちのコンポーネントをインストールするには、拡張子.zipファイルをダウンロードして、標準のJoomlaインストーラを使わなければなりません。

joomla-install

 

それからBrowse> Upload and Installボタンをクリックすると、コンポーネント、モジュール、プラグインがデフォルトで有効になってインストールされます。

 

1.2更新と自動更新

拡張子を更新するには、JoomUnitedからZIPファイルをダウンロードするか、古いバージョンの上に新しいバージョンをインストールします。 自動アップデータを使う (推奨)

削除可能な更新

更新通知をプッシュする自動アップデータは、インストールしたJoomla拡張機能に組み込まれています。 そのため、ダッシュボードの他の拡張子やメニューを使用して通知を受け取ることができます。 「拡張機能」>「管理」>「更新」メニュー

アカウントにログインして更新する

JoomUnited Joomla拡張機能をすべて更新するには、JoomUnitedアカウントにログインする必要があります。 ログインアクセスするには、コンポーネントのメイン設定にアクセスしてください。 ライブアップデートタブ。 一番下には、ログインボタンがあります。

ライブアップデート

 

あなたのJoomUnited認証情報を入力してください、あなたがここにログインするのに使用するのと同じ@ www.joomunited.com

ログイン統合

 

ボタンがオレンジ色に変わります、おめでとうございます。 これで、このWebサイト上のすべてのJoomUnited拡張機能を更新することができます。 会員の有効期限が切れている場合は、更新リンクとそれを説明するテキストが表示されます。

アカウントにリンク

注:1回のログインで、JoomUnitedのすべての拡張機能を更新できます(メンバーシップに関して)。 切断しない限り、ログインは期限切れになりません。

II。 テーブル管理

2.1 articleまたはcomponentからテーブルを管理する

Droptablesがインストールされるとき、あなたはコンポーネントエントリーを持っています、 メニューコンポーネント> Droptablesとエディタボタン それはあなたのエディタの下に表示されます。 それをクリックしてメインDroptablesビューを開きます。

droptablesエディタ

 

テーブルマネージャインタフェースは、エディタからライトボックスに表示されます。

droptables-ライトボックス - オープン

 

エディタにテーブルを挿入したい場合は、右上のボタンを使用してください。 この表を挿入 あなたの記事にそれを入れるために。 その後、テーブルは灰色の領域とExcelのようなアイコンで実体化されます。

テーブルインエディタ

 

エリアをクリックしてからDroptablesボタンをもう一度クリックすると、以前に追加されたテーブルがロードされます。

 

2.2テーブルとカテゴリを管理する

テーブルはカテゴリに分類されます。 あなたはあなたがカテゴリの中に欲しいだけのテーブルを持つことができます。 テーブルカテゴリを作成するために、クリックして下さい 新しいテーブルカテゴリ 中央上部にあります。 新しいテーブルを作成するには、をクリックしてください。 テーブルを作成します。

テーブルカテゴリ

 

注:デフォルトのカテゴリとテーブルは、コンポーネントのインストール中にすでに作成されています。 ドラッグ&ドロップでテーブルとテーブルカテゴリを移動できます。

テーブル移動

 

カテゴリはその上にマウスを置くことによって管理することができ、名前を編集したり、テーブルをコピーまたは削除することができます。

テーブル名

 

2.3表版

テーブルにデータを追加するには、スプレッドシートにいるときと同じように行動する必要があります。 セルをダブルクリックすると、コンテンツを更新することができます。シングルクリックでセルを選択します(たとえばスタイルを適用します)。

編集セル

行または列を追加するには、表の枠線の+をクリックします。

行追加テーブル

 

または右クリックしてください。

右クリック

 

セルをコピーするには、CTRL + C / CTRL + Vを使用するか、マウスをセルの右下隅に置いて目的の方向に移動させることもできます。

コピーセル

 

注:すべての変更は、右上のメッセージとともに自動的に保存されます。 この機能を無効にするオプションがあります。 Droptables>オプション

保存テーブル

 

 

右クリックメニューから、最新の変更を元に戻すことができます。ページをリロードしてからの最新の変更すべてです。 Droptablesはあなたが行った変更のバックアップを保持し、それを復元することができます。

元に戻す

セルをマージすることもできます。 2セル以上を選択して右クリックしてください。 メニューでマージを実行できます。

 

2.4高度なコンテンツ編集

最近、エディションインターフェースに新機能が追加されました。 各セル内にWYSIWYGエディタを使用してHTMLコンテンツを追加できるようになりました。 セルを選択 右側のタブで、フォーマット> HTMLを選択してください。

htmlセル

 

セルを編集すると、HTMLエディタが表示されます。 また、エディタのコンテンツボタンもすべて含まれています。ここでは、たとえばイメージボタンを使用しました。 利用可能なエディタボタンはオプションとして設定可能です。

編集ボタン

 

 

2.5 Excelとスプレッドシートのインポート/エクスポート

 

専用のツールを使用して、Droptablesでスプレッドシートをインポートおよびエクスポートできます。 設定から有効にする必要があります。 コンポーネント> Droptables>オプション

エクセルインポート

 

テーブルはExcelまたはOpen Officeからインポートできます。 フォーマットは自動的に検出されてインポ​​ートされます。 最初のExcelページだけがインポートされることに注意してください。 エクスポートはExcel 2003または2007形式で実行できます。

Excel  - シートインポートエクスポート

 

インポートまたはエクスポートすることもできます 表データのみ または テーブルデータ+スタイル。 インポートデータはインポート時のレイアウトを保存するのに非常に便利です。

 

III。 テーブルのスタイル

3.1フォーマット

デフォルトでは、フォーマットタブは画面の右側にあります。 さまざまなスタイリングパラメータが含まれています。

 

表フォーマット

  • セルタイプ デフォルトまたはHTML(エディタ付き)。 デフォルトタイプでは、画像のようなHTMLコンテンツを挿入するHTMLを使用して計算することができます。
  • セルの背景 背景色の定義についてはもちろんです
  • 枠線とフォントのオプション 単一または複数のセルに適用できます
  • 行と列の幅/高さ ピクセル単位で定義できます。 テーブル内の任意の場所で列または行を選択し、サイズを検証します。

行と列のサイズ

セルマウスホバーのツールチップも利用できます(コンポーネントオプションから有効にする必要があります)。 ツールチップボタンをクリックすると、フロントエンドのセルマウスホバーに表示されているコンテンツを編集できます。

テーブルセルツールチップ

 

3.2テーマとソートオプション

 

右側のテーブルタブには、サムネイルテーマの選択機能があります。 テーマをクリックして適用するだけです。 新しいテーブルにテーマを適用することを強くお勧めします。その場合はデータを変更するほうが簡単です。

テーマ選択

テーブルにすでにデータがあり、テーマを適用すると、すべてのデータが削除されます。 新しいテーブルにテーマを適用すると、例のデータとスタイルが追加され、編集することができます。

 

それでも表の右の列タブにある2 frameパラメータは、代替行の色を定義するためのものです(line1、line2、line1、line2 ...)。

2コマ

 

sortableパラメータはフロントエンドでAJAXデータのソートをすることを可能にします。 フィルタツールを有効にすると、データソートツールがデフォルトで有効になります。

ソート可能フィルター表

 

  • ソート可能な表を使用する: はい・いいえ
  • 表を揃えます。 中央/右/左/なし
  • 応答タイプ: スクロール/非表示のCols
  • フィルタを有効にします。 はい・いいえ
  • ページネーションを有効にします。 はい・いいえ
  • 1ページあたりの行数 10、20、...
  • デフォルトでクローンをソートします。 A、B、Cのいずれかを選択します。
  • デフォルトで列を並べ替えます。 ASC / DESC

フロントエンドでのデータフィルタとソート

データフィルタ

テーブルの整列は、テーブル全体を含むdivを整列することです。たとえば、すべてのテーブルを中央揃えにします。 列と行の固定オプションは選択を固定し、残りの部分をスクロールできるようにします。

ラインフリーズ

 

自分のテーブルをレスポンシブにするか、小型デバイスでスクロールを使用しますか?

Droptablesは、オプションとして優先ツールを使用してレスポンシブデザインを処理します。 デフォルトでは、レスポンシブ機能は無効になっています。オーバーフローが発生します(モバイルでは魔女はうまく機能しています)。

応答モード

 

レスポンシブモードは高度です、あなたはモバイルサイズで列を隠すための優先順位を定義することができます。 列が非表示になると、チェックボックス付きのモバイルメニューが表示され、列の表示/非表示が強制されます。
列のサイズはテーブルの編集中に固定されています。 すべての列のサイズがコンテナに対して大きすぎると、オーバーフローが発生し、モバイルデバイスで簡単にスクロールできるようになります。

スクロールテーブル (少量の列に適しています)

レスポンシブテーブルスクロール

 

列を非表示にした表 (大量の列に適しています)

レスポンシブテーブル列の非表示

 

セルハイライトもオプションとして用意されています。 この機能を有効にすることができます。 構成。 デフォルトでは無効になっています。 強調表示の色と不透明度を調整できます。

表の強調表示

 

3.3 ACLとフロントエンドの管理

Joomlaのフロントエンドからあなたのテーブルを管理することは可能です。 Joomlaのメニューマネージャから、 新しいメニューを追加する アイテムとタイプとして選択 テーブルを管理し、テンプレートとしてDroptablesフロントエンドを選択します。


menu-droptables

 

 

これはフロントエンドからDroptablesマネージャを見ることができるものです。

Droptablesフロントエンド

 

注:フロントエンドでフルスクリーンでテーブルマネージャインターフェースを表示するには、選択する必要があります。 テンプレートスタイル> Droptablesフロントエンド。

 

JoomlaのユーザーグループACLを使用してテーブル編集アクションを制御できます。 まず、誰がテーブルを閲覧できるかを設定するには、Droptables設定でテーブルアクセス(ACL)機能を有効にする必要があります。

フロントエンドテーブル版

 

さらに、テーブル設定から各テーブルのテーブルフロントエンドの表示を制御できます。 (詳細タブ) グループがフロントエンドでテーブルを見ることができるようにするためにJoomlaユーザーグループをピックアップします。

ユーザーグループacl

 

3.4カスタムCSS

一歩先を行きましょう。 あなたがCSSエディションのスキルを持つWebデザイナーであれば、あなたはからCSSを追加することができるでしょう 右側の[その他]タブ

セルに余白と境界線の半径を追加できます。

パディングcss

 

セル、行、列には、それぞれを識別してカスタムCSSを適用するための座標があります。 Rは行、Cは列です。 これは1行目(r1)、4列目(c4)= dtr1 dtc4です。

CSS座標

 

CSSコードはコードミラーを使用して色付けされています。 CSSコードはより少ないコードにすることができます、それも働きます!

css-custom-table

 

 

IV。 テーブルからのチャート

4.1データを含むテーブルを作成する

あなたのコンテンツの中で、テーブルデータからチャートを生成することができます。 まず、チャートを生成するためのデータを含むテーブルを作成します。

テーブルはコンテンツ内のチャートと一緒に表示する必要はなく、単一のテーブルから複数のチャートを生成できます。

 

それからあなたはチャートを生成するために選択をします。 ここではすべてのテーブルが選択されています。

チャート表

 

次にをクリックして新しいチャートを追加します。 選択したデータ範囲を考慮してチャートが生成されます。 右側ではチャートタイプを選択できます。

チャート作成

 

グラフはテーブル内のデータ変更に関して動的に更新されます。再生成する必要はありません。

 

4.2グラフパラメータ

グラフを追加したら、右側の列にいくつかのオプションがあります。

チャート設定

 

行/列を切り替える データセットで数字のみを選択した場合にのみ使用できます。 データを列から行に切り替えることができます。

最初の行/列をラベルとして使用 パラメータを使用すると、グラフにラベルを追加できます。

チャートタイトル

 

それからあなたはあなたのチャートの幅/高さ、位置合わせ、色を設定するオプションがあります。

 

V. DROPTABLESのパラメータとトリック

5.1パラメータ

Droptablesグローバルパラメータにアクセスするには、に進みます。 コンポーネント> Droptables>オプション

droptables-パラメータ

 

オプションでは、次のものを定義できます。
 

  • テーブルのカテゴリアコーディオンオートクローズ
  • Excelのインポート/エクスポートを有効にする
  • エクスポート形式を選択してください

droptable-settings2

 

  • ツールチップを有効にする 細胞に
  • 自動保存を有効にする AJAXでは、それ以外の場合は 変更を保存ボタン
  • テーブルアクセスを有効にします。 テーブルアクセス制限(ACL)を有効にします。 Joomlaのユーザーグループに基づいてテーブルの編集権限を制限することができます
  • セルの強調表示 セルの上の色をアクティブにすると、一目でセルの内容が表示されます(行のみ/列のみ/両方)
  • 色を強調する:セルのハイライト表示
  • フォントの色を強調表示します。 セルハイライトフォントのホバー色
  • 不透明度を強調する: 不透明度を強調するセル
  • 非表示の右パネルを有効にします。 はい・いいえ
  • テーブル同期の周期性 ExcelファイルまたはGoogle Sheetsのテーブル自動同期遅延
  • データベーステーブルを有効にします。 はい・いいえ

 

5.2 ACLパーミッション

Joomla ACL統合が利用可能です。 テーブルエディタのアクションまたはテーブルへのアクセスを制限できるようになりました。 この制限はすべてのテーブルに適用されます。

アクセステーブル

 

たとえば、管理者ユーザーに自分のテーブルのみへのアクセスと編集を許可する場合は、「編集」を「拒否」に設定し、「自分を編集」を「許可」に設定します。 また、制限することができます。

  • グローバル設定
  • インターフェースアクセス
  • テーブル作成
  • テーブル削除
  • 版/自作版
スーパー管理者ユーザーは、常にすべてのテーブルとカテゴリに対するすべての編集権限を持ちます。

 

5.3 HTMLカスタムモジュールにテーブルを読み込む

DroptablesはすべてのWYSIWYGエディタフィールドで使用されるように構築されています、あなたはただ呼ばれるべきコンテンツプラグインを持っている必要があります。 ほとんどの場合、デフォルトで有効になっています。

そうでない場合は、Joomla HTMLカスタムモジュールのように、あなたは上記のようにそれをアクティブにする必要があります。

テーブルインモジュール

 

オプションタブでは、オプションを設定する必要があります コンテンツを準備する:はい

 

5.4計算

あなたはDroptablesで基本的な計算の実装をしています。 利用可能な要素は次のとおりです。

  • SUM、COUNT、CONCAT
  • 最小・最大・平均
  • DATE、DAY、DAYS、DAYS360
  • OR、XOR、AND

合計するには、セルに次のように入力します(大文字は必須です)。 = SUM(A1; B2)または= SUM(A1:B2)

そして、あなたは数、お金または日付で細胞計算のためにシンボルを構成することができます。

計算設定

 

  • 日付フォーマット 日付計算用の日付フォーマットを設定する
  • シンボル位置 お金でセル計算をするために、通貨記号のデフォルト位置を定義します
  • 通貨記号 お金でセル計算をするためには、デフォルトの通貨記号を定義してください。
  • 小数点記号 セル計算をするために、デフォルトの小数点記号を定義します
  • 10進数 小数点以下の桁数
  • 千シンボル: セル計算をするために、デフォルトの1000シンボルを定義します。

VI。 エクセルとグーグルシートの同期

6.1 Excelファイルの同期

作成したテーブルとサーバー上のExcelファイル(どこでも)の間で同期を実行することができます。 "Table"という名前の右側のタブの一番下に、Excelファイルをテーブルにリンクするためのブロックがあります。

sync-excel-choice

をクリックして 参照ボタンサーバー上の任意の場所でExcelを選択できるようになります。ここではメディアマネージャ(/ imagesフォルダ)を通じてアップロードされたファイルです。

ファイル閲覧エクセル

 

あなたのExcelファイルがテーブルにリンクされると、あなたはヒットすることができます データ取得ボタン Excelファイルからデータをインポートします。

取り出し - エクセルデータ

 

注:スタイルではなくデータのみがExcelから取得されるため、インポート時にテーブルのグローバルスタイルは変更されません。

 

警告:サーバーで利用可能なメモリ容量によっては、非常に大きなExcelファイル(たとえば1000行以上)をインポートすることはできません。

 

6.2 Googleスプレッドシートとの同期

Droptablesは、Google Sheetsの同期機能を提供します。 あなたのGoogleスプレッドシートは「 ウェブに公開"同期するには。まず、Googleドライブからシートを開き、[ファイル]メニューを使用してWebページとして公開します。

Webに公開

 

それから、あなたはグーグルシートファイルリンクへのアクセスを得るでしょう、このリンクをコピーしなさい。

公開リンク

 

そしてそれを貼り付ける Droptables「テーブル」タブ。 これで終わりです! これでGoogleスプレッドシートからデータを取得できます。

Googleシートデータ

 

6.3 ExcelとGoogleスプレッドシートの自動同期

ファイルリンクの上には、自動データ同期をアクティブにすることもできます。 Droptablesは定期的にデータを自動的に取得します。

同期期間

有効にすると、表のタイトルの後に通知が表示されます。

自動同期通知

 

同期遅延はDroptables構成で設定できます。

 

VII。 データベースからのテーブル

 

Droptablesを使用すると、データベーステーブルからテーブルを作成できます。 コンポーネントの設定から、 データベーステーブルを有効にします。

database-config

 

ダッシュボードに戻る、最初にあなたが選ぶ データベースからのテーブル カテゴリをクリックしてからクリック テーブルを作成 データベース内のすべてのテーブルが以下に一覧表示されます。 次に、データベースからテーブルと列を選択できます。 コントロールを押すと、いくつかのテーブル、列を選択できます。

データベース選択


列選択では、パブリック側に表示されるときに、テーブル内のデータのカスタムタイトルとデフォルトの順序を定義できます。

列タイトル順


それからあなたはあなたのテーブルに適用するためにいくつかのオプションとフィルタを得ました:

  • ページネーションのデフォルトレベル(大量のデータで使用される)
  • ページ区切りの行数
  • あなたのデータにフィルタをかけてください。 列は、定義された値と同じ、異なる場合があります。
  • いくつかの値を列にグループ化する可能性

データベーステーブルオプション


最後に、他の表と同じように表をプレビューして生成できます。 あなたのテーブルが生成されたとき、あなたはまだテーブルDatabase sourceへのアクセスを持つでしょう、そしてあなたは例えばあなたのテーブルに列を追加することができます。

データベーステーブル生成

注:唯一の違いは、テーマを表に適用することはできませんが、他の表のようにすべての表示をカスタマイズできることです。