Понимание поведения ширины столбца JQGrid

Question

У меня есть сетка деревьев со многими столбцами, все с указанной шириной. И мальчик, это выглядит ужасно, потому что заголовки не синхронизированы со столбцами ниже, даже если у меня есть короткие данные.

В частности, если заголовок заголовка столбца равен короче, чем ширина этой колонки, заголовок сжимается до размера текста в заголовке.

Как я могу сделать заголовок точно такого же размера, как и столбец?

Вопрос 2: Я заметил, что, хотя в документации указано, что параметр «ширина» столбцов находится в пикселях, я вижу, что на самом деле это не в пикселях, а просто по отношению к другим ширинам в сетке. Например. если все поля имеют размер 10, они будут равны по размеру, но не 10 пикселей в ширину.

Заранее благодарим за разъяснения, поскольку этот простой вопрос, кажется, имеет более глубокие корни, чем я думал.

Answer 1

Попробуйте воспроизвести параметры 'autowidth' и 'shrinkToFit' jqGrid. Например, если значение «shrinkToFit» равно true, ширина столбцов будет изменена, как если бы начальная ширина определяла процент. Подробнее here.

Answer 2

colModel: [ 
{ name: 'Email', index: 'Email', editable: true, edittype: 'custom', width: 220, 
       editoptions: { 
        custom_element: function(value, options) { return EmailAddressCustomElement(value, options); }, 
        custom_value: function(elem) { var inputs = $("input", $(elem)[0]); return inputs[0].value; } 
       } 
      }, 
      { name: 'LocationAndRole', index: 'LocationAndRole', editable: true, align: "left", edittype: "button", width: 170, 
       editoptions: { value: 'Edit Location And Role', dataEvents: [{ type: 'click', fn: function(e) { ShowUsersLocationAndRoles(e); } }, ] } 
      }, 



gridComplete: function() { 
var objRows = $("#list_accounts tr"); 
       var objHeader = $("#list_accounts .jqgfirstrow td"); 
       if (objRows.length > 1) { 
        var objFirstRowColumns = $(objRows[1]).children("td"); 
        for (i = 0; i < objFirstRowColumns.length; i++) { 
         $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
        } 
       } 
      } 

Answer 3

У меня была та же проблема. Я решил эту проблему, добавив 4 строки кода в GridComplete. эти 4 строки изменят стиль области содержимого td [модификация стиля первой строки td достаточно]. Это проблема в jqgid. Это фактически устанавливает td внутри «', но этот стиль не отражается в области содержимого td. При разработке jqgrid они предполагали, что ширина всех столбцов будет производиться путем изменения ширины tds одной строки, но они изменяются только для «», что является постоянной проблемой здесь.

ширины Набор столбцов в ColModel:

colModel: [ 
    { 
     name: 'Email', 
     index: 'Email', 
     editable: true, 
     edittype: 'custom', 
     width: 220, 
     editoptions: { 
      custom_element: function(value, options) { 
       return EmailAddressCustomElement(value, options); 
      }, 
      custom_value: function(elem) { 
       var inputs = $("input", $(elem)[0]); 
       return inputs[0].value; 
      } 
     } 
    }, 
    { 
     name: 'LocationAndRole', 
     index: 'LocationAndRole', 
     editable: true, 
     align: "left", 
     edittype: "button", 
     width: 170, 
     editoptions: { 
      value: 'Edit Location And Role', 
      dataEvents: [{ 
       type: 'click', 
       fn: function(e) { ShowUsersLocationAndRoles(e); } 
      }] 
     } 
    }, 

Добавьте приведенный ниже код в случае gridComplete:

gridComplete: function() { 
    var objRows = $("#list_accounts tr"); 
    var objHeader = $("#list_accounts .jqgfirstrow td"); 
    if (objRows.length > 1) { 
     var objFirstRowColumns = $(objRows[1]).children("td"); 
     for (i = 0; i < objFirstRowColumns.length; i++) { 
      $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
     } 
    } 
} 

Я надеюсь, что приведенный выше код поможет вам в решении этой проблемы.

Answer 4

<div id="pager"></div> 
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span> 
<script type="text/javascript"> 
    var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed']; 
    var colModelData = [ 
     {name:'invid', index:'invid', width:55}, 
     {name:'invdate', index:'invdate', resizeToTitleWidth:true}, 
     {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}]; 
    jQuery(document).ready(function() { 
     var ruler = document.getElementById('ruler'); 
     for (var i in colNamesData) { 
      if (colModelData[i].resizeToTitleWidth != true) { 
       continue; 
      } 
      // Measure the title using the ruler span 
      ruler.innerHTML = colNamesData[i]; 
      // The +26 allows for padding and to fit the sorting UI 
      var newWidth = ruler.offsetWidth + 26; 
      if (newWidth < 100) { 
       // Nothing smaller than 100 pixels 
       newWidth = 100; 
      } 
      colModelData[i].width = newWidth; 
     } 
     jQuery("#list").jqGrid({ 
      ... 
      colNames: colNamesData, 
      colModel: colModelData, 
      shrinkToFit:false, 
      ... 
    }); 
</script> 

Answer 5

Я была такая же проблема. Оказалось, что это существующие определения сайта по умолчанию, css для заполнения на ячейках таблицы. Убедитесь, что ваше дополнение согласовано между вашими т-т-тегами. Я положил DIV вокруг сетки с классом DIV, и добавил следующее мой CSS:

.grid td, .grid th { 
    padding: 1pt 1ex !important; 
} 

Answer 6

Установить ширину каждого столбца в процентах по CSS

Добавить классы CSS, как показано ниже

table.ui-jqgrid-htable thead{display:table-header-group} 
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell} 

Теперь установите ширину каждого столбца и

#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}