2015-08-03 2 views
0

Я использую регулировочной Jqgrid ширину столбца в соответствии с содержанием предложенной в этой должности,Почему внешняя ширина не работает с строками и столбцами jqgrid?

Jqgrid Column width According to Its Content

Таким образом, после того, как loadcomplete случае jqgrid.

loadComplete : function() { 

$("#list").bind("jqGridAfterLoadComplete", function() { 
    var $this = $(this), iCol, iRow, rows, row, cm, colWidth, 
     $cells = $this.find(">tbody>tr>td"), 
     $colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"), 
     colModel = $this.jqGrid("getGridParam", "colModel"), 
     n = $.isArray(colModel) ? colModel.length : 0, 
     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); 
    } 
}); 

} 

Издание является я получаю ноль для ширины столбца в этой строке

colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth()+25; 

Мои заголовки столбцов будут иметь специальные символы таким образом, хотя я поставил autoencode: правда. Я получаю ширину столбца = 0. Нужно ли разбирать эти столбцы?

list_Code [HEAVY] [DUTY] [50] 

И таким же образом я получаю ноль для ряда outerewidth на этой линии,

colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth()); 

в результате, все ширина время моих строк быть 25.

Почему я не могу получить outwidth() в этих случаях для coulms и rows?

Может ли кто-нибудь помочь?

Однако, если я распечатать .html(), я получаю от содержания Div правильно таким образом,

var spans = $("span"); 
$(row.cells[iCol]).find(spans).html(); 

HTML DIV трассировки:

TH

<th id="list_Code [HEAVY] [DUTY] [50]" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 65px;"> 
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span> 
<div id="jqgh_list_Code [HEAVY] [DUTY] [50]" class="ui-jqgrid-sortable"> 
<span class="mywrapping">Code [HEAVY] [DUTY] [50]<span class="s-ico" style="display:none"> 
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"> 
</span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></span></div></th> 

TD
<td role="gridcell" style="text-align:left;" title="FE" aria-describedby="list_Code [HEAVY] [DUTY] [50]"><span class="mywrapping"><div style="max-height: 100px">FEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFE</div></span></td> 

Только pr oblem есть с шириной в ..

Колонка Модель Fomatter:

formatter : function(v){ return '<div style="max-height: 100px">' + v + '</div>'; }, 

Все мои имена столбцы имеют специальный characters.Is Thats является причиной? Если да, то почему ширина строки/ячейки также восстанавливается как ноль.

Я попробовал ширина/внутренний/внешний ничего не работал.

Может ли кто-нибудь пролить свет на это?

+0

Прежде всего старого пути, который я предложил первоначально ('$ cells.wrapInner (""); ...') является ** медленно ** потому что он изменяет тексты. Я бы порекомендовал вам использовать бесплатный jqGrid 4.9.1 или последний код из [GitHub] (https://github.com/free-jqgrid/jqGrid). Только если вы не можете перейти на бесплатный jqGrid, вам следует больше инвестировать в отладку. ** Можете ли вы опубликовать демоверсию, которая воспроизводит проблему? ** Какие * названия столбцов * (а не заголовки столбцов) вы используете? Если вы используете 'имя: 'Код [HEAVY] [DUTY] [50]", то вы делаете ошибку. Какую версию HTML вы используете? HTML5 или ??? – Oleg

+0

@Oleg Я использую jquery 1.8 и jqgrid 4.4.1, и я не могу выполнить миграцию, поскольку это полностью устаревший код ... есть ли другой лучший способ сделать это? – Sandy

+0

Извините, но я задал вам больше вопросов, когда вы ответили. Какие свойства 'name' вы используете в сетке? У вас есть имя: Код [HEAVY] [DUTY] [50] "' в 'colModel'? Какую версию HTML вы используете? (Как выглядит первая строка с ''?). HTML5, например, не позволяет использовать пробелы в id, а свойство 'name'' colModel' будет использоваться для создания идентификаторов (например, вы видели себя). Таким образом, вы должны изменить имена столбца, но можете использовать старые 'colNames', которые будут отображаться для пользователя. – Oleg

ответ

0

Кажется, что вы используете name: "Code [HEAVY] [DUTY] [50]" и используете тот же текст в colNames или используете lable: "Code [HEAVY] [DUTY] [50]". Вы не разместили код JavaScript, который вы используете, поэтому я должен угадать. Кроме того, неясно, какой диалект HTML вы используете на странице (который <!DOCTYPE html ...> вы используете на странице). Важно понимать, что jqGrid использует name свойство colModel для создания идентификационных элементов некоторых внутренних HTML-структур сетки. Вы видели это в HTML-фрагментах, которые вы разместили. HTML5 не позволяет использовать пробелы внутри id (см., Например, here). Вы можете задержать ограничения HTML4 для идентификаторов here.Кроме того, символы [ и ] ошибочны, по крайней мере, в случае использования очень старого jqGrid 4.4.1. Таким образом, значение name: "Code [HEAVY] [DUTY] [50]" следует за созданием неправильного HTML-кода динамически. Вы должны исправить значения, содержащие тот же текст, отображаемый для пользователя (указанный либо colNames, либо label property of colModel). Например, вы можете использовать

name: "Code_HEAVY_DUTY_50", 
label: "Code [HEAVY] [DUTY] [50]" 
Смежные вопросы