JQGrid列标题似乎与列数据不对齐

问题描述

我试图将我的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',{ label: 'Roll_no',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,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}',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",postdata) {
            AddPost(postdata);
        },errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },// options for the Delete Dailog
                {
                    deleteCaption: "delete Post",deletetext: "Delete Post",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>

JQGrid error snapshot

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）