[知了堂学习笔记]_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数据格式。