как предотвратить увеличение высоты формы при каждом клике в Internet Explorer 9 в jqGrid - PullRequest
Новая
       11

как предотвратить увеличение высоты формы при каждом клике в Internet Explorer 9 в jqGrid

4 голосов
/ 08 декабря 2011

В IE9 каждый щелчок в определенном месте в форме увеличивает высоту формы. Я использовал образец Олега jqGrid для создания теста.

Шаги для воспроизведения:

  1. Открыть страницу ниже в Internet Explorer 9
  2. Щелкните в первой строке текста «щелчок мышью увеличивает высоту формы», чтобы она стала желтой
  3. нажмите на кнопку просмотра записи в левом нижнем углу
  4. нажмите в тексте «щелкнув по мне, увеличивается высота формы»

Наблюдаемые:

Каждый клик увеличивает высоту формы в Internet Explorer 9. Как это исправить? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>how to center jqGrid popup modal window?</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
    <!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>-->
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function() {
            var mydata = [
                {id:"2",invdate:"2007-10-02",name:"clicking me increases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
            ];
            var grid = $("#list");
            grid.jqGrid({
                data: mydata,
                datatype: "local",
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', key: true, width:70, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
                    {name:'name',index:'name', width:100, editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: {                  wrap : "on",
                                style : "width:30px"
}
},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                pager:'#pager',
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                height: "100%",
                caption: "Custom Navigation to Top Toolbar"
            });
            grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true},
                        { beforeShowForm: function(form) {
                             // "editmodlist"
                             var dlgDiv = $("#editmod" + grid[0].id);
                             var parentDiv = dlgDiv.parent();
                             var dlgWidth = dlgDiv.width();
                             var parentWidth = parentDiv.width();
                             var dlgHeight = dlgDiv.height();
                             var parentHeight = parentDiv.height();
                             // TODO: change parentWidth and parentHeight in case of the grid
                             //       is larger as the browser window
                             dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                             dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
                          }
                        });
        });
    //]]>
    </script>
</head>

<body>

<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>

</body>
</html>

1 Ответ

3 голосов
/ 09 декабря 2011

Да, Андрус, это точно та же ошибка IE9, ссылка на которую я вам сегодня отправил: этот отчет об ошибке . Ошибка была исправлена ​​в основной сетке в jqGrid 4.0, но вы нашли еще одно место, где существует точно такая же проблема.

Для устранения проблемы предлагаю следующее. В форме просмотра, в которой происходит ошибка, мы проверяем, равно ли значение высоты формы 'auto' и выполняется ли код в IE9. В случае, если мы изменим настройку height: 'auto' на height: '100%': 

grid.jqGrid('navGrid', '#pager', {view: true}, {}, {}, {}, {},
    {
        beforeShowForm: function ($form) {
            if ($.browser.msie && $.browser.version.slice(0,3) === '9.0' &&
                    $form[0].style.height === 'auto') {
                $form[0].style.height = '100%';
            }
        }});

См. Демо демонстрирует исправление ошибки ( здесь можно проверить ошибку в IE).

ОБНОВЛЕНО : Я посмотрел в исходном коде viewGridRow и нашел более легкий обходной путь. Нужно просто использовать (см. демо ) 

{ dataheight: '100%' }

вместо значения по умолчанию dataheight: 'auto'. Кстати, я не нашел в коде jqGrid места, где будет использоваться параметр height. Кажется, теперь вместо этого следует использовать параметр dataheight.

Если я найду достаточно времени, я опубликую ошибку в Microsoft в качестве официального запроса в службу поддержки. Мой предыдущий срок действия всегда был одинаковым: MS подтвердила ошибку, подтвердив, что мой запрос был бесплатным: мне не нужно платить за запрос. С другой стороны, чтобы создать наглядный пример и описать проблему, нужно время. Поэтому я должен инвестировать свое время и «бесплатно». Кроме того, ошибка обычно не будет исправлена ​​в текущем продукте (IE9) и будет , вероятно, исправлена ​​в следующей версии IE (IE10). В такой ситуации написание отчетов об ошибках не очень привлекательно. : -)

...