Столбец jqGrid не выровнен по заголовкам столбцов

Question

Этот вопрос был задан здесь. Столбец jqGrid не выровнен по заголовкам столбцов

Но стиль рамки с правым цветом, похоже, не работает для меня.

Я использую jqGrid 3.8 и IE 8

Это мои настройки для jqGrid

shrinkToFit:true,
colModel :[
  {name:'leid', index:'leid', width:70, label:'LEID'},
  {name:'cdr', index:'cdr', width:40, label:'CDR'},
  {name:'name', index:'name', width:160, label:'Name'},
  {name:'country', index:'country', width:98, label:'Country'},
  {name:'fc', index:'fc', width:50, label:'FC'},
  {name:'bslaMe', index:'bslaMe', width:65, label:'BSLA/ME'},
  {name:'business', index:'business', width:130, label:'Business'},
  {name:'amtFc', index:'amtFc', width:98, label:'Amt(FC)', align:'right',
   formatter:'currency', formatoptions:{decimalSeparator:".",
   thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"",
   defaultValue: '0'} },
  {name:'amtUsd', index:'amtUsd', width:98, label:'Amt(Cur)', align:'right',
   formatter:'currency', formatoptions:{decimalSeparator:".",
   thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"",
   defaultValue: '0'} },
  {name:'cashPoolHeader', index:'cashPoolHeader', width:120,
   label:'Cash Pool Header'},
  {name:'cashPoolCDR', index:'cashPoolCDR', width:60, label:'CP CDR'},
  {name:'cashPoolName', index:'cashPoolName', width:160, label:'Cash Pool Name'}
],

Есть мысли?

Answer 1

У меня была такая же проблема, я решил эту проблему, добавив 4 строки кода в gridComplete, эти 4 строки изменят стиль td области содержимого [первая строка td стиль модификации достаточно].

Это проблема в jqgid, который на самом деле устанавливает td внутри <thead>, но этот стиль не отражается в td области содержимого. При разработке jqgrid они предполагали, что на всю ширину столбцов будет влиять изменение ширины td с одной строки, но они изменились только для <thead>, что является постоянной проблемой.

Установить ширину столбца в 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 2

Я знаю, что он очень старый, но я столкнулся с той же проблемой сегодня (версия 4.5.1), когда работал над устаревшим приложением, и решение @ Zecarro помогло мне. Мне пришлось изменить скрипт, чтобы установить ширину столбца вместо ширины заголовка, чтобы он работал.

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
var width= col.outerWidth();

var headerWidth = $(objHeader [i]).width();
col.width(headerWidth);
}

Answer 3

Код выше не работал для меня

Я немного изменил это: Работает нормально с 4.6.0

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
   var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
   var width= col.outerWidth();
   $(objHeader[i]).css("width", width);
}

Answer 4

Посмотрите на мой старый ответ , который описывает, как изменить выравнивание заголовка столбца.

Если это не то, что вы хотите, тогда вы должны опубликовать картинку, которая показывает, как выглядит сетка, и добавить в свой вопрос полный код вашей сетки, включая HTML-код, информацию о версии jqGrid, которую вы используете, и тестовые данные , Так что все, что нужно, чтобы воспроизвести вашу проблему.