修改 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 加载样式了。

相关问题

修改 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 并居中加载的步骤。

修改 jqgrid 加载loading 更改为layui.loading

要将 jqGrid 的加载 loading 样式更改为 layui 的 loading 样式，可以按照以下步骤进行操作：

1. 在 HTML 文件中引入 layui 的 CSS 和 JS 文件：

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>

2. 找到 jqGrid 的 CSS 文件（一般为 ui.jqgrid.css），并找到以下 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;
}

3. 将以上 CSS 类修改为以下代码：

.ui-jqgrid .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -18px;
    margin-left: -18px;
}

4. 在 jqGrid 的初始化代码中，设置 `loadui` 为 `disable`，并添加 `loadComplete` 回调函数，例如：

$("#grid").jqGrid({
    url: "data.json",
    loadui: "disable",
    loadComplete: function() {
        layui.use('layer', function(){
            layer.closeAll('loading');
        });
    },
    // other options
});

5. 在 `loadComplete` 回调函数中，调用 layui 的 `layer.closeAll('loading')` 方法，以关闭 loading。

这样就可以将 jqGrid 的加载 loading 样式更改为 layui 的 loading 样式了。