jEasyUI 创建复杂树形网格学习笔记
jEasyUI 是基于 jQuery 的一款简单易用的前端 UI 框架，它提供了各种实用的组件，方便我们快速构建出美观实用的页面。其中，树形网格是一种常见的需求，在 jEasyUI 中也可以很便捷地实现。
实例演示
先看一下我们要创建的树形网格的效果图：
在这个树形网格中，每个节点下面可以展开出多个子节点，同时在最后一级节点中还嵌套了一个表格，方便用户查看和编辑数据。现在我们来一步一步地介绍如何使用 jEasyUI 来创建这样一个树形网格。
步骤
- 引入必要的文件
首先需要在页面中引入 jEasyUI 的相关文件，包括 CSS 和 JavaScript 文件。可以通过以下方式引入：
htmlCopy Code<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.4/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.9.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.9.4/jquery.easyui.min.js"></script>
- 创建树形网格的 HTML 结构
我们需要创建一个空的 <table> 元素，然后通过调用 jEasyUI 提供的 treegrid 方法将其转换为树形网格。具体的 HTML 代码如下：
htmlCopy Code<table id="treegrid"></table>
- 初始化树形网格
在 JavaScript 中，可以通过以下方式来初始化树形网格：
javascriptCopy Code$('#treegrid').treegrid({
url: 'data.json',
idField: 'id',
treeField: 'name',
columns:[[
{field:'name',title:'名称',width:180},
{field:'code',title:'编码',width:80},
{field:'price',title:'价格',width:100},
{field:'quantity',title:'数量',width:100},
{field:'amount',title:'金额',width:100}
]]
});
其中，url 表示从哪个 URL 加载数据，idField 表示数据中节点的 ID 字段名，treeField 表示数据中节点的名称字段名，columns 是一个数组，包含每一列的信息。这里我们定义了五列，分别是名称、编码、价格、数量和金额。
- 加载数据
在此之前，需要先创建一个 JSON 文件，用来存储树形网格的数据。JSON 文件的格式如下所示：
jsonCopy Code[
{
"id":1,
"name":"父节点1",
"code":"P01",
"children":[
{
"id":11,
"name":"子节点1-1",
"code":"C01-1",
"price":10,
"quantity":100,
"amount":1000
},
{
"id":12,
"name":"子节点1-2",
"code":"C01-2",
"price":20,
"quantity":50,
"amount":1000
}
]
},
{
"id":2,
"name":"父节点2",
"code":"P02",
"children":[
{
"id":21,
"name":"子节点2-1",
"code":"C02-1",
"price":30,
"quantity":200,
"amount":6000
},
{
"id":22,
"name":"子节点2-2",
"code":"C02-2",
"price":40,
"quantity":10,
"amount":400
},
{
"id":23,
"name":"子节点2-3",
"code":"C02-3",
"price":30,
"quantity":30,
"amount":900
}
]
}
]
最后，在 treegrid 的初始化代码中使用 url 属性来指定加载这个 JSON 文件：
javascriptCopy Code$('#treegrid').treegrid({
url: 'data.json',
// ...
});
现在，我们已经完成了一个简单的树形网格的创建和数据加载。如果需要增加表格嵌套、展开/折叠等效果，还需要借助 jEasyUI 提供的其他 API 调用进行实现。
参考资料：