$("#jqGrid").jqGrid({
url: "getJsonData",
async: true,
mtype: "GET",
datatype: "json",
colModel: [
{ label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'CLIENT', name: 'client', width: 60, sorttype: 'string',
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string',
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ lable:"Seq Id", hidden:true, name: 'seqId' }
],
loadComplete: function() {
var rowIds = $('#jqGrid').jqGrid('getDataIDs');
for (i = 0; i < rowIds.length; i++) {//iterate over each row
rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]);
if (rowData['testResults'] === "Pass") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass");
}
if (rowData['testResults'] == "Fail") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1");
}
}
},
onSelectRow:function(rowid){
var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid);
if (rowData['testResults'] == "Fail") {
console.log("clicked");
$(this).jqGrid("toggleSubGridRow", rowid);
}
},
subGrid: true,
subgridtype:"json",
subGridRowExpanded: function(subgrid_id, row_id) {
var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id);
console.log("rowData:::"+rowData);
var seqId=rowData['seqId'];
console.log(seqId)
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"getCommentsJsonData/"+seqId,
datatype: "json",
mtype: "GET",
height:'auto',
width: 1400,
colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'],
colModel: [
{name:"fileName",index:"fileName"},
{name:"fieldName",index:"fieldName"},
{name:"actualFieldValue",index:"actualFieldValue"},
{name:"excpectedFiledValue",index:"excpectedFiledValue"},
],
loadonce:true,
rowNum:20
});
},
loadonce: true,
//navOptions: { reloadGridOptions: { fromServer: true } },
viewrecords: true,
width: 1390,
height: 300,
rowNum: 3000,
colMenu : true,
shrinkToFit : true,
grouping: true,
hoverrows:false,
groupingView: {
groupField: ["client"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
groupOrder: ["asc"],
groupSummary: [false],
groupCollapse: false
},
scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
sortable: true,
caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid
pager: "#jqGridPager"
});
$("#jqGrid").jqGrid("hideCol", "subgrid");
// activate the build in search with multiple option
$('#jqGrid').navGrid("#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true,
},
{}, // edit options
{}, // add options
{}, // delete options
{ multipleSearch: true } // search options - define multiple search
);
$('.colmenu').on('click',function(event){
event.preventDefault();
})
// on chang select value change grouping
jQuery("#chngroup").change(function(){
var vl = $(this).val();
if(vl) {
if(vl === "clear") {
jQuery("#jqGrid").jqGrid('groupingRemove',true);
} else {
jQuery("#jqGrid").jqGrid('groupingGroupBy',vl);
}
}
});
但是当我把它改为loadonce = false,那么亚格是工作,但我分页和搜索功能不工作。的jqGrid亚格不工作时的负载一旦真正
$(document).ready(function(){
$.jgrid.styleUI.Bootstrap.base.rowTable = " table1 table-bordered";
var previousRowId = 0;
$("#jqGrid").jqGrid({
url: "getJsonData",
async: true,
mtype: "GET",
datatype: "json",
colModel: [
{ label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'CLIENT', name: 'client', width: 60, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{ label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string' ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : ['eq','gt','lt','ge','le']
}
},
{
lable:"Seq Id",
hidden:true,
name: 'seqId'
}
],
loadComplete: function() {
var rowIds = $('#jqGrid').jqGrid('getDataIDs');
for (i = 0; i < rowIds.length; i++) {//iterate over each row
rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]);
if (rowData['testResults'] === "Pass") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass");
}
if (rowData['testResults'] == "Fail") {
$('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1");
}
}
},
onSelectRow:function(rowid){
var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid);
if (rowData['testResults'] == "Fail") {
console.log("clicked");
$(this).jqGrid("toggleSubGridRow", rowid);
}
},
subGrid: true,
subgridtype:"json",
subGridRowExpanded: function(subgrid_id, row_id) {
var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id);
console.log("rowData:::"+rowData);
var seqId=rowData['seqId'];
console.log(seqId)
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"getCommentsJsonData/"+seqId,
datatype: "json",
mtype: "GET",
height:'auto',
width: 1400,
colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'],
colModel: [
{name:"fileName",index:"fileName"},
{name:"fieldName",index:"fieldName"},
{name:"actualFieldValue",index:"actualFieldValue"},
{name:"excpectedFiledValue",index:"excpectedFiledValue"},
],
loadonce:true,
rowNum:20
});
},
loadonce: true,
//navOptions: { reloadGridOptions: { fromServer: true } },
viewrecords: true,
width: 1390,
height: 300,
rowNum: 3000,
colMenu : true,
shrinkToFit : true,
grouping: true,
hoverrows:false,
groupingView: {
groupField: ["client"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
groupOrder: ["asc"],
groupSummary: [false],
groupCollapse: false
},
scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
sortable: true,
caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid
pager: "#jqGridPager"
});
$("#jqGrid").jqGrid("hideCol", "subgrid");
// activate the build in search with multiple option
$('#jqGrid').navGrid("#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true,
},
{}, // edit options
{}, // add options
{}, // delete options
{ multipleSearch: true } // search options - define multiple search
);
$('.colmenu').on('click',function(event){
event.preventDefault();
})
// on chang select value change grouping
jQuery("#chngroup").change(function(){
var vl = $(this).val();
if(vl) {
if(vl === "clear") {
jQuery("#jqGrid").jqGrid('groupingRemove',true);
} else {
jQuery("#jqGrid").jqGrid('groupingGroupBy',vl);
}
}
});
});
您应该发布您使用的JavaScript代码。很明显,每件事都可以用正确和不正确的方式使用。人们必须知道更多关于使用情况的细节。此外,它是严格建议包括** jqGrid的版本**,您可以使用(可以使用)和叉([免费jqGrid](https://github.com/free-jqgrid/jqGrid),商业[Guriddo jqGrid JS](http://guriddo.net/?page_id=103334)或旧版本的<= 4.7版本的jqGrid)。关于jqGrid的许多问题使用“free-jqgrid”标签,但使用其他产品。 – Oleg
谢谢@oleg我正在使用的版本是Guriddo jqGrid JS 5.2.1 –
您可以在文本编辑器中打开文件'jquery.jqgrid.min.js',并将注释视为文件的开头(请参阅[here]( https://github.com/tonytomov/jqGrid/blob/v5.2.1/js/grid.base.js#L4-L9))。它包含[URL](http://guriddo.net/?page_id=103334),其中包含许可协议的描述以及您必须支付的**价格。换句话说,您使用目前的**商业**产品“Guriddo jqGrid JS”。我根据MIT或GPL许可证提供的名为“free jqGrid”的替代产品**完全免费**。无论如何,你需要知道JavaScript代码来帮助你。 – Oleg