jqgrid treetable 详细使用步骤

以下是 jqGrid treetable 的详细使用步骤：

1. 引入依赖文件

在页面中引入 jQuery、jqGrid 的 JavaScript 和 CSS 文件。你可以从官网下载最新版本的 jqGrid，也可以使用 CDN 引入。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqgrid/4.7.1/css/ui.jqgrid.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqgrid/4.7.1/js/i18n/grid.locale-cn.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqgrid/4.7.1/js/jquery.jqGrid.min.js"></script>

2. 创建表格容器

在页面中创建一个 div 元素，它将被用于呈现 jqGrid。你可以设置该元素的 ID，以便在 JavaScript 中引用。

<div id="grid"></div>

3. 初始化 jqGrid

在 JavaScript 中初始化 jqGrid。你需要设置以下属性：

- url：指向你的接口地址。
- datatype：设置为“json”。
- mtype：设置为“GET”。
- colNames：设置表格的列名，应该包含你想要显示的所有列。
- colModel：设置每列的属性，包括名称、宽度、对齐方式等。
- rowNum：设置每页显示的行数。
- rowList：设置可供选择的每页行数。
- pager：设置分页控件所在的元素 ID。
- sortname：设置默认排序的列名。
- sortorder：设置默认排序的顺序。
- treeGrid：设置为“true”，表示这是一个 treetable。
- treeGridModel：设置为“adjacency”。
- ExpandColumn：设置展开按钮所在的列。
- ExpandColClick：设置为“true”，表示单击展开按钮时展开/折叠行。
- treeIcons：设置树形图标的样式。

以下是一个示例代码：

$("#grid").jqGrid({
    url: "api/departments",
    datatype: "json",
    mtype: "GET",
    colNames: ["部门名称", "部门编号", "上级部门", "负责人"],
    colModel: [
        { name: "Name", width: 200 },
        { name: "Code", width: 80 },
        { name: "ParentName", width: 200 },
        { name: "Manager", width: 100 }
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: "#gridPager",
    sortname: "Code",
    sortorder: "asc",
    treeGrid: true,
    treeGridModel: "adjacency",
    ExpandColumn: "Name",
    ExpandColClick: true,
    treeIcons: {
        plus: "ui-icon-plus",
        minus: "ui-icon-minus",
        leaf: "ui-icon-document-b"
    }
});

4. 获取数据

在服务器端创建一个返回 JSON 数据的接口，该接口应该返回一个符合 treetable 格式的 JSON 数据，包含所有部门的信息。

你可以使用 C# 的 List 集合表示所有部门，然后将其转换为 JSON 数据返回给前端。具体的转换方法可以参考前面的回答。

5. 显示表格

在页面中添加分页控件，并在 JavaScript 中调用表格的显示方法。

以下是一个示例代码：

<div id="grid"></div>
<div id="gridPager"></div>

$("#grid").jqGrid("navGrid", "#gridPager", { edit: false, add: false, del: false });

通过以上步骤，你就可以在页面中显示一个带有树形结构的表格了。注意，以上代码仅供参考，实际实现时可能需要根据具体情况进行修改。