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

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

目录如下:使用EasyUI的Layout组件实现简单的页面布局_第1张图片

步骤一:引入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.首页

使用EasyUI的Layout组件实现简单的页面布局_第2张图片

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

使用EasyUI的Layout组件实现简单的页面布局_第3张图片

大功告成!!!

你可能感兴趣的:(EasyUI,Json,EasyUI,Json)