jquery easyui中treegrid用法的简单实例


当然,我可以为你提供一个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的配置和数据。