[知了堂学习笔记]_EasyUi快速搭建一个权限管理的模块（2）--界面效果以及如何做出菜单树效果

四、界面效果展示

本次的权限管理的模块主要是导航菜单下面的 

用户管理
角色管理
和菜单管理 这三个模块
下面图片展示的是菜单展示模块。着这个系统中，第一步需要实现的是怎么使用easyUI中的插件快速的搭建出菜单树。

五、EasyUI菜单树的生成

第一步：easyUI的使用，这里有一个easyUI的官网链接，easyUI官网。在菜单导航栏的部分用到的树是easyUI官网上面的树线。

easyUI在生成对应的Tree Lines的时候，只要对应的关联相应的json数据格式，easyUI就会自动的生成相应的树。先看一下上面图片tree对应的Json的数据格式。

[{
    "id":1,
    "text":"My Documents",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":111,
            "text":"Friend"
        },{
            "id":112,
            "text":"Wife"
        },{
            "id":113,
            "text":"Company"
        }]
    },{
        "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"
    }]
}]

所以，同样的，我们要快速的使用easyUI的Tree Lines 插件，就需要封装好对应的json数据格式。就可以达到我们界面所需要的效果。

---

那么，既然我们使用easyUI中的Tree Lines，就必须遵守树控件的数据格式规范。

树控件数据格式化
每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，’open’ 或 ‘closed’，默认：’open’。如果为’closed’的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。

---

第二步：熟悉完EasyUI的使用之后，我们就可以根据界面中我们所需要的样式，去通过我们的java代码封装好对应的json数据格式。