快速创建easyui菜单，实现数据库读取 (读取数据库创建easyui菜单)

随着互联网的迅速发展，网页应用的需求量也越来越大。其中，动态菜单更是必不可少的一种组件。而创建一个友好、美观、易用的动态菜单，不仅需要熟练掌握各种前端技术，还需要对后端数据库结构、数据层逻辑有深入了解。

幸好，现今市面上有许多好用的前端框架，其中以easyui最为流行。easyui是一套基于jQuery的开源UI框架，其拥有丰富的UI组件和易于扩展的插件机制，适用于各种类型的网页应用，尤其擅长处理动态菜单。

在本篇文章中，我将为大家介绍如何快速使用easyui创建动态菜单，并结合后端Mysql数据库实现菜单数据的读取。

之一步：引入easyui相关工具文件

我们需要在HTML文件中引入easyui框架相关的CSS和文件，如下所示：

“`

“`

第二步：搭建HTML基础架构

接下来，我们需要搭建HTML基础架构，包括头部、左侧菜单、主体内容区域及底部等，如下所示：

“`

“`

其中：

– north：头部，可根据实际需求进行修改；

– west：左侧菜单区域，这里我们将使用easyui提供的tree组件来生成树形菜单；

– center：主体内容区，用于展示被选中的菜单对应的页面；

– south：底部，可根据实际需求进行修改。

第三步：生成easyui树形菜单

我们可以通过ajax访问后台接口，将数据库中查询得到的菜单列表数据转化成easyui所需的ON格式，如下所示：

“`

function getMenuData(){

$.ajax({

url: “./menu.php”,

dataType: “json”,

async: false,

success: function(menu_data){

$(‘#tree_menu’).tree({

data:menu_data,

onClick:function(node){

if (node.attributes){

add_tab(node.attributes.url,node.text);

}

}

});

}

});

}

“`

其中，menu.php是后端的接口，用于查询数据库中的菜单数据；ON格式的菜单列表数据可以使用php的json_encode方法进行转化。

第四步：实现菜单对应页面

我们需要在center区域中添加对应的iframe区域，用于展示所选中的菜单对应的页面，如下所示：

“`

function add_tab(url,title){

if($(‘#tabs’).tabs(‘exists’,title)){

$(‘#tabs’).tabs(‘select’,title);

}

else{

$(‘#tabs’).tabs(‘add’,{

title:title,

content:”,

closable:true

});

}

}

“`

具体操作是调用easyui的tabs组件，添加一个新的tab页，并依靠iframe来嵌入对应网页。

至此，我们已经完成了对于easyui动态菜单的快速创建，并成功地实现了根据后端数据库中的菜单数据来生成左侧栏菜单。以上代码已经在本地测试过，保证了代码的正确性和可行性。

当然，如果想要让页面更加美观、交互更加友好，还需要进一步进行js和css样式方面的优化。easyui是一个十分优秀的前端框架，可以更大程度地实现前端开发的快速、自动化，减轻了开发者的工作量，为了用户、为了更好的体验，快来试试吧！