Jqgrid 편집 가능한 열 너비 내용에 따라

Question

Oleg에서 제공 한 코드를 link에 포함 시켰습니다. 내용에 따라 열 크기를 완벽하게 설정합니다. 지금 직면 한 유일한 문제는 열 값에 대해 "editble : true"를 설정하면 요소와 함께 스팬도 표시된다는 것입니다.이 스팬은 개별 셀에 추가되어 텍스트 너비를 가져옵니다 coloumn에게 표시되는 열 값을 편집 할 cells.now에 존재 :

<span class="mywrapping">text</span>

이 도와주세요.

Answer 1

당신 말이 맞습니다. 이제는 셀의 너비를 측정하기 위해 임시로만 <span>을 배치하는 것이 더 효과적 일 것이라고 생각됩니다. 이 경우에는 래핑 스팬이 셀에 머 무르지 않고 설명 된 문제가 더 이상 보이지 않습니다.

The demo은 그리드에서 "자동 폭"동작의 수정 된 버전을 제공합니다. 그것은

var autosizeColumn = function (iCol) { 
     var $this = $(this), iRow, rows, row, colWidth, 
      cm = typeof iCol === "string" ? $this.jqGrid("getColProp", iCol) : $this.jqGrid("getGridParam", "colModel")[iCol], 
      getOuterWidth = function ($elem) { 
       var $wrappingSpan, width; 

       $elem.wrapInner("<span class='mywrapping'></span>"); 
       $wrappingSpan = $elem.find(">.mywrapping"); 
       width = $wrappingSpan.outerWidth(); 
       $elem.html($wrappingSpan.html()); 

       return width; 
      }; 

     if (cm == null || cm.hidden) { 
      return; // don't change the width of hidden columns 
     } 
     colWidth = getOuterWidth($(this.grid.headers[iCol].el).find(">div")) + 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, getOuterWidth($(row.cells[iCol]))); 
      } 
     } 
     $this.jqGrid("setColWidth", iCol, colWidth); 
    }, 
    autosizeColumns = function() { 
     var $this = $(this), iCol, 
      colModel = $this.jqGrid("getGridParam", "colModel"), 
      n = $.isArray(colModel) ? colModel.length : 0; 

     for (iCol = 0; iCol < n; iCol++) { 
      autosizeColumn.call(this, iCol); 
     } 
    }; 

$grid.bind("jqGridAfterLoadComplete jqGridRemapColumns jqGridInlineAfterSaveRow", autosizeColumns); 

이 업데이트 다음 코드를 사용합니다. 또는 jQuery.jqGrid.addColumn.jshere으로 게시 한 autoWidthColumns 플러그인을 사용할 수 있습니다. 이 경우 jQuery.jqGrid.setColWidth.js 및 jQuery.jqGrid.autoWidthColumns.js을 모두 포함하고 $("#gridid").jqGrid({/*option*/}); 대신 $("#gridid").jqGrid("autoWidthColumns").jqGrid({/*option*/});을 사용하여 눈금을 작성하면됩니다.

The demo은 autoWidthColumns 플러그인을 사용합니다.