easyui02 (ツリーのフロントエンド作業)

1. ツリーコントロールの使用

$(function(){ //ツリーをロード         $('#myTree') .tree ({                 url:ctx+'/loadModuleServlet.do',             onDblClick: function( node ){             //alert(node.text); // ユーザーがクリックするとプロンプトを表示 //ノードの子ノード (子孫) を取得         var cs = $('#myTree').tree('getChildren',node.target); if (cs.length ==0){ //子孫が                 存在 しない場合 //  存在するかどうかを判断             var f = $('#myTab').tabs('exists',node.text); if(!             f){ //存在しない場合は新規作成   //新規タブ(タブページ)を作成 iconCls:'icon-mini-refresh'             $('#myTab').tabs('add',{                     title:node.text,    //タイトル
        




        

      


          


         


                content:node.text,    //コンテンツ
                closable:true, //                 iconCls を 閉じることができるかどうか : node.iconCls //アイコン             });                  }             else{    //対応する選択をさせます                 $('#myTab').tabs('select',node.text);             }         }




             


2. タブ コントロールの使用

 <!--左側のツリー ツリー コントロール -->
    <ul id=" myTree " class="easyui-tree">   
       
    </ul>  
    
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#fff;"> <!--中央のタブ タブ コントロール --> <div id="myTab" class="easyui-tabs" style="wid th:100%;height:100%;"> <div data- options=" iconCls :'icon-application-osx-home'" title="ホーム" style="padding:10px;display:none;"> <img src="img/bz05.jpg" width="100%" height
     
        =
        "   
            100 % "   
       >   
    </div>   

3. easyui アイコンの使用

[{     "id":1,     "text":"マイドキュメント",  "iconCls":"アイコンフォルダーハート",     "children":[{         "id":11,         "text":"写真", "         state":"closed",         "children":[{             "id":111,             "text":"友達", "iconCls":"アイコングループリンク"         },{             "id":112,             "text":"妻",  "iconCls":"アイコンユーザー女性"         },{             "id":113,             "text":"会社",  "iconCls":"アイコンフラグ青"         }]     },{         "id":12,         "text":"プログラム ファイル",


  







        
            



          



          




        "children":[{             "id":121,             "text":"Intel"         },{             "id":122,             "text":"Java",             "attributes":{                 "p1":"カスタム属性 1",                 "p2":"カスタム属性 2"             }         },{             "id":123,             "text":"Microsoft Office"         },{             "id":124,             "text":"ゲーム",             "check ed":true         }]     }, {         "id":13,         "text":"index.html"     },{         "id":14,






















        "テキスト":"about.html"
    },{         "id":15,         "テキスト":"welcome.html"     }] }]




 

√ ページキャッシュをクリアする

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 

おすすめ

転載: blog.csdn.net/qq_73126462/article/details/131236522