木のjQueryのEasyui / TopJUI基本的なフォームを作成します

<表データトグル= "topjui-treegrid" 
       データ・オプション= "ID： 'menuTg'、
        idField： 'ID'、
        treeField： 'テキスト'、
        URL：REMOTEHOST + '/システム/ codeItem / getListByCodeSetIdAndLevelId codeSetId = 0＆levelId = 0？ 」、
        expandUrl：REMOTEHOST + '/システム/ codeItem / getListByPid PID = {ID}' "？> 
    <THEAD> 
    <TR> 
        <番目のデータ・オプション="フィールド： 'UUIDは'、タイトル： 'UUID'、チェックボックス：真」 > </目> 
        <番目のデータ・オプション= "フィールド： 'テキスト'、タイトル： '名称'"> </目> 
        <番目のデータ・オプションは= "フィールド： 'codeSetId'、タイトル： '体系代码'"> </目> 
        <番目のデータ・オプション=」フィールド： 'ID'、タイトル： '编号' "> </目> 
        <番目のデータ・オプション="フィールド： 'PID'、タイトル： '父级编号' "> </目> 
    </ TR> 
    </ thead要素> 
</ TABLE>


<！ -表格工具栏开始- > 
<DIV ID = "menuTg-ツールバー"クラス= "topjui-ツールバー" 
     データ・オプション= "グリッド：{ 
           タイプ： 'treegrid'、
           ID： 'menuTg'、
           parentIdField」 PID ' 
       } "> 
        は、<a href =" javascriptの：無効（0） " 
       データトグル= "topjui-メニューボタン" 
       のデータオプションは="方法： 'expandAll'、
       延びる： '＃menuTg-ツールバー'、
       btnCls' topjui -btnブルー' ">展开全部</a>に
    は、<a href =" javascriptの：無効（0） " 
       データトグル= "topjui-メニューボタン" 
       データオプション="方法： 'collapseAll'、
       延び：'menuTg-ツールバー＃ ' 
       btnCls：' topjui-BTN-ブルー"「>すべての</a>の折りたたみ
</ div> 
< -エンドのテーブルツールバーを- >！

結果は

デフォルトのページの表示

完全な効果を示すためにクリック

注：これはオープンレベルで、開くために1回クリック

効果を折りたたみクリックします（すべてを一度に崩壊しました。）

プレーンなHTMLコードは、良いパッケージの折りたたみメソッドを直接呼び出すことができることを示します。

EasyUI中国のネットワーク： http://www.jeasyui.cn

TopJUIフロントエンドフレーム： http://www.topjui.com

TopJUI交換コミュニティ： http://ask.topjui.com

木のjQueryのEasyui / TopJUI基本的なフォームを作成します

おすすめ