EasyUI Jquery 学习笔记 ——DataGrid（数据网格）与 Tree（树）详细版

<table id="tt" class="easyui-treegrid" style="width:700px;height:400px"
        url="get_data.php"
        title="My Family"
        iconCls="icon-ok">
    <thead>
        <tr>
            <th field="id" width="80">ID</th>
            <th field="name" width="150">Name</th>
            <th field="email" width="150">Email</th>
            <th field="bio" width="400">Bio</th>
        </tr>
    </thead>
</table>

$('#tt').treegrid({
    url: 'get_data.php',
    idField: 'id',
    treeField: 'name',
    pagination: true,
    fitColumns: true,
    singleSelect: true
});

上述代码展示了如何创建一个树形的数据网格，并且通过 url 参数指定了获取数据的后端接口。idField 和 treeField 分别指定了数据中的 ID 字段和树形结构的显示字段。pagination 开启分页功能，fitColumns 自动使列适应宽度，singleSelect 只允许单选。这是一个简化版的实现，主要用于演示如何将 EasyUI 的 TreeGrid 控件与后端数据接口结合使用。