修改 jqgrid 加载loading 更改为layui.loading 并居中加载

要将 jqGrid 中的 loading 改为 layui.loading 并居中加载，可以按照以下步骤进行操作：

1. 在页面引入 layui 的样式文件和 js 文件。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script>

2. 定义一个方法，用于显示 layui 的 loading。

function showLoading() {
  var loading = layui.layer.load(2, {
    shade: [0.3, '#333']
  });
  return loading;
}

该方法中，`layui.layer.load()` 方法用于显示 loading，参数 2 表示显示类型为转圈加文字，`shade` 参数表示遮罩层颜色和透明度。

3. 在 jqGrid 加载数据前显示 loading，加载完成后隐藏 loading。

// 在 jqGrid 加载数据前显示 loading
$("#grid").jqGrid({
  ...
  loadBeforeSend: function(xhr, settings) {
    var loading = showLoading();
    $(this).data("loading", loading); // 将 loading 对象存储在 jqGrid 中
  },
  ...
});

// 加载完成后隐藏 loading
$("#grid").jqGrid({
  ...
  loadComplete: function(data) {
    var loading = $(this).data("loading");
    layui.layer.close(loading);
  },
  ...
});

在 `loadBeforeSend` 回调函数中，调用 `showLoading` 方法显示 loading，并将 loading 对象存储在 jqGrid 中。在 `loadComplete` 回调函数中，通过 `$(this).data("loading")` 获取存储的 loading 对象，并调用 `layui.layer.close` 方法隐藏 loading。

4. 居中显示 loading。

#layui-layer2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

通过给 loading 所在的 div（id 为 `layui-layer2`）设置样式，使其在页面居中显示。

以上就是将 jqGrid 中的 loading 改为 layui.loading 并居中加载的步骤。