jQuery EasyUI Tree Menu -Create Basic TreeGrid

The TreeGrid component inherits from DataGrid, but allows parent/child node relationships between rows. Many properties are inherited from DataGrid and can be used in TreeGrid. To use TreeGrid, the user must define the 'treeField' attribute to specify which field is used as the tree node.

This tutorial will show you how to use the TreeGrid component to set up a folder browser.

Create TreeGrid

    <table id="test" title="Folder Browser" class="easyui-treegrid" style="width:400px;height:300px"
            url="data/treegrid_data.json"
            rownumbers="true"
            idField="id" treeField="name">
        <thead>
            <tr>
                <th field="name" width="160">Name</th>
                <th field="size" width="60" align="right">Size</th>
                <th field="date" width="100">Modified Date</th>
            </tr>
        </thead>
    </table>

Download jQuery EasyUI Examples

jeasyui-tree-treegrid1.zip