jqgrid afterRedraw 详细是同步骤

当jqGrid完成重新绘制后，它会按照如下步骤触发`afterRedraw`事件：

1. 清空原有的Grid数据，重新计算数据并生成新的表格结构。

2. 更新表格的样式，包括表头、表格行、分页工具栏等。

3. 重新计算表格的宽度和高度，并根据需要重新渲染滚动条。

4. 更新表格的底部汇总行（如果有）。

5. 触发`afterRedraw`事件，允许用户在这个事件中执行自定义的操作。

需要注意的是，在`afterRedraw`事件中对表格进行修改可能会导致无限递归调用`afterRedraw`事件，从而导致死循环。因此，在修改表格时，需要慎重考虑修改的时机和方法。

相关问题

jqgrid 5.0 afterRedraw 详细使用步骤

在jqGrid 5.0版本中，使用`afterRedraw`事件的步骤如下：

1. 首先，在jqGrid的初始化代码中添加`afterRedraw`事件的处理函数，例如：

$("#grid").jqGrid({
    ...
    afterRedraw: function () {
        // 在这里执行自定义的操作
    },
    ...
});

2. 在`afterRedraw`事件处理函数中，可以通过`this`关键字来访问当前的jqGrid实例，例如：

$("#grid").jqGrid({
    ...
    afterRedraw: function () {
        var grid = this;
        // 在这里根据需要访问grid对象的属性和方法
    },
    ...
});

3. 在`afterRedraw`事件处理函数中，可以通过jqGrid提供的API来访问表格的各个部分以及数据，例如：

$("#grid").jqGrid({
    ...
    afterRedraw: function () {
        var grid = this;
        // 访问表格的表头和列信息
        var colModel = grid.getGridParam("colModel");
        var colNames = grid.getGridParam("colNames");
        // 访问表格的数据
        var data = grid.getGridParam("data");
        // 访问分页信息
        var pageInfo = grid.getGridParam("pageInfo");
        // 访问底部汇总行信息
        var footerData = grid.getGridParam("footerData");
        // 在这里根据需要处理这些数据
    },
    ...
});

需要注意的是，在`afterRedraw`事件中修改表格的数据或样式可能会导致无限递归调用`afterRedraw`事件，从而导致死循环。因此，在修改表格时，需要慎重考虑修改的时机和方法。

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 });

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