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

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

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

grid

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

width autowidth height shrinkToFit scrollOffset - Had the best luck with this one, but nothing repeatable.

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

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

Ответы на вопрос(8)

id.base.js на:

 return Math.round(testCell) !== 5

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

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

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

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

8c56dc8 b50b55f cf26b2c 8d7eff0 46a14ce

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

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

строка 49:

заменены:

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

с:

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

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

 17 мая 2012 г., 15:24
Добро пожаловать!
 18 мая 2012 г., 15:43
Просто хотел добавить, что это не обобщенное решение. Если это работает для вас, то отлично, но вы, возможно, захотите взглянуть на обновления Олега и более свежие ответы.

Update: Мой ответ относится к аналогичной проблеме, которая произошла в 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 игнорируется.

 14 мая 2012 г., 20:53
Также вы установили forcefit на true?
 IronicMuffin14 мая 2012 г., 22:09
Да, я установил forcefit на true согласно документам. Похоже проблемаis там наdemo page.
 14 мая 2012 г., 20:53
Что ж, это прискорбно, так как я буду в той же лодке, что и вы, если эта проблема будет существовать и после выхода Chrome 19. Можете ли вы подтвердить, что сетка имеет эту проблему на демонстрационной странице?trirand.com/blog/jqgrid/jqgrid.html
 IronicMuffin14 мая 2012 г., 20:50
К сожалению, это, похоже, не работает. Функция demo 'd успешно удаляет полосу прокрутки, но содержимое по-прежнему выходит за пределы области сетки, независимо от состоянияshrinkToFit.
 18 мая 2012 г., 15:46
Просто чтобы прояснить, проблема с jqGrid и Chrome 19; подробности см. в ответе Олега.

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 оценивается как & lt; 536,5 из-за сравнения числовых и текстовых данных, из-за которых исправление не работает?

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

 06 авг. 2012 г., 20:41
Я вижу эту ошибку в Chromium версии 20.0.1132.57 (0). В настоящее время я использую jqGrid 4.4.0. Кто-то должен протестировать Safari 6, который вышел недавно, и изменить код, чтобы сделать дрянное поведение для старых браузеров, а не пытаться взломать новые сборки, которые всегда будут происходить.
 20 июн. 2012 г., 19:19
Онлайн-демонстрация jqGrid была обновлена до последней версии jqGrid, которая включает исправление Олега. Вы все еще видите проблему на этой странице при использовании Chrome 20?
 IronicMuffin24 мая 2012 г., 15:49
Ааа, мне было интересно, что случилось. Чертовски тихие обновления.
 04 мая 2015 г., 14:48
Это комментарий, а не ответ. Кроме того, ответ Олега уже охватывает это в его "ОБНОВЛЕНИИ 4".
Решение Вопроса

воспроизвел проблему и сделал соответствующее быстрое исправление:

Предлагаю поменятьлиния кода 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

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

UPDATED: Я разместил свое предложение в Trirand какотчет об ошибке.

UPDATED 2: Если быть точным, в коде есть три места, где используются одинаковые$.browser.webkit || $.browser.safari построить как описано выше:внутри setGridWidth, внутри getOffset, внутри расчета ширины изmultiselect колонка,внутри showHideCol а такжевнутри setGridWidth, Первые три места используетisSafari переменная. Последние два места использует$.browser.webkit || $.browser.safari непосредственно. Надо заменитьin all the places код

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

в

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

Так что нужно делать это вthree places:

at the definition of the isSafari (see me original post) inside of showHideCol inside of 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() вместо.

UPDATED 3: Сегодня был опубликован jqGrid 4.3.3, который содержит исправление, которое я описал выше (cellWidth метод). Поэтому я рекомендую всем использовать новую версию.

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

 31 мая 2012 г., 22:43
@ Steve: это правильно. Это была одна из наиболее важных причин, по которой был опубликован 4.3.3. На прошлой неделе я попросил Тони сделать это, но он был занят и опубликовал 4.3.3 только сегодня. Я добавлю "ОБНОВЛЕНО 3:".
 17 мая 2012 г., 22:49
@JustinEthier: Вы правы! В текущем коде все еще есть ошибкаcellWidth функция. Я думаю, что мог бы немного улучшить код. смотреть наmy comment.
 16 мая 2012 г., 23:16
проблема в том, что моя ширина сетки полностью испорченаlink
 31 мая 2012 г., 22:37
Я обновился до 4.3.3, и это больше не проблема.
 17 мая 2012 г., 11:07
@ user648929: Я не могу отлаживать изображения! Чтобы сделать новое исправление, которое будет работать в вашем случае, мне нужно иметьthe demo which reproduce the problem, Вы должны опубликоватьJavaScript code который воспроизводит проблему.

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

 10 июн. 2013 г., 20:38
Это сработало для меня. Версия Chrome 27.0.1453.110 м.

Ваш ответ на вопрос