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

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

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

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

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

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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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"));
                    }
                }
            }

Ответ 4

У меня была такая же проблема. Я решил эту проблему, добавив 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")); 
        } 
    } 
}

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

Ответ 5

<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>

Ответ 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;}