easyui02(tree前端工作)

简介: easyui02(tree前端工作)

一.tree控件的使用

$(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){//不存在就新建
            //新建一个选项卡(Tab页) iconCls:'icon-mini-refresh'
            $('#myTab').tabs('add',{    
                title:node.text,    //标题
                content:node.text,    //内容
                closable:true,  //是否可关闭
                iconCls:node.iconCls//图标
            }); 
                }
            else{
                //让对应选中
                $('#myTab').tabs('select',node.text);
            }
        }

二.tabs控件的使用

<!--左侧tree树控件  -->
    <ul id="myTree" class="easyui-tree">   
    </ul>  
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#fff;">
        <!--中间选项卡Tab控件  -->
        <div id="myTab" class="easyui-tabs" style="width: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>

三.easyui图标的使用

[{
    "id":1,
    "text":"My Documents",
    "iconCls":"icon-folder-heart",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":111,
            "text":"Friend",
        "iconCls":"icon-group-link"
        },{
            "id":112,
            "text":"Wife",
            "iconCls":"icon-user-female"
        },{
            "id":113,
            "text":"Company",
            "iconCls":"icon-flag-blue"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":121,
            "text":"Intel"
        },{
            "id":122,
            "text":"Java",
            "attributes":{
                "p1":"Custom Attribute1",
                "p2":"Custom Attribute2"
            }
        },{
            "id":123,
            "text":"Microsoft Office"
        },{
            "id":124,
            "text":"Games",
            "checked":true
        }]
    },{
        "id":13,
        "text":"index.html"
    },{
        "id":14,
        "text":"about.html"
    },{
        "id":15,
        "text":"welcome.html"
    }]
}]

√ 清除页面缓存

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


相关文章
easyui tree 默认选中第一个元素
easyui tree 默认选中第一个元素
111 0
easyui的tree节点的获取和选中
easyui的tree节点的获取和选中
268 0
|
数据库
easyui03(tree后台工作)
easyui03(tree后台工作)
|
JSON 前端开发 数据格式
EasyUI–树形控件tree详解
树形控件还是经常使用的,比如菜单、部门管理等涉及到有归属关系的功能经常在前端页面采用树形结构表示。 EasyUI对树形控件的封装非常的Nice,尤其是对复选框的支持简直是漂亮异常。本篇就最常用的菜单数为例演示EasyUI中tree的使用。 先看示意图:
648 0
EasyUI–树形控件tree详解
|
JSON 前端开发 JavaScript
|
Web App开发 前端开发 JavaScript
|
JSON JavaScript 前端开发
|
前端开发
Easyui tree
1.添加加载进度条 $("#treePart").find("#tree").tree({   onBeforeLoad: function (node, param) {//onBeforeLoad,在请求载入数据之前触发,返回false将取消载入。
759 0
|
SQL 测试技术 数据库
通过EasyUI Tree说明SQL GUID和自增列ID的使用场景
最新在开发中用到了EasyUI里面的Tree,通过API可以看到这个Tree的数据格式如下: 其中ID比较重要,API也说了,最开始我考虑到GUID比自增ID多占用了一些空间,所以采用的自增ID,测试数据库结构如下:   其中,表TB_Menu中的MENU_ID为标识列,步长值为1...
1076 0