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

Ответ 1

Я обновил сегодня свой 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. Во всех веб-браузерах демо не имеет горизонтальных полос прокрутки и выглядит следующим образом:

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

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

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

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

to

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

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

• при определении isSafari (см. исходный пост)
• внутри showHideCol
• внутри 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.safari (в showHideCol и 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.

Ответ 2

Решение Oleg работало для меня.

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

строка 49:

заменить:

т = b.browser.webkit || b.browser.safari 0: 1

с:

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

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

Ответ 3

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

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

• 8c56dc8
• b50b55f
• cf26b2c
• 8d7eff0
• 46a14ce

Кажется, что много изменений, но когда вы смотрите на фактический код, изменения будут идти очень быстро. Лишь несколько строк исходного кода затронуты.

Ответ 4

Chrome beta 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 из-за числового сравнения с текстом, заставляя патч не действовать?

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

Ответ 5

Обновление:. My anwswer ссылается на аналогичную проблему, которая произошла в 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 на 30 пикселей увеличило бы размер столбец 3 на 30 пикселей). В этом случае нет горизонтальной прокрутки. Примечание: этот параметр несовместим с параметром shrinkToFit - i.e, если для параметра shrinkToFit установлено значение false, forceFit игнорируется.

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

 return Math.round(testCell) !== 5