修改 jqgrid 加载 样式
时间: 2023-10-21 18:03:50 浏览: 47
要修改 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
要修改 jqGrid 加载时显示的 loading 文本,可以按照以下步骤进行操作:
1. 在 jqGrid 的初始化代码中,添加 `loadui` 属性,并设置其值为 `block`,例如:
```javascript
$("#grid").jqGrid({
url: "data.json",
loadui: "block",
// other options
});
```
2. 在 jqGrid 的语言文件中找到 `loadtext` 属性,例如:
```javascript
$.jgrid.defaults = $.extend($.jgrid.defaults, {
loadtext: "Loading...",
// other language options
});
```
3. 修改 `loadtext` 属性的值为所需的 loading 文本,例如:
```javascript
$.jgrid.defaults = $.extend($.jgrid.defaults, {
loadtext: "Please wait...",
// other language options
});
```
4. 刷新网页,即可看到 loading 文本已经修改。
注意:如果想要在加载完成后隐藏 loading 文本,可以在 jqGrid 的初始化代码中设置 `loadComplete` 回调函数,例如:
```javascript
$("#grid").jqGrid({
url: "data.json",
loadui: "block",
loadComplete: function() {
$("#load_" + this.id).hide();
},
// other options
});
```
这样,在加载完成后,loading 文本会自动隐藏。
修改 jqgrid 加载loading 更改为layui.loading
要将 jqGrid 的加载 loading 样式更改为 layui 的 loading 样式,可以按照以下步骤进行操作:
1. 在 HTML 文件中引入 layui 的 CSS 和 JS 文件:
```html
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
```
2. 找到 jqGrid 的 CSS 文件(一般为 ui.jqgrid.css),并找到以下 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 类修改为以下代码:
```css
.ui-jqgrid .loading {
position: absolute;
top: 50%;
left: 50%;
margin-top: -18px;
margin-left: -18px;
}
```
4. 在 jqGrid 的初始化代码中,设置 `loadui` 为 `disable`,并添加 `loadComplete` 回调函数,例如:
```javascript
$("#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 样式了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)