以下是将
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
});
```
在上述例子中，`loadui` 被
设置为 `disable`，表示不使用
jqGrid 自带的 loading 样式。在 `loadComplete` 回调函数中，调用 layui 的 `layer.closeAll('loading')` 方法，以关闭 loading。
5. 在需要显示 loading 的地方，使用以下代码：
```javascript
layui.use('layer', function(){
layer.load(2);
});
```
在上述例子中，调用了 layui 的 `layer.load(2)` 方法，以显示 loading。其中，数字 2 表示 loading 样式的类型，可以根据需要进行修改。
这样就可以将
jqGrid 的
加载 loading 样式
更改为 layui 的 loading 样式了。完整代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
jqGrid with layui loading</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./
jqGrid/css/ui.
jqgrid.css">
<style>
#grid {
height: 400px;
}
</style>
<script src="./jquery/jquery-3.6.0.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./
jqGrid/js/i18n/grid.locale-cn.js"></script>
<script src="./
jqGrid/js/jquery.
jqGrid.min.js"></script>
<script>
$(function() {
$("#grid").
jqGrid({
url: "data.json",
datatype: "json",
colModel: [
{ label: "ID", name: "id", width: 75 },
{ label: "名称", name: "name", width: 150 },
{ label: "价格", name: "price", width: 150 },
{ label: "库存", name: "stock", width: 150 }
],
loadui: "disable",
loadComplete: function() {
layui.use('layer', function(){
layer.closeAll('loading');
});
},
viewrecords: true,
width: 780,
height: 250,
rowNum: 20,
rowList: [20, 50, 100],
rownumbers: true,
rownumWidth: 40,
autowidth: true,
shrinkToFit: false,
pager: "#pager"
});
$("#btnSearch").click(function() {
layui.use('layer', function(){
layer.load(2);
});
var postData = {
name: $("#txtName").val(),
price: $("#txtPrice").val()
};
$("#grid").
jqGrid("
setGridParam", { postData: postData, page: 1 }).trigger("reloadGrid");
});
});
</script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md-12">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline">
<input type="text" id="txtName" name="name" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">价格</label>
<div class="layui-input-inline">
<input type="text" id="txtPrice" name="price" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" id="btnSearch" class="layui-btn layui-btn-primary">查询</button>
</div>
</div>
</form>
</div>
<div class="layui-col-md-12">
<table id="grid"></table>
<div id="pager"></div>
</div>
</div>
</div>
</body>
</html>
```
本文介绍如何使用jqGrid的setGridParam方法设置表格参数，并通过trigger方法触发reloadGrid事件来实现表格的动态更新。重点讲解了url参数用于指定数据源路径及postData参数用以传递后台的数据。
扫一扫
1513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
