2009년 11월 5일 목요일

flexgrid install (sample)

http://code.google.com/p/flexigrid/downloads/list よりFlexigridをダウンロード。

     オプションで                       ------------------------- 2009.5.28 修正
       singleSelect: true,
       showToggleBtn: false,
       resizable: false,
       height: 150
  というようにshowToggleBtn: falseを指定するとエラーになります。

     flexigrid.js 996行目より (Date: 2008-07-14 00:09:43 +0800 版)
     ---------------------------------------------------------------------------------
     996:                           var nv = $('th:visible',g.hDiv).index(this);
     997:                           var onl = parseInt($('div:eq('+nv+')',g.cDrag).css('left'));
     998-old: //  2009.5.28 u       var nw = parseInt($(g.nBtn).width()) + parseInt($(g.nBtn).css('borderLeftWidth'));
     998-new:                       var nw = (p.showToggleBtn)?parseInt($(g.nBtn).width()) + parseInt($(g.nBtn).css('borderLeftWidth')):0; 
     999:                           nl = onl - nw + Math.floor(p.cgwidth/2);
     1000:                               
     1001:                          $(g.nDiv).hide();$(g.nBtn).hide();
     1002:                          
     1003-old: // 2009.5.28 u       $(g.nBtn).css({'left':nl,top:g.hDiv.offsetTop}).show();
     1003-new:                      if (p.showToggleBtn) $(g.nBtn).css({'left':nl,top:g.hDiv.offsetTop}).show();
     1004:                           
     1005:                          var ndw = parseInt($(g.nDiv).width());
     1006:                          
     1007:                          $(g.nDiv).css({top:g.bDiv.offsetTop});
                                    
                                    if ((nl+ndw)>$(g.gDiv).width())
                                        $(g.nDiv).css('left',onl-ndw+1);
                                    else
                                        $(g.nDiv).css('left',nl);
     ------------------------------------------------------------------------------------
     と修正するとよいと http://groups.google.com/group/flexigrid/browse_thread/thread/f87f8e68851ad379/27ad3d1ef29d77e7?lnk=raot  に載っていた。
     たしかにエラーがなくなった。これで hide: true の項目が表示されなくなる。
     ドラッグでカラムのリサイズを出来なくしたいのだがだめなようですね。


     public_htmlに展開して、JPよりカタカナ小文字入りをダウンロードして、半角→全角変換、
     さらにSJIS→UTF-8変換したもの。
     必要な sample1.html(index.html) と post3.php を修正したものを置いておきます。
     JQUERYはオリジナルのflexigrid内に含まれています。
JQUERY/Flexigrid.js一式ダウンロード:flexigrid-yuubin.tgz(2307KB)
     これをpublic_html ディレクトリに解凍して使います。

public_html/css

|-- flexigrid
|   |-- flexigrid.css
|   `-- images
|       |-- bg.gif
|       |-- btn-sprite.gif
|       |-- ddn.png
|       |-- dn.png
|       |-- fhbg.gif
|       |-- first.gif
|       |-- hl.png
|       |-- last.gif
|       |-- line.gif
|       |-- load.gif
|       |-- load.png
|       |-- magnifier.png
|       |-- next.gif
|       |-- prev.gif
|       |-- up.png
|       |-- uup.png
|       `-- wbg.gif
`-- images
    |-- add.png
    |-- bg.gif
    |-- btn-sprite.gif
    |-- close.png
    |-- ddn.png
    |-- dn.png
    |-- fhbg.gif
    |-- first.gif
    |-- hl.png
    |-- last.gif
    |-- line.gif
    |-- load.gif
    |-- load.png
    |-- magnifier.png
    |-- next.gif
    |-- prev.gif
    |-- up.png
    |-- uup.png
    `-- wbg.gif

public_html/js

|-- flexigrid.js
|-- flexigrid.pack.js
`-- jquery-1.3.2.js

public_html/flexigrid-yuubin

|-- Data-yuubin
|   |-- KEN_ALL.CSV
|   |-- README-DATA-YUUBIN-UTF8.TXT
|   `-- yuubin.sql
|-- chrom-yuubin.jpg
|-- firefox-yuubin.jpg
|-- ie-yuubin.jpg
|-- index.html
|-- magnifier.png
`-- post3.php

     Mysql にテーブルを作って、
      1. source yuubin.sql [Enter]
     CSVデータを
      2. load data local infile "KEN_ALL.CSV" into table yuubin fields terminated by ',' enclosed by '"';
     で読み込ませる。
      3. post3.php のユーザ名、パスワード、データベース名を修正する。
 
   http://localhost/~xxx/flexigrid-yuubin/index.html  で表示される。
      Quick Searchボタンをクリックして検索バーを表示する。
      検索項目と検索内容を入力し、[Enter]キーを押す。

댓글 없음:

댓글 쓰기