Jquery 重新加载不适用于jqgrid
以下代码不会重新加载网格Jquery 重新加载不适用于jqgrid,jquery,jqgrid,Jquery,Jqgrid,以下代码不会重新加载网格 $("#myjqgrid").trigger('reloadGrid'); $(document).ready(function () { $.ajax({ type: "GET", url: "myjqgrid.json", data: "", dataType: "json", success: function(response){ var colu
$("#myjqgrid").trigger('reloadGrid');
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
如果我理解正确,它应该进行ajax调用并重新加载网格,即使数据没有更改
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
HTML
<table id="myjqgrid"></table>
<div id="Pager"></div>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
JQGrid定义
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
$(文档).ready(函数(){
$.ajax({
键入:“获取”,
url:“myjqgrid.json”,
数据:“,
数据类型:“json”,
成功:功能(响应){
var columnData=response.mypage.outerwrapper,
columnNames=response.colNames,
columnModel=response.colModel;
$(“#myjqgrid”).jqGrid({
数据类型:“jsonstring”,
datastr:columnData,
colNames:列名称,
colModel:columnModel,
jsonReader:{
root:“innerwrapper.rows”,
重复项:false
},
gridview:没错,
寻呼机:“#寻呼机”,
rowNum:21,
行列表:[21],
viewrecords:是的,
recordpos:'左',
multiboxonly:正确,
多选:对,
sortname:'ID',
巫师:“描述”,
sorttype:“文本”,
可排序:是的,
描述:“我的JQGRID”,
宽度:“1406”,
高度:“100%”,
滚动偏移量:0,
有一次:是的,
是的,
loadComplete:函数(数据){
}
});
$(“#myjqgrid”).jqGrid('navGrid','#Pager',{add:false,edit:false,del:false,position:right'});
$(“#myjqgrid”).jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$(“#myjqgrid”).trigger('reloadGrid');
}
});
});
在我看来,您刚刚遇到了loadonce:true
的问题,它在第一次加载数据后将数据类型更改为“local”。因此,数据的分页、排序和过滤在本地工作
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
如果你仔细看一下分页、排序和过滤是什么,你会发现它不仅仅是改变jqGrid的一些参数和本地重新加载网格。因此,分页、排序和过滤只在本地工作,因为网格的重新加载在本地工作
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
如果需要从服务器刷新网格数据,只需将数据类型
重置为其初始值('json'或'xml'),然后重新加载网格
$("#myjqgrid").trigger('reloadGrid');
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});
有关代码示例,请参见和。现在我明白了。我在第1页尝试重新加载网格,但它似乎什么也没做。所以,我感到困惑。我试着处理更多的数据。在第3页,单击“重新加载”实际上会重新加载网格并转到第1页。令人惊叹的。非常感谢。你能帮我做这个吗?我在这里节省了很多时间。非常感谢奥列格!
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
$("#myjqgrid").trigger('reloadGrid');
}
});
});