2014-09-22 30 views
0

我正在使用以下jqgrid,它在jqgrid中完美工作,但它不在mozilla中顯示33.0在chrome中顯示的內容。col寬度在jqgrid中使用,在鉻中完美工作,但在mozilla中不工作33.0版本

<script type="text/javascript" src="js/viewTestReq.js"></script> 
<script type="text/javascript" src="../js/popup/popup.js"></script> 
<script type="text/javascript" 
     src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
<script type="text/javascript" 
     src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/ui.multiselect-fixed.js"></script> 
<script type="text/javascript" 
     src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script>  
<script type="text/javascript" 
     src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src-columnChooser.js"></script> 
<script type="text/javascript" 
     src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/jQuery.jqGrid.setColWidth.js"></script> 

<link rel="stylesheet" type="text/css" 
     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"> 
<link rel="stylesheet" type="text/css" 
     href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"> 
<link rel="stylesheet" type="text/css" 
     href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css"> 

和JavaScript代碼

$("#list1").on("jqGridSortCol", function (e, sortName, iCol, sortOrder) { 
    alert("sortName=" + sortName + "\niCol=" + iCol + "\nsortOrder=" + sortOrder); 
    //$("#list1").trigger("reloadGrid"); 

    var myorder=sortOrder; 
    if (sortName === "idreleaseRequest") { 
     alert(sortOrder); 
     var ord=sortOrder; 
     alert(ord); 

    } 
}); 

$("#list1").jqGrid("GridUnload") 
$("#list1").jqGrid({ url:"./controllers/apGetTestData.php?testanzres=1&testsuite="+testsuite+"&testcase="+testcase+"&ch="+ch+"&fromdate="+fromdate+"&todate="+todate+"&mmss="+mmss, datatype: 'xml', mtype: 'GET', height: 'auto', 
    colNames:[ 'RRID', 'Release Tag','Completed Date','Result','Firm Ware','DUT','Summary','Remarks'], 
    colModel:[ 
     {name:'idreleaseRequest', index:'idreleaseRequest', width:80, sorttype: 'int'}, 
     {name:'releaseRequestTag', index:'releaseRequestTag'}, 
     {name:'DateInfo', index:'Date Info'}, 
     {name:'Result', index:'Result', sortable:false}, 
     {name:'FirmWare', index:'FirmWare', sortable:false}, 
     {name:'DUT', index:'DUT', sortable:false}, 
     {name:'Summary', index:'Summary', sortable:false, align:'left'}, 
     {name:'Remarks', index:'Total Suites', sortable:false}], 
    pager: $('#pager1'), 
    rowNum:6, 
    rowList:[6,12,18,24], 
    sortname: 'idreleaseRequest', 
    sortorder: "DESC", 
    caption:"Test Results : "+ globalData,  
    height: 'auto', 
    viewrecords: true, 
    gridview: true, 
    caption: "test", 
    rownumbers:true, 
    shrinkToFit:false, 
    hidedlg: true 
}); 
$('#list1').jqGrid("setLabel", "rn", "SNo"); 

$("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function() { 
    var $this = $(this), 
     $cells = $this.find(">tbody>tr>td"), 
     $colHeaders = $this.closest(".ui-jqgrid-view").find(">.ui-jqgrid-hdiv>.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"), 
     colModel = $this.jqGrid("getGridParam", "colModel"), 
     iCol, 
     iRow, 
     rows, 
     row, 
     n = $.isArray(colModel) ? colModel.length : 0, 
     cm, 
     colWidth, 
     idColHeadPrexif = "jqgh_" + this.id + "_"; 
    $cells.wrapInner("<span class='mywrapping'></span>"); 
    $colHeaders.wrapInner("<span class='mywrapping'></span>"); 

    for (iCol = 0; iCol < n; iCol++) { 
     cm = colModel[iCol]; 
     colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons 
     for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) { 
      row = rows[iRow]; 
      if ($(row).hasClass("jqgrow")) { 
       colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth()); 
      } 
     } 
     $this.jqGrid("setColWidth", iCol, colWidth); 
    } 
}); 

這是我使用的jqGrid整個代碼,它是在鉻可以正常使用,並且它在什麼,我希望是鉻正確顯示,但在Mozilla 33.0中,它無法正確顯示Chrome顯示的內容。請任何人都幫助我,提前謝謝。

function ShowHideColumn() { 
       $.extend(true, $.ui.multiselect, { 
       locale: { 
        addAll: 'Make all visible', 
        removeAll: 'Hide All', 
        itemsCount: 'Avlialble Columns' 
       } 
      }); 
      $.extend(true, $.jgrid.col, { 
       width: 450, 
       modal: true, 
       msel_opts: {dividerLocation: 0.5}, 
       dialog_opts: { 
        minWidth: 470, 
        show: 'blind', 
        hide: 'explode' 
       } 
      }); 
      $("#list1").jqGrid("setColProp", "rn", {hidedlg: false}); 
     $('#list1').jqGrid('columnChooser', 
     { 

      done: function(perm) { 
       if (perm) { self.jqGrid("remapColumns", perm, true); }  

     } 
     }); 


} 
+0

你用* beta *版本的Mozilla Firefox 33測試了代碼嗎? Firefox的當前發行版本是32.0.2。您在Mozilla 33中寫下了「它無法正確顯示」。究竟哪個不正確?您可以從[答案](http://stackoverflow.com/a/20030652)[原始演示](http://www.ok-soft-gmbh.com/jqGrid/ChangeColumnWidth.htm)重現問題/ 315935)?你的演示仍然使用'name'和空格'name:'Firm Ware''這是不推薦的。 – Oleg 2014-09-22 05:10:13

+0

這是鏈接圖像什麼顯示鉻[鏈接](http://s21.postimg.org/kec55xsmv/chromemain.jpg)鉻,這是圖像的鏈接什麼是在Mozilla中dislpaying [鏈接](http ://s24.postimg.org/63ix0eqdh/mozillamain.jpg)Mozilla – Sravya 2014-09-22 05:12:11

+0

您好Oleg,非常高興您的回覆,我發佈了兩張圖片,展示了他們如何看待Chrome和Mozilla。 – Sravya 2014-09-22 05:15:30

回答

1

首先:你用錯誤的HTML標記在您的演示:

<table id="list_records"><div id="perpage"></div></table> 

應固定

<table id="list_records"></table><div id="perpage"></div> 

秒你永久使用不同index值作爲name值({name:'FirmWare',index:'name'}例如)。 我強烈建議您從colModel中刪除所有index屬性。使用index值的值與列中網格斷點排序的name值不同。

第三:即使在我的電腦上安裝Mozilla Firefox 33.0 beta 5(Windows 7)我無法重現您的問題:加載後所有列的寬度似乎是正確的。如果我按Asc或Desc方向排列最後一列,我也會得到所有列的正確寬度值。

修訂:在我看來,這裏面實現基於最大列列的寬度設置的代碼包含應由線cm = colModel[iCol];後加入if (cm.hidden) { continue; }固定:

$("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function() { 
    var $this = $(this), 
     $cells = $this.find(">tbody>tr>td"), 
     $colHeaders = $this.closest(".ui-jqgrid-view").find(">.ui-jqgrid-hdiv>.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"), 
     colModel = $this.jqGrid("getGridParam", "colModel"), 
     iCol, 
     iRow, 
     rows, 
     row, 
     n = $.isArray(colModel) ? colModel.length : 0, 
     cm, 
     colWidth, 
     idColHeadPrexif = "jqgh_" + this.id + "_"; 
    $cells.wrapInner("<span class='mywrapping'></span>"); 
    $colHeaders.wrapInner("<span class='mywrapping'></span>"); 

    for (iCol = 0; iCol < n; iCol++) { 
     cm = colModel[iCol]; 
     if (cm.hidden) { 
      continue; 
     } 
     colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons 
     for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) { 
      row = rows[iRow]; 
      if ($(row).hasClass("jqgrow")) { 
       colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth()); 
      } 
     } 
     $this.jqGrid("setColWidth", iCol, colWidth); 
    } 
}); 

看到the demo

+0

嗨奧列格,我解決了我的問題,我得到另一個問題,即使用列選擇器後,列寬選擇列後,不工作,我正在寫列選擇器的單獨函數,我在上面添加代碼,請參閱並幫助我。 – Sravya 2014-09-22 10:44:33

+0

@Sravya:查看** UPDATED **部分代碼。此外,我建議您查看[demo](http://www.ok-soft-gmbh.com/jqGrid/WorkingColumnChooser_.htm)的代碼,該代碼使用固定版本的'columnChooser',您可以在[這裏]找到( http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/jQuery.jqGrid.columnChooser.js)或[這裏](https://github.com/OlegKi/jqGrid -plugins /斑點/主/ jQuery.jqGrid.columnChooser.js)。 – Oleg 2014-09-22 12:22:36

+0

嗨@奧列格,我不知道是否問這裏或不是,但我問, – Sravya 2014-09-23 06:56:30

相關問題