jqGrid - 調整最後一列的大小

下面是示例代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>SubGrid Real Data</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" /> 
<style> 
    .groupColumn { 
      background-color: #E3E3D7 !important; 
      border: 1px solid #F4F4e5; 
      font-weight: bold; !important; 
    } 
    .lockedColumn { 
      background-color: #E3E3D7 !important; 
      border: 1px solid #F4F4e5; 
    } 

    .ui-jqgrid .ui-jqgrid-bdiv { 
     position: relative; 
     margin: 0em; 
     padding:0; 
     /*overflow: auto;*/ 
     overflow-x:hidden; 
     overflow-y:auto; 
     text-align:left; 
    } 

    .ui-jqgrid .ui-subgrid td.subgrid-data { 
     border-top: 0 none !important; 
     border-right: 0 none !important; 
     border-bottom: 0 none !important; 
    } 
    .ui-jqgrid .ui-subgrid span.ui-icon ui-icon-carat-1-sw { 
       background-color: #FFFFFF !important; 
       background-image: none !important; 
       border: 0px 0px 1px 1px; 
    } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script> 
<script type="text/javascript"> 
    $.jgrid.no_legacy_api = true; 
    $.jgrid.useJSON = true; 
</script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script> 

<script type="text/javascript"> 
//<![CDATA[ 
    /*global $ */ 
    /*jslint browser: true, eqeq: true, plusplus: true */ 
    $(function() { 

     "use strict"; 
     var colModelData =[{"classes":"groupColumn","name":"itemName","editable":false}, 
       {"width":"100","name":"24394","editable":false}, 
       {"width":"100","name":"24390","editable":false}, 
       {"width":"100","name":"24387","editable":false}, 
       {"width":"100","name":"24386","editable":false}, 
       {"width":"100","name":"24385","editable":false}, 
       {"width":"100","name":"24383","editable":false}, 
       {"width":"100","name":"24369","editable":false}, 
       {"width":"100","name":"24306","editable":false}], 
      subColModelData =[ 
      {"classes":"groupColumn","name":"itemName","editable":false}, 
       {"width":"99","name":"24394","editable":false}, 
       {"width":"100","name":"24390","editable":false}, 
       {"width":"100","name":"24387","editable":false}, 
       {"width":"100","name":"24386","editable":false}, 
       {"width":"100","name":"24385","editable":false}, 
       {"width":"100","name":"24383","editable":false}, 
       {"width":"100","name":"24369","editable":false}, 
       {"width":"98","name":"24306","editable":false}], 
      colNamesArray = ["Name","12/21/2012","12/10/2012","12/03/2012","11/27/2012","11/15/2012","11/12/2012","11/09/2012","10/15/2012"], 
     myData = [{"id":"group1","itemName":"Miscellaneous", 
      "subGridData":[ 
      {"id":0,"itemName":"NNNNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""}, 
      {"id":1,"itemName":"EEEEEEE","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""}, 
      {"id":2,"itemName":"7777777","24369":"","24387":"","24394":"","24306":"6.3","24390":"","24385":"","24386":"","24383":""}, 
      {"id":3,"itemName":"KKKKKK","24369":"","24387":"","24394":"","24306":"68","24390":"","24385":"","24386":"","24383":""}, 
      {"id":4,"itemName":"JJJJJ","24369":"","24387":"","24394":"","24306":"160","24390":"","24385":"","24386":"","24383":""}, 
      {"id":5,"itemName":"TTTTT","24369":"","24387":"","24394":"","24306":"77","24390":"","24385":"","24386":"","24383":""},{"id":6,"itemName":"LLLLLL","24369":"","24387":"","24394":"","24306":"88","24390":"","24385":"","24386":"","24383":""},{"id":7,"itemName":"RRRRR","24369":"","24387":"","24394":"","24306":"2:!","24390":"","24385":"","24386":"","24383":""},{"id":8,"itemName":"AAAAAA","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":9,"itemName":"CCCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":10,"itemName":"HHHHH","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":11,"itemName":"OOOO","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":12,"itemName":"PPPP","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":13,"itemName":"DDDDD","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":14,"itemName":"GGGG","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":15,"itemName":"UBBBBB","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":16,"itemName":"UUUUU","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":17,"itemName":"NNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":18,"itemName":"CCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":19,"itemName":"SSSSS","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":20,"itemName":"FFFF","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":21,"itemName":" ","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":22,"itemName":"zzzzzz","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""}, 
      {"id":23,"itemName":"NLNLNLNL","24369":"XXXX","24387":"","24394":"","24306":"I want to see this data","24390":"","24385":"","24386":"","24383":""}]}]; 
     $("#list").jqGrid({ 
      datatype: "local", 
      data: myData, 
      colNames: colNamesArray, 
      colModel: colModelData, 
      gridview: true, 
      autoWidth:true, 
      //height: "100%", 
      height:"350px", 
      width: "100%", 
      caption: "Create subgrid from local data", 
      subGrid: true, 
      subGridOptions: { 
        reloadOnExpand: false 
      }, 
      subGridRowExpanded: function (subgridDivId, parentRowId) { 
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"); 
        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); 
        var data = $(this).jqGrid("getLocalRow", parentRowId); 
        $subgrid.jqGrid({ 
          datatype: "local", 
          data: $(this).jqGrid("getLocalRow", parentRowId).subGridData, 
          colModel:subColModelData, 
          autoWidth:true, 
          width: "100%", 
          height: "100%", 
          autoencode: true, 
          gridview: true, 
          rowNum: 200 

        }); 
      $subgrid.closest("div.ui-jqgrid-view") 
        .children("div.ui-jqgrid-hdiv").hide(); 
      }, 
      resizeStop: function (newWidth, index) { 
       // grid.dragEnd() 
       var widthChange = this.newWidth - this.width, 
        $theGrid = $(this.bDiv).find(">div>.ui-jqgrid-btable"), 
        $subgrids = $theGrid.find(">tbody>.ui-subgrid>.subgrid-data>.tablediv>.ui-jqgrid>.ui-jqgrid-view>.ui-jqgrid-bdiv>div>.ui-jqgrid-btable"); 
       $subgrids.each(function() { 
        var grid = this.grid; 
        // we have subgrids which have no internal subgrids 
        // it reduce the number of columns to 1 
        // we have rownumbers: true in the main grid, but not in subgrids 
        // it reduce the number of columns to additional 1 
        // so we should use (index - 2) as the column index in the subgrids 
        grid.resizing = { idx: (index - 1) }; 
        grid.headers[index - 1].newWidth = (index - 1 === 0) || (index === grid.headers.length) ? newWidth - 2 : newWidth; 
        grid.newWidth = grid.width + widthChange; 
        grid.dragEnd.call(grid); 
        $(this).jqGrid("setGridWidth", grid.newWidth, false); 
       }); 
       $theGrid.jqGrid("setGridWidth", this.newWidth, false); 
      } 

     }); 

     //$("#list").jqGrid("toggleSubGridRow", 'm1'); 
     //$("#list").jqGrid("toggleSubGridRow", 'm3'); 
    }); 

//]]> 
</script>

我有這樣下一首，上，打印，導出等網格下面幾個按鈕。我給了jqGrid一個修復高度。所以，我可以得到垂直滾動條。

我正在使用這裏提到的解決方案。：jqGrid horizontal scrollbar

enter image description here

但是，我不能重新大小最後一列。

來源

2013-02-04 Hardik Mishra

我個人發現你的問題非常有趣，我之前看到它後投了票。問題在於問題的解決方案並不簡單。一個將不得不修改源代碼。目前我沒有時間進行這種實施。可能Tony會執行此操作。您可以將相應的功能請求發佈到trirand。

，我可以推薦你的唯一的事情是在the answer描述的伎倆。這與你所需要的不一樣，但它可以改善某些場景下的用戶體驗。我親自將它用於我爲客戶製作的最高效的網格中。

不過，我可以建議你一個解決方法。取決於你使用你描述的問題的其他設置可能不像它看起來那麼困難。如果您使用gridResize用戶將能夠調整網格。增加網格大小後，用戶將能夠增加最後一列的寬度。如果你使用shrinkToFit: false或使用

$("#gridId").jqGrid("gridResize", { shrinkToFit: false });

那麼用戶將能夠調整網格的最後一列中的兩個步驟：1）調整電網2）調整網格的最後一列。

UPDATE：隨着最後一列的大小調整的問題並不存在於free jqGrid在所有的4.9版本開始（見the readme）。因此升級到當前版本的免費jqGrid（4.10.0或更高版本）可以解決調整網格最後一列的問題。

來源

2013-02-05 12:05:23 Oleg

jqGrid - 調整最後一列的大小

回答

相關問題