Grammar:
$("").
setGridParam
( //G,P要大写
{
url
:"url",
postData
:{key:"value",key:"value"}
}
) .
trigger
("
reloadGrid
");
Description:
setGridParam
:是jqGrid中的一个方法,表示设置grid的参数
url
:这是grid的参数,表示数据的获取路径。grid中的数据就是通过这个url来获取的
postData
:表示参数, 请求url时postData中的参数将会被发送到后台。
trigger
: 这也是jqGrid的方法,该方法和setGridParam配合使用可以重新加载grid,$("").setGridParam().trigger("reloadGrid");
Grammar:$("").setGridParam( //G,P要大写 { url:"url", postData:{key:"value",key:"value"} }) .trigger("reloadGrid"); Description:setGridParam:是jqGrid中的一个方法,表示设置grid的参数url:这是
在项目开发中使用封装的
jqgrid
组件时需要动态修改
URL
地址,直接修改
URL
地址
jqgrid
请求的
url
地址并不会改变,这时我们可以强行修改
jqgrid
的
url
地址,修改如下:
$("#account
Grid
").
set
Grid
Pa
ram
( //G,P要大写
url
:
Url
Service.
url
('www/1')
) .trigger("reload
Grid
");
以上这篇解决vue中无法动态修改
jqgrid
组件
url
地址的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
$("#
jqGrid
").
jqGrid
('
set
Grid
Pa
ram
',{
postData:{author:vm.qryAuthor,title:vm.qryTitle},
pa
ge:
pa
ge
}).trigger("reload
Grid
");
用postData:{author:vm.qryAuthor,title:vm.qryTitle},隔开
在 使用
set
Grid
Pa
ram
的时候 ,如果 创建时候的
grid
的
url
是使用 get 方式的 路径是话。
那么使用
set
Grid
Pa
ram
这个方法,就 要 修改
url
才有效果的,否则没有效果。
如果是 使用 postData 的方式。
set
Grid
Pa
ram
方法的 ...
使用表格自带的增删改查的功能,编辑完数据后表中数据会刷新。但是手写方法修改数据,例如模态框,修改完成后并不会在表中进行数据的刷新。
解决的办法:
在请求
发送
之后,模态框关闭之前使用
jqgrid
的reload
Grid
。
jqGrid
是一款处理表格展现的jQuery插件,支持分页、滚动
加载
、搜索、锁定、拖动等一系列对表格的常规操作。以下是最近项目中实践
jqGrid
的整理
1、引入到项目中来
jqGrid
的主页在http://www.trirand.com/blog/ ,上面提供了下载、demo、wiki等文档,都比较详尽。特别是http://www.trirand.com/
jqgrid
wiki/do...
cellEdit是
jqGrid
中的一个
参数
,默认为false
当cellEdit为false时,表格的效果是选中一行,但在IE7的model下,会出现bug,选中的行会变成空白。在IE8,9的model
下是正常显示的。
当cellEdit为true时,表格的效果是选中一个单元格,也存在bug,在IE8,9的model下选中的单元格边框会消失。在IE7的
model下正常显示。
ajax
Grid
Options
object
此项用于
设置
当表格
设置
获得数据时,ajax的全局属性,注意此项可能覆盖所有当前的ajax
设置
(包括error, complete和beforeSend 事件)。
empty
ajaxSelectOp
classes
string
此属性用于定义列的类名,当有多个类名时,用空格间隔,例如:“class1 class2”。在表格的CSS中,有一个预定义的类ui-ellipsis用于定义特定的行
empty
0,需要引用ui-lightness/jquery-ui.custom.css,ui.
jqgrid
.css以及jquery-1.9.0.min.js,
jqgrid
.local-en.js,jquery.
jqgrid
.min.js
1,除最后一个
参数
外,每个
参数
值后都必须带逗号,否则不显示结果集
2,大小写敏感,否则无效甚至不显示结果集
3,
grid
是和跟浏览器的model有关系的
get
Grid
Pa
ram
:
get
Grid
Pa
ram
("
url
"): 获取当前的AJAX的
URL
get
Grid
Pa
ram
("sortname"):排序的字段
get
Grid
Pa
ram
("sortorder"):排序的顺序
get
Grid
Pa
ram
("selrow"):得到选中行的ID
get
Grid
P
以下是将
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;
pa
dding: 10px;
font-weight: bold;
background-color: #fff;
border: 1px solid #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
o
pa
city: .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>
<meta char
set
="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,
pa
ger: "#
pa
ger"
$("#btnSearch").click(function() {
layui.use('layer', function(){
layer.load(2);
var postData = {
name: $("#txtName").val(),
price: $("#txtPrice").val()
$("#
grid
").
jqGrid
("
set
Grid
Pa
ram
", { postData: postData,
pa
ge: 1 }).trigger("reload
Grid
");
</script>
</head>
<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 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 class="layui-form-item">
<div class="layui-input-block">
<button type="button" id="btnSearch" class="layui-btn layui-btn-primary">查询</button>
</form>
<div class="layui-col-md-12">
<table id="
grid
"></table>
<div id="
pa
ger"></div>
</body>
</html>