1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站([EasyUI 官网](http://www.jeasyui.com/))下载并引入这些文件。
2. 在 HTML 中创建一个容器,用于显示异步加载的树形菜单:
<div id="asyncTree"></div>
3. 使用 jQuery EasyUI 的 tree 方法初始化树形菜单,并通过设置 url 属性指定远程数据源:
<script>
$(function(){
// 初始化异步加载的树形菜单
$('#asyncTree').tree({
url: 'your_backend_api_url', // 远程数据源的 URL,需要替换成实际的后端接口地址
method: 'get', // 请求方式,可以根据实际情况选择 'get' 或 'post'
animate: true, // 是否启用动画效果
onLoadSuccess: function(node, data){
// 在数据加载成功时触发的回调函数
console.log('数据加载成功:', data);
}
});
});
</script>
在这个例子中,您需要替换 url 属性的值为实际的后端接口地址,该接口应该返回符合 EasyUI 树形菜单格式的 JSON 数据。后端接口需要返回的 JSON 数据格式如下:
[
{
"id": 1,
"text": "Node 1",
"children": [
{
"id": 11,
"text": "Node 1.1"
},
{
"id": 12,
"text": "Node 1.2"
}
]
},
{
"id": 2,
"text": "Node 2",
"state": "closed",
"children": [
{
"id": 21,
"text": "Node 2.1"
},
{
"id": 22,
"text": "Node 2.2"
}
]
}
]
请确保后端接口返回的数据符合 EasyUI 树形菜单的要求。
转载请注明出处:http://www.zyzy.cn/article/detail/13134/jQuery EasyUI