it-roy-ru.com

jqGrid неправильно отображает в Chrome / Chrome Frame

В настоящее время используется Chrome v19.0.1084.46 (официальная сборка 135956), бета-версия jqGrid 4.3.2 (последняя версия)

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

grid

Я возился со следующими атрибутами в jqGrid, чтобы попытаться это исправить:

  • width
  • autowidth
  • height
  • shrinkToFit
  • scrollOffset - Удачи с этим, но ничего не повторилось.

Я также сократил только базовую сетку CSS, думая, что это могло быть правилом, которое я ввел ... без удачи.

Кто-нибудь еще сталкивался с этим и/или нашел решение для этого? Помощь очень ценится.

51
IronicMuffin

Сегодня я обновил свой Chrome до версии 19, воспроизвел проблему и сделал соответствующее быстрое и грязное исправление:

Предлагаю изменить строку кода jqGrid

isSafari = $.browser.webkit || $.browser.safari ? true : false;

к следующему

isSafari = ($.browser.webkit || $.browser.safari) &&
    parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19

демо использовать исправление. Исправленную версию jquery.jqGrid.src.js, которую я использовал в демоверсии, вы можете получить здесь .

Я протестировал его в IE9 (v9.0.8112.16421), IE8 (8.0.6001.18702CO), Chrome 18.0.125.168, Chrome 19.0.1084.46, Safari 5.1.7 (7534.57. 2), Firefox 12, Opera 11.62. Во всех веб-браузерах демо не имеет горизонтальных полос прокрутки и выглядит следующим образом:

enter image description here

В будущем было бы лучше изменить расчет ширины сетки на более глубокий, чтобы не иметь прямой зависимости от номера версии или веб-браузера. Я надеюсь, что это будет возможно, если в некоторых местах jqGrid использовать больше методов jQuery $. Width и $. ExternalWidth . В любом случае, я надеюсь, что описанное выше исправление будет полезно для многих пользователей jqGrid.

ОБНОВЛЕНО: я разместил свое предложение в trirand как отчет об ошибке .

ОБНОВЛЕНО 2 : Точнее, в коде есть три места, в которых используется та же конструкция $.browser.webkit || $.browser.safari, как описано выше: внутри setGridWidth =, внутри getOffset , внутри вычисления ширины столбца multiselect, внутри showHideCol и внутри setGridWidth . Первые три места используют переменную isSafari. Последние два места используют $.browser.webkit || $.browser.safari напрямую. Надо заменить во всех местах код

$.browser.webkit||$.browser.safari

в

($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5

Так что нужно сделать это в трех местах :

  1. в определении isSafari (см. меня оригинальный пост)
  2. внутри showHideCol
  3. внутри setGridWidth

Вы можете скачать исправленную версию jquery.jqGrid.src со всеми исправлениями здесь . Вы можете внести те же изменения в код jquery.jqGrid.src самостоятельно, если вам придется использовать старую версию jqGrid. Для создания минимизированной версии для производства вы можете использовать любой минимизатор, который вы хорошо знаете. Я использую например Microsoft Ajax Minifier 4.0. Просто установите его и выполните

AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js

В результате вы получите jquery.jqGrid.min-fixed3.js , который будет еще меньше, чем оригинальный jquery.jqGrid.min.js. Даже если вы добавите заголовок комментария в файл (см. измененный файл ), файл все равно будет меньше оригинальной версии jquery.jqGrid.min.js.

После некоторых итераций моих отчет об ошибках и улучшения есть еще одна версия исправления, в которой был представлен метод cellWidth:

cellWidth : function () {
    var $testDiv = $("<div class='ui-jqgrid' style='left:10000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
        testCell = $testDiv.appendTo("body")
            .find("td")
            .width();
        $testDiv.remove();
        return testCell !== 5;
}

Смотрите здесь . Если вы предпочитаете следовать тому же пути, вы можете сделать это тоже. Во всех случаях, когда используются isSafari или $.browser.webkit || $.browser.safarishowHideCol и setGridWidth), вы можете использовать $.jgrid.cellWidth() взамен.

ОБНОВЛЕНО 3 : сегодня была опубликована jqGrid 4.3.3, которая содержит исправление, которое я описал выше (метод cellWidth). Поэтому я рекомендую всем использовать новую версию.

ОБНОВЛЕНО 4: Google Chrome 20 использует WebKit 536.11. Таким образом, каждый, кто не может использовать последнюю версию jqGrid с фиксированным вычислением ширины, должен использовать parseFloat($.browser.version)<536.11 (или некоторое закрытие) вместо parseFloat($.browser.version)<536.5, описанной в начале ответа. Google Chrome 23 WebKit использует 537.11.

63
Oleg

Решение Олега сработало для меня.

Я только что отредактировал мин версию

строка 49:

заменены:

?! Т = b.browser.webkit || b.browser.safari 0: 1

с:

м = (b.browser.webkit || b.browser.safari) && parseFloat (b.browser.version) <536,5 0:! 1

Спасибо за помощь!

3
user1399332

Олег ответ правильный. Однако, если вы используете более старую версию jqGrid и хотите применить эти исправления, может быть проще принять изменения непосредственно из diff-файлов на Github. Я успешно проверил это с помощью jqGrid 4.0.0, так что предположительно он будет работать на любой из 4.x серий.

Просто начните с первого сравнения и примените каждый из них по порядку. Это добавит функцию cellWidth и внесет все необходимые изменения в файл jquery.jqGrid.src.js. Затем вы можете использовать компилятор Google Closure, если вы хотите создать уменьшенную версию:

Вроде много изменений, но когда вы посмотрите на реальный код, изменения пойдут очень быстро. Только несколько строк исходного текста затронуты.

3
Justin Ethier

Бета-версия Chrome 20.0.1132.11 вышла и сообщает следующее:

User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11

Я предполагаю, что 536.11 оценивается как <536.5 из-за сравнения числовых и текстовых данных, из-за которого исправление не работает?

Пожалуйста помоги!

3
johnmac

Обновление: Мой ответ относится к аналогичной проблеме, которая произошла в Firefox несколько месяцев назад, и я надеялся, что она будет работать для Chrome 19, но в настоящее время ответ Олега правильный подход.

У меня была похожая проблема несколько месяцев назад с FF, и я использовал опцию ForceFit, которая должна полностью отключить HScroll, но, как вы упомянули, я все равно получу его, поэтому я просто отключил HScroll для своих сеток принудительного набора. Через несколько обновлений FF это прекратилось, и в настоящее время все мои сетки работают нормально в Chrome 18, так что, надеюсь, это не будет проблемой, когда выйдет 19.

//remove HScroll
function jqGridDisableHScroll(gridid) {
    //if columns are force fit all columns will always fit on screen.
    if ($('#' + gridid).jqGrid('getGridParam', 'forceFit')) {
        var gridview = $('#gview_' + gridid);
        $('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
    }
}

Force Fit

При значении true и изменении ширины столбца размер соседнего столбца (справа) изменится, так что общая ширина сетки будет сохранена (например, уменьшение ширины столбца 2 на 30px приведет к увеличению размера столбца 3 на 30px). В этом случае нет горизонтальной полосы прокрутки. Примечание: эта опция не совместима с опцией shrinkToFit - т.е. если для shrinkToFit установлено значение false, forceFit игнорируется.

1
Chad Ferguson

Мы используем jgGrid 4.3.3, и cellWidth не решили проблему ... для ее решения я добавил строку return parseInt(testCell) !== 5; вместо return testCell !== 5; в методе cellWidth. Может быть, это не лучшее решение, но оно работает для нас :)

1
Alex Dn

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

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

1
Nadir Muzaffar

В jQGrid 4.5.2 с Chrome 59.0.3071.115 я изменил функцию cellWidth в grid.base.js на:

 return Math.round(testCell) !== 5
0
alsco77