使用EasyUI的Layout组件实现简单的页面布局

今天回顾了之前学习的使用EasyUI的Layout组件实现简单的页面布局，尝试着做了一个简单的Demo。

目录如下：

步骤一：引入easyui的样式和脚本

步骤二：在页面中引入easyui-layout组件，并且加入tree树组件和tabs选项卡组件

    

        
满天星的Layout效果演示
    
    

        
版权所有：©2018满天星
    
   
    

        

            

               
                

            
            

                content2
            
            

                content3
            
        
    
    

        
        

    

步骤三：添加部分脚本代码，tabs首页的呈现

 $(function () {  
            //实例化tabs组件
            $("#tabs").tabs({
                border: false,//无边框
                fit: true//铺满父容器
            });
              //添加一个选项卡
            $("#tabs").tabs('add',{
                title: "首页",
                content: "欢迎来到满天星的系统",
                closable: false//是否显示关闭按钮
            });
 })

步骤四：添加一个json文件（tree_data.json），用于存储树控件的数据

[
  {
    "id": 1,
    "text": "产品管理",
    "iconCls": "icon-tip",
    "children": [
      {
        "text": "添加产品",
        "attributes": {
        "url": "addProduct.html",
        "title": "添加产品",
        "closable": true
        }
      },
      {
        "text": "修改产品",
        "attributes": {
        "url": "editProduct.html",
        "title": "修改产品",
        "closable": true
        }
      }
    ]
  }
]  

你也可以把这段json代码放入jsonview去检查下格式是否正确

步骤五：添加部分脚本代码，tree的呈现以及和tabs的联动

//实例化一个树组件
            $("#menuTree").tree({
                url: "tree_data.json",//数据存放在json文件中
                method:'get',//若不设置为get提交，会有405错误
                onClick: function (node)//node是触发的节点
                {                    
                    //console.log(node.attributes);//打印显示node.attributes
                    if (node.attributes)//如果有attributes对象,就进入
                    {
                        var title = node.text;//树节点的文本
                        var t = $("#tabs");//t为tabs标签
                        
                        if (t.tabs('exists',title))//如果节点存在
                        {
                            t.tabs('select', title)
                            
                        }
                        else//如果不存在，则添加节点
                        {
                            var url = node.attributes.url;//节点url
                            t.tabs('add', {
                                title: title,//标题
                                href: url,//地址来源
                                closable: true
                            })
                        }
                    }
                }

中间我们有很多逻辑，例如你创建tabs判断是否存在，避免重复创建tabs。

最后，我们看看最终演示效果。

1.首页

2.打开摸一个树节点，触发对应的选项卡

大功告成！！！