在 jQuery EasyUI 中,创建异步加载的树形菜单可以通过使用 tree 组件的 url 属性和提供远程数据源来实现。以下是一个简单的例子,演示如何创建异步加载的树形菜单:

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