jEasyUI 树形网格动态加载学习笔记

什么是 jEasyUI？

jEasyUI 是基于 jQuery 的 UI 插件集合，可以快速地构建出美观、易用、高效的界面效果。它包含了多种基础组件，如表格、树形结构、弹出窗口、对话框等，还支持主题定制和插件扩展。

为什么要使用树形网格？

树形网格在数据呈现上有很大的优势，它们可以同时显示父节点和子节点的信息，方便用户查看和操作。同时，当数据量较大时，树形网格可以进行分页或者动态加载，以避免页面卡顿和加载时间过长的问题。

如何实现树形网格动态加载？

jEasyUI 提供了 treegrid 组件来实现树形网格，它使用起来非常简单，在 HTML 页面中引入相应的 CSS 和 JS 文件后，就可以直接使用该组件了。

动态加载则需要使用 Ajax 请求来获取数据，然后通过 treegrid 的 append 方法将数据添加到树形网格中。以下是一个示例：

htmlCopy Code
<table id="dg"></table>

<script>
  $('#dg').treegrid({
    url: '/get_data',
    idField: 'id',
    treeField: 'name',
    loadMsg: '正在加载数据...',
    columns: [[
      {field: 'name', title: '名称', width: 200},
      {field: 'price', title: '价格', width: 100},
      {field: 'num', title: '数量', width: 100},
    ]],
    onBeforeExpand: function(row) {
      if (!row.children) {
        $.ajax({
          url: '/get_children_data',
          data: {id: row.id},
          dataType: 'json',
          success: function(data) {
            $('#dg').treegrid('append', {
              parent: row.id,
              data: data
            });
            row.children = data;
          }
        });
      }
    }
  });
</script>

在上面的示例中，treegrid 的 onBeforeExpand 事件会在节点展开前触发，这里我们使用 Ajax 请求来获取子节点数据，并通过 append 方法添加到树形网格中。

示例

为了更好地理解树形网格动态加载，下面提供一个实际的示例。

在本示例中，我们将创建一个包含商品分类和商品信息的树形网格，其中商品分类是树形结构，而商品信息则是分页加载的。具体实现过程请参考代码：https://github.com/binjie09/treegrid-demo