当然,我可以为你提供一个jQuery EasyUI中TreeGrid的简单使用实例。这个实例将展示如何初始化一个TreeGrid,并填充一些基本的数据。
首先,你需要在HTML文件中引入jQuery库和EasyUI库。你可以从官方网站或者CDN服务下载这些库。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI TreeGrid 示例</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 定义TreeGrid -->
<table id="tt" class="easyui-treegrid"
title="TreeGrid 示例"
style="width:700px;height:250px"
data-options="
url:'data1.json', <!-- 这里假设你有一个名为data1.json的数据文件 -->
method:'get',
rownumbers:true,
animate:true,
collapsible:true,
fitColumns:true,
singleSelect:true
">
<thead>
<tr>
<th field="id" width="80">ID</th>
<th field="name" width="180">Name</th>
<th field="price" width="80" align="right">Price</th>
</tr>
</thead>
</table>
<!-- 示例数据data1.json(注意:这里只是示例格式,实际中你需要一个服务器端的文件) -->
<!--
[
{
"id":1,
"name":"Food",
"price":10,
"children":[
{
"id":11,
"name":"Fruit",
"price":20,
"children":[
{"id":111,"name":"Apple","price":30},
{"id":112,"name":"Orange","price":35}
]
},
{
"id":12,
"name":"Meat",
"price":25
}
]
}
]
-->
</body>
</html>
请注意,这个示例中的`url:'data1.json'`是一个假设的URL,你需要将其替换为实际提供JSON数据的URL。此外,示例中的JSON数据是以注释的形式给出的,你需要在服务器上创建一个名为`data1.json`的文件,并将示例中的JSON数据(去除注释)保存在该文件中。
以上就是一个简单的jQuery EasyUI TreeGrid的使用实例。你可以根据自己的需求调整TreeGrid的配置和数据。