EasyUI jQuery treegrid Widget

EasyUI jQuery treegrid Widget是一个jQuery插件，用于在Web页面中显示层次结构的数据，它提供了类似于列表格的界面，同时支持树形展开和折叠。使用treegrid Widget可以轻松地显示一组层次结构的数据，并提供一种易于用户导航、搜索和排序数据的方式。下面详细讲解该插件的使用攻略。

安装

在使用EasyUI jQuery treegrid Widget之前，需要将EasyUI框架添加到页面中。可以从EasyUI官方网站（https://www.jeasyui.com/）下载EasyUI框架，或者使用CDN引入。如果使用CDN引入可以使用以下代码：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.22/themes/default/easyui.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.9.22/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.9.22/jquery.easyui.min.js"></script>

然后，通过以下代码引入treegrid插件：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui-treegrid/dist/jquery.treegrid.min.js"></script>

使用方法

基本用法

要使用EasyUI jQuery treegrid Widget，需要先在页面中使用HTML表格元素。表格元素可以在页面中静态定义，也可以通过AJAX从服务器动态获取。以下是一个简单的HTML表格示例：

<table id="mytree">
    <thead>
        <tr>
            <th field="name">Name</th>
            <th field="code">Code</th>
            <th field="price">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr id="t1" data-tree-id="t1">
            <td>Parent 1</td>
            <td>001</td>
            <td>$20.00</td>
        </tr>
        <tr id="t2" data-tree-id="t2" data-tree-parent-id="t1">
            <td>Child 1-1</td>
            <td>002</td>
            <td>$10.00</td>
        </tr>
        <tr id="t3" data-tree-id="t3" data-tree-parent-id="t1">
            <td>Child 1-2</td>
            <td>003</td>
            <td>$10.00</td>
        </tr>
        <tr id="t4" data-tree-id="t4">
            <td>Parent 2</td>
            <td>004</td>
            <td>$30.00</td>
        </tr>
        <tr id="t5" data-tree-id="t5" data-tree-parent-id="t4">
            <td>Child 2-1</td>
            <td>005</td>
            <td>$10.00</td>
        </tr>
        <tr id="t6" data-tree-id="t6" data-tree-parent-id="t4">
            <td>Child 2-2</td>
            <td>006</td>
            <td>$20.00</td>
        </tr>
    </tbody>
</table>

这个表格有三个列，分别是Name、Code和Price。前两个行是父节点，后面的4个行是子节点。每一行都有一个唯一的ID和一个指向父节点的data-tree-parent-id属性。使用这些属性，可以创建一个层次结构而不是简单的一维表格。

接下来，在页面中添加以下代码创建treegrid组件：

$('#mytree').treegrid({
    idField:'id',
    treeField:'name',
});

在这个例子中，mytree是表格的ID。treegrid()函数将EasyUI jQuery treegrid Widget应用于这个表格。idField和treeField选项是必需的。idField指定每个行元素的唯一ID属性的名称，而treeField指定将作为“节点”呈现的列的字段。此外，还可以使用其他选项指定如何呈现数据、如何将数据加载到组件中，等等。

现在打开页面，可以看到treegrid已经在页面中生成。

持久化URL

EasyUI jQuery treegrid Widget支持从URL中加载数据。当用户向下滚动到一个新的部分时，treegrid自动从持久化URL加载数据。以下示例演示了如何从服务器加载数据：

$('#mytree').treegrid({
    url: 'server_data.php',
    idField:'id',
    treeField:'name',
});

在这个例子中，url选项指定从哪个URL加载数据。服务器返回的必须是JSON格式的数据，在返回数据中需要包含id属性和treeField属性指定的列。从服务器加载数据通常比在页面中静态定义数据更灵活，特别是在数据比较大的时候。如果数据来自于客户端本地，则可以使用loadData()方法手动加载数据。

更多示例

EasyUI官方网站（https://www.jeasyui.com/tutorial/treegrid/treegrid.html）提供了许多treegrid的示例和用法，这里提供两个示例来帮助理解treegrid的一些高级用法。

TreeGrid with Checkbox

以下示例演示了如何将某列设置为可以勾选。

<table id="tg" class="easyui-treegrid" style="width:600px;height:250px"
        data-options="url:'treegrid_data1.json',rownumbers:true,singleSelect:true,
            fitColumns:true,showFooter:true">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'id',width:80">ID</th>
            <th data-options="field:'name',width:180">Task Name</th>
            <th data-options="field:'priority',width:80,align:'right'">Priority</th>
            <th data-options="field:'begin',width:120">Begin Date</th>
            <th data-options="field:'end',width:120">End Date</th>
        </tr>
    </thead>
</table>

Drag and Drop

以下示例演示如何启用拖放功能来编辑treegrid：

<table class="easyui-treegrid" id="tt" data-options="
    url:'treegrid_data2.json',
    idField:'id',
    treeField:'name',
    rownumbers:true,
    animate:true,
    collapsible:true,
    fitColumns:true,
    toolbar:'#tb',
    onBeforeDrag:function(row){
        return true;
    },
    onStartDrag:function(row){
        console.log('start drag');
    },
    onDrag:function(row){
        console.log('dragging');
    },
    onStopDrag:function(row){
        console.log('stop drag');
    },
    onBeforeDrop:function(targetRow, sourceRow, point){
        return true;
    },
    onDrop:function(targetRow, sourceRow, point){
        console.log(targetRow);
        console.log(sourceRow);
        console.log(point);
    }
">
    <thead>
        <tr>
            <th data-options="field:'name',width:'80'">Name</th>
            <th data-options="field:'status',width:'40',align:'center'">Status</th>
            <th data-options="field:'creator',width:'80'">Creator</th>
            <th data-options="field:'creat_time',width:'120',sortable:true,order:'desc'">Create Time</th>
            <th field="location_id" width="60" align="center" formatter="locationFormatter">Location</th>
        </tr>
    </thead>
</table>

在这个示例中，启用了拖放功能，以允许用户通过鼠标移动节点来编辑treegrid。在拖放过程中，调用了onBeforeDrag、onStartDrag、onDrag、onStopDrag、onBeforeDrop和onDrop函数来处理各种事件。可以通过这些事件来处理节点的拖放和重新排列。

以上就是EasyUI jQuery treegrid Widget的基本用法和两条示例说明的详细讲解。通过这样的了解和实践，也可以更好地发挥该插件的作用。