TAGS: jQuery | プラグイン | ツリー | テーブル | データグリッド
JQTreeTableはシンプルなHTMLテーブルをツリー形式のインタフェースで表示させるjQueryプラグインです。

動作環境


◇ 言語:JavaScript(jQuery.js)
◇ ライセンス:MIT/BSDライセンス

使い方


表示形式
例:


1)HTMLコード
例:

<table>
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
    </thead>
    
    <tbody id="tree1">
        <tr>
            <td>行1:列1</td>
            <td>行1:列2</td>
            <td>行1:列3</td>
        </tr>
        <tr>
            <td>行2:列1</td>
            <td>行2:列2</td>
            <td>行2:列3</td>
        </tr>
        <tr>
            <td>行3:列1</td>
            <td>行3:列2</td>
            <td>行3:列3</td>
        </tr>
        <tr>
            <td>行4:列1</td>
            <td>行4:列2</td>
            <td>行4:列3</td>
        </tr>
        <tr>
            <td>行5:列1</td>
            <td>行5:列2</td>
            <td>行5:列3</td>
        </tr>
    </tbody>
</table>


JavaScriptコード
例:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqtreetable.js"></script>
<link rel="stylesheet" type="text/css" href="jqtreetable.css" />

<script type="text/javascript"> $(function(){     //mapパラメータ:[]     var map = [0, 1, 2, 1, 1];     var options = {openImg: "images/tv-collapsable.gif", shutImg: "images/tv-expandable.gif", leafImg: "images/tv-item.gif", lastOpenImg: "images/tv-collapsable-last.gif", lastShutImg: "images/tv-expandable-last.gif", lastLeafImg: "images/tv-item-last.gif", vertLineImg: "images/vertline.gif", blankImg: "images/blank.gif", collapse: true, column: 1, striped: false, highlight: true, onselect: function(target){}};     $("#tree1").jqTreeTable(map, options); }); </script>


.

Sponsored Link


有关作者
Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation