easyui（Tree前端工作）

一、tree控件的使用

准备工作：jquery-easyui-1.5.5.2包的引入--->tree_data1.json的引入并且确保3个js和2个css引入

<!--引入easyui的css  -->    
<link type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/metro/easyui.css" rel="stylesheet"/> 
<!--引入eastui的图标库icon.css  -->
<link type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css" rel="stylesheet"/> 
<!--引入jquery类库  -->
    <script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!--引入easyui类库  -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 引入语言包-->
        <script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

tree-树型控件

 <ul id="myTree" class="easyui-tree">   
       
    </ul>  

----方法的使用
            $('#myTree').tree({    
                  url:ctx+'/indexServlet', //ctx+/
                      onDblClick:function(node){

}

三、图标的使用

 data-options="iconCls:'icon-mini-refresh'"

四、tab控件的使用
tab---选项卡

 <!--中间控件  -->
    <div id="myTab" data-options="pill:true" class="easyui-tabs" style="width:100%;height:100%;">   
       <div   data-options="iconCls:'icon-mini-refresh'" title="首页"  style="overflow:auto;padding:20px;display:none;">   
       <img  src="images/lb4.jpeg" width="100%" height="100%">    
    </div>   
    </div>  

---方法使用

//就新建一个选项卡
 

 $('#myTab').tabs('add',{  
 title:node.text,   //标题 
 content:'<iframe  scrolling="no" width="100%" height="100%" src="'+node.url+'"></iframe>',  //内容 内嵌框架<iframe>
 closable:true,//是否关闭
 iconCls:node.iconCls
  });