我试图将我的salesforce对象数据导入jqgrid，但是我能够检索数据，但是表似乎迷失了方向。
Jqgrid列标题和列数据似乎未对齐。任何解决此问题的方法？？ 我正在使用jqgrid v3.4。也尝试过v4.4，也遇到了相同的问题。当我在网格上启用多选时，就会出现此问题。
下面是我的visualforcepage代码
<apex:page controller="Getpositiondata" >
<apex:includeScript value="{!$Resource.JQGridv2}"/>
<apex:includescript value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/jquery.js')}"/>
<apex:includescript value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/jquery.jqGrid.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/css/ui.jqgrid-bootstrap-ui.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/css/ui.jqgrid-bootstrap4.css')}"/>
<apex:includescript value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/grid.locale-en.js')}"/>
<apex:includescript value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/js/minified/grid.common.js')}"/>
<apex:includescript value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/js/jquery.jqGrid.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/css/ui.jqgrid.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/themes/redmond/jquery-ui.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/themes/redmond/jquery-ui.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/themes/redmond/theme.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/plugins/jquery.tablednd.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/plugins/ui.multiselect.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JQGridv2, 'jqGrid-masterv2/jqGrid-master/plugins/jquery.contextmenu.js')}"/>
<script type="text/javascript">
var mydata1;
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.Getpositiondata.retriveposition}',
function(result, event){
//event.status determines if there is error or not
if(event.status){
for(a=0;a<result.length;a++){
console.log(result)
}
mydata1=result;
console.log(mydata1);
$("#jqGrid").jqGrid({
editurl: 'clientArray',
datatype: "local",
recreateform:true,
data: mydata1,
width: 800,
pager: '#jqGridPager',
rowNum:2,
colModel: [
{ label: 'Position_Id', name: 'PositionId__c', width:75,editable: true,key:true},
{ label: 'Name', name: 'Name', width: 75,editable: true},
{ label: 'Status', name: 'Status__c', width: 75,editable: true},
{ label: 'Roll_no', width: 75,editable: true}
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
caption: "Load jqGrid through Javascript Array",
gridview : true,
rowList:[10,20,50,100,300,1000],
multiselect:true,
gridComplete: function(){
var objRows = $("#list_accounts tr");
console.log(objRows);
var objHeader = $("#jqGrid.jqgfirstrow");
console.log(objHeader);
}
});
function DeletePost(params) {
//Here you need to define ajax call for insert records to server
console.log(params);
}
function EditComment(params) {
//Here you need to define ajax call for insert records to server
console.log(params);
var posdata=params;
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Getpositiondata.editpostiondata}',posdata.PositionId__c,posdata.Name,posdata.Status__c,function(result, event){});
}
function AddPost(params) {
//Here you need to define ajax call for insert records to server
console.log(params);
var posdata=params;
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Getpositiondata.insertposdata}',posdata.PositionId__c,posdata.Name,posdata.Status__c,function(result, event){});
/* String PositionId=posdata.Id;
String PositionName=posdata.Name;
String PositionStatus=posdata.Status;
console.log(PositionId);
console.log(PositionName);
console.log(PositionStatus);*/
}
$("#jqGrid").navGrid('#jqGridPager',
// the buttons to appear on the toolbar of the grid
{ edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: false },
// options for the Edit Dialog
{
editCaption: "Edit Post",
edittext: "Edit",
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
width: "500",
reloadAfterSubmit: true,
bottominfo: "Fields marked with (*) are required",
top: "60",
left: "5",
right: "5",
onclickSubmit: function (response, postdata) {
//call edit button
EditComment(postdata);
}
},
// options for the Add Dialog
{
addCaption: "Add Post",
addtext: "Add",
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
width: "500",
reloadAfterSubmit: true,
bottominfo: "Fields marked with (*) are required",
top: "60",
left: "5",
right: "5",
onclickSubmit: function (response, postdata) {
AddPost(postdata);
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
deleteCaption: "delete Post",
deletetext: "Delete Post",
width: "500",
reloadAfterSubmit: true,
bottominfo: "Fields marked with (*) are required",
top: "60",
left: "5",
right: "5",
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
onclickSubmit: function (data,response, postdata) {
DeletePost(response);
}
},
//for search
{
closeAfterSearch:true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
}
);
}
}
);
</script>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<apex:form >
</apex:form>
</apex:page>
