1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站（[EasyUI 官网](http://www.jeasyui.com/)）下载并引入这些文件。
2. 在 HTML 中创建一个容器，用于显示复杂树形网格：
<div id="complexTreegrid"></div>
3. 使用 jQuery EasyUI 的 treegrid 方法初始化复杂树形网格：
<script>
$(function(){
// 初始化复杂树形网格
$('#complexTreegrid').treegrid({
url: 'your_backend_api_url', // 远程数据源的 URL，需要替换成实际的后端接口地址
idField: 'id', // 数据中表示节点标识的字段名
treeField: 'text', // 数据中表示节点文本的字段名
columns: [[
{ field: 'id', title: 'ID', width: 80 },
{ field: 'text', title: 'Text', width: 150 },
{ field: 'description', title: 'Description', width: 200 },
{ field: 'price', title: 'Price', width: 100 }
]],
onLoadSuccess: function(row, data){
// 数据加载成功时触发的回调函数
console.log('数据加载成功:', data);
}
});
});
</script>
在这个例子中，您需要替换 url 属性的值为实际的后端接口地址，该接口应该返回符合 EasyUI 复杂树形网格格式的 JSON 数据。后端接口需要返回的 JSON 数据格式如下：
[
{ "id": 1, "text": "Node 1", "description": "Description 1", "price": 100, "children": [
{ "id": 11, "text": "Node 1.1", "description": "Description 1.1", "price": 50 },
{ "id": 12, "text": "Node 1.2", "description": "Description 1.2", "price": 70 }
]},
{ "id": 2, "text": "Node 2", "description": "Description 2", "price": 120, "children": [
{ "id": 21, "text": "Node 2.1", "description": "Description 2.1", "price": 80 },
{ "id": 22, "text": "Node 2.2", "description": "Description 2.2", "price": 90 }
]}
]
在这个例子中，我们在 columns 属性中定义了多个列，每列都包括一个字段、标题和宽度。
转载请注明出处：http://www.zyzy.cn/article/detail/13140/jQuery EasyUI