修改 jqgrid 加载loading 更改为layui.loading 并在表格居中显示

首先，需要在页面引入layui的样式和JS文件，然后在jqgrid的loadComplete事件中使用layui的loading组件来实现loading效果，具体代码如下：

loadComplete: function(data) {
  // 隐藏jqgrid自带的loading
  $("#myGrid").jqGrid("hideLoading");

  // 在表格中央显示layui的loading
  var grid = $("#myGrid")[0];
  var parentWidth = $(grid).closest(".ui-jqgrid").parent().width();
  var parentHeight = $(grid).closest(".ui-jqgrid").parent().height();
  layui.use('layer', function() {
    var layer = layui.layer;
    layer.load(1, {shade: [0.5, '#fff'], offset: [parentHeight/2-40, parentWidth/2-40]});
  });
}

这样就可以在jqgrid中使用layui的loading组件，并在表格中央显示了。

相关问题

修改 jqgrid 加载loading

要修改 jqGrid 加载时显示的 loading 文本，可以按照以下步骤进行操作：

1. 在 jqGrid 的初始化代码中，添加 `loadui` 属性，并设置其值为 `block`，例如：

$("#grid").jqGrid({
    url: "data.json",
    loadui: "block",
    // other options
});

2. 在 jqGrid 的语言文件中找到 `loadtext` 属性，例如：

$.jgrid.defaults = $.extend($.jgrid.defaults, {
    loadtext: "Loading...",
    // other language options
});

3. 修改 `loadtext` 属性的值为所需的 loading 文本，例如：

$.jgrid.defaults = $.extend($.jgrid.defaults, {
    loadtext: "Please wait...",
    // other language options
});

4. 刷新网页，即可看到 loading 文本已经修改。

注意：如果想要在加载完成后隐藏 loading 文本，可以在 jqGrid 的初始化代码中设置 `loadComplete` 回调函数，例如：

$("#grid").jqGrid({
    url: "data.json",
    loadui: "block",
    loadComplete: function() {
        $("#load_" + this.id).hide();
    },
    // other options
});

这样，在加载完成后，loading 文本会自动隐藏。

修改 jqgrid 加载 样式

要修改 jqGrid 加载样式，可以按照以下步骤进行操作：

1. 打开 jqGrid 的 CSS 文件，一般为 ui.jqgrid.css。
2. 找到以下 CSS 类：

.ui-jqgrid .loading {
position: absolute;
top: 45%;
left: 45%;
margin-top: -15px;
margin-left: -50px;
padding: 10px;
font-weight: bold;
background-color: #fff;
border: 1px solid #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
opacity: .8;
}

这是 jqGrid 加载时显示的样式。

3. 修改以上 CSS 类的属性，例如修改背景色为红色：

.ui-jqgrid .loading {
background-color: #ff0000;
}

4. 将修改后的 CSS 文件应用到网页中，可以通过在 HTML 文件中添加以下代码来引入 CSS 文件：

<link rel="stylesheet" href="path/to/ui.jqgrid.css" />

这样就可以修改 jqGrid 加载样式了。