easyui菜单 java_EasyUI：主界面以及菜单功能

接下来我们介绍easyui为我们提供的主界面菜单：

同样的我们需要先引入4个css和js

通过api文档，我们可以知道布局示例代码为：

执行出来可以看到这样一个界面：

不难发现元素属性：title:每一个代码块的名字

split：为true时用户可以通过分割栏改变面板大小，默认为false

collapsible：定义是否显示折叠按钮 默认为true

我们稍稍加以修改就变为：

加入一些简单的文字图片，这里只是简单修改一下

xxx用户，欢迎登陆

copy@ wjh

效果图为：要更丰富的界面需要添加很多div初始效果图

接下来介绍菜单功能,easyUI为我们提供了相应的菜单功能，如下

通过API文档，我们可以在菜单对应的div下调用代码：

然后通过js代码实现菜单功能：

$('#menu').tree({

url:'tree_data.json'

});

这里需要注意的是，从API文档下面可以看到json数据是有一定格式的。

每个节点都具备以下属性：id：节点ID，对加载远程数据很重要。

text：显示节点文本。

state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

checked：表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点。

我们在java中创建相关类，并从数据库中取出即可得到：