グリッドコントロール

Excel からのコピー&ペースト

ここではブラウザ上で Excel のようなグリッドコントロールを扱うサンプルをご紹介します。
このサンプルで注目すべきは、Excel 上に入力されたデータをコピー&ペーストで
ブラウザへ貼り付けることができる点です。
通常の Excel で入力された表であればいつも通りのコピー&ペーストで貼り付けが可能です。
弊社製品 Chicago でダウンロードした System i 上のデータ・ベースもブラウザ上の
グリッドコントロールへ貼り付けることができます。
また、入力やセルの幅の変更、ソート等を行え、あたかも Excel のような操作を
ブラウザ上で行うことができます。

実際の動作例として、次のサンプルをご覧下さい。

■ 初期画面
実行

サンプル画面

■ HTML サンプルソース
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
   <head>
   <title>商品マスターの登録</title>
   <meta http-equiv="content-type" content="text/html; charset=shift-jis" />
① <link rel="stylesheet" type="text/css" href="codebase/dhtmlxgrid.css" />
   <link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxgrid_dhx_skyblue.css" />
   <link rel="stylesheet" type="text/css" href="css/index.css" />
   <script  src="codebase/dhtmlxcommon.js"></script>
   <script  src="codebase/dhtmlxgrid.js"></script>
   <script  src="codebase/dhtmlxgridcell.js"></script>
   <script  src="codebase/ext/dhtmlxgrid_selection.js"></script>
   <script  src="codebase/ext/dhtmlxgrid_nxml.js"></script>
   <script language="javascript">
②  function SetupGrid(){
     mygrid = new dhtmlXGridObject('gridbox');               //グリッドコントロールのオブジェクトを生成
     mygrid.setImagePath("codebase/imgs/");                  //グリッド用の画像格納フォルダを指定
     mygrid.setHeader("行№,商品ｺｰﾄﾞ,商品名,単価,品種ｺｰﾄﾞ"); //各カラムのヘッダーを設定
     mygrid.setInitWidths("50,100,150,100,*");               //各カラムの初期幅を設定
     mygrid.attachEvent("onKeyPress", onKeyPressed);         //貼り付け用のイベントハンドラ
     mygrid.setColAlign("right,left,left,right,left");
     mygrid.setColTypes("ro,ed,ed,ed,ed");
     mygrid.setColSorting("int,str,str,int,str");
     mygrid.setSkin("dhx_skyblue")
     mygrid.clearAll();
     mygrid.init();//グリッドを表示
     for(var i=0;i<30;i++){
     mygrid.addRow(mygrid.uid(), [i+1, "","","",""], i);//グリッドに行追加
     }
     mygrid.enableBlockSelection();
   }
④ function onKeyPressed(code, ctrl, shift) {
     if (code == 86 && ctrl) {            //Ctrl + Vが押されたときの処理
       mygrid.setCSVDelimiter("\t");    //カラムの区切り文字にタブを設定する
       mygrid.pasteBlockFromClipboard();//グリッドコントロール内の関数で貼り付け処理を行う
     }
     return true;
   }
   </script>
   </head>
⑤ <body onload="SetupGrid()">
   <div class="content">
     <div class="cls_btn"><img src="img/cl_btn.gif" alt="閉じる" onclick="window.opener=self;window.close()"></div>
     <h2><img src="img/mstent.gif"></h2>
     <div class="excel"><a href="data/shohin.xls" target="_blank" >Excelファイルを開く</a></div>
     <!--ｸﾞﾘｯﾄﾞｺﾝﾄﾛｰﾙの表示域-->
③   <div id="gridbox"></div>
   </div>
   </body>
   </html>

サンプルの操作方法

1. リンクからエクセルファイルを直接開く、もしくはPCへダウンロードしてから開きます。

2. 開いた Excel のセルを範囲選択し、クリップボードへコピー（Ctrl+C）します。

3. ブラウザ上グリッドの1行2列をクリックして選択状態にし、貼り付け（Ctrl+V）を行います。

■ その他の操作方法

- セルをダブルクリックすると、セル内へ値を入力できます。

- グリッドコントロールのヘッダをドラッグすることで、セルの横幅を変更できます。

- グリッドコントロールのヘッダをクリックすることで、セルの並びをソートできます。

サンプルソースのコード説明

■ グリッドコントロールの設定

まずグリッドコントロール用の外部 Javascript,CSS ファイルを読み込むために、
HTML へ ① のように記述します。 

<link rel="stylesheet" type="text/css" href="codebase/dhtmlxgrid.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxgrid_dhx_skyblue.css" />
<script  src="codebase/dhtmlxcommon.js"></script>
<script  src="codebase/dhtmlxgrid.js"></script>
<script  src="codebase/dhtmlxgridcell.js"></script>
<script  src="codebase/ext/dhtmlxgrid_selection.js"></script>
<script  src="codebase/ext/dhtmlxgrid_nxml.js"></script>

続いて、グリッドコントロールの設定をHTML上に Javascript で ② のように記述します。 

function SetupGrid(){
  mygrid = new dhtmlXGridObject('gridbox');              //ｸﾞﾘｯﾄﾞｺﾝﾄﾛｰﾙのｵﾌﾞｼﾞｪｸﾄを生成
  mygrid.setImagePath("codebase/imgs/");                 //ｸﾞﾘｯﾄﾞ用の画像格納ﾌｫﾙﾀﾞを指定
  mygrid.setHeader("行№,商品ｺｰﾄﾞ,商品名,単価,品種ｺｰﾄﾞ");//各カラムのヘッダーを設定
  mygrid.setInitWidths("50,100,150,100,*");              //各カラムの初期幅を設定
  mygrid.attachEvent("onKeyPress", onKeyPressed);        //貼り付け用のイベントハンドラ
   :
  mygrid.init();                                          //グリッドを表示
  for(var i=0;i<30;i++){
    mygrid.addRow(mygrid.uid(), [i+1, "","","",""], i); //グリッドに行追加
  }
}

グリッドコントロールをHTML上へ表示するためのタグを ③ のように記述します。
作成するタグには new dhtmlXGridObject('gridbox') で指定した gridbox を id に指定します。 

<div id="gridbox"></div>

エクセル等からコピーしたクリップボード上の内容をグリッドへ貼り付けるための処理を ④ のように追加します。 

function onKeyPressed(code, ctrl, shift) {
  if (code == 86 && ctrl) {            //Ctrl + Vが押されたときの処理
    mygrid.setCSVDelimiter("\t");    //カラムの区切り文字にタブを設定する
    mygrid.pasteBlockFromClipboard();//グリッドコントロール内の関数で貼り付け処理を行う
  }
  return true;
}

最後にグリッドコントロールがブラウザ読み込み時に表示されるように、body タグへ ⑤ のように記述します。 

<body onload="SetupGrid()">

■ 表示のカスタマイズ

グリッドコントロールにはデザイン用のテンプレート CSSファイルが用意されています。
次の下線部を書き換えることで任意のテンプレートを読み込むことができます。 

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxgrid_dhx_skyblue.css" />
mygrid.setSkin("dhx_skyblue")

用意されているデザインテンプレートは次のようなものがあります。

[ TOP ]