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

Question

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

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

У меня была такая же проблема. Я решил эту проблему, добавив 4 строки кода в GridComplete. эти 4 строки изменят стиль тд в области содержимого [достаточно изменения стиля тд первой строки]. Это проблема в jqgid. Который на самом деле устанавливает тд внутри '', но этот стиль не отражается в тд области содержимого. При разработке 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 5

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