jqgrid viewGridRow диалог большой промежуток и значок

Question

У меня есть JQGRID с некоторыми данными, и я хотел бы показать данные строки в диалоговом окне, когда пользователи дважды щелкают строку. Сделал это с:

ondblClickRow: function(rowid) {
    jQuery(this).jqGrid('viewGridRow', rowid);
}

Но у меня было 2 проблемы с этим:

1: у меня есть значок в одном из полей, и когда он отображается в диалоговом окне, его положение испортилось (см. Рис. Ниже).

2: у меня есть длинный текст (максимум 150 символов) в последнем поле. Диалог показывает это в длинном промежутке, и это создает горизонтальную полосу прокрутки. Я хотел, чтобы текст отображался в виде пары строк или что-то вроде текстовой области, поэтому он создает вертикальную полосу прокрутки. Уже пробовал это:

afterShowForm: function(form) { form.css("width", "fixed"); }

Но это не сработало.

Я думал о том же стиле «editGridRow», но только о представлении. Но и это не сработало.

Кто-нибудь знает, как мне это решить?

**

EDIT:

**

Извините, ребята, вот как я заполняю Решётку!

<script type="text/javascript">

    $(function() {
        jQuery("#gridJson").jqGrid({ 

            url:'Consulta_Dados_Ultimos.asp', 
            datatype: "json", 
            colNames:['N°','Data','Valor','Obs','Status'], 
            colModel:[ 
                        {name:'num_solicit_vale', align:'center', sorttype:'int', width:80}, 

                        {name:'data_solicit_vale',index:'data_solicit_vale',width:95,align:'center',sorttype:'date',

                            formatter:'date',formatoptions: {srcformat:'d/m/Y H:i', newformat:'d/m/Y H:i'}}, 
                        {name:'valor',index:'valor',width:80, align:'left', formatter:'currencyFmatter'}, 


                        {name:'obs_solicit_vale', sortable:false, width:240},
                        {name:'status_solicit_vale',index:'status_solicit_vale',width:80, formatter:'iconFmatter'}
                        ],  
            rowNum:10, 
            rowList: [10,20,30],
            rownumbers:true, 
            pager: '#pager', 
            sortname: 'data_solicit_vale', 
            viewrecords: true, 
            sortorder: "desc", 
            loadonce: true,
            gridview: true,
            hidegrid: false,
            height: 230,
            autowidth: '100%',
            shrinkToFit: false,
            viewrecords: true,
            caption:"Consulta Solicitacao Vale Transporte",
            jsonReader: {
                repeatitems: false,
                root: "rows",
                total: "total",
                records: "records",
                id: "idsolicit_vale"
            },
            ondblClickRow: function(rowid) {
                jQuery(this).jqGrid('viewGridRow', rowid);
            }


        }); 

        jQuery("#gridJson").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false});
    });

Вот таблица:

    <table id="gridJson"/>
        <thead>
            <tr align="center">
              <th>NUM SOLICIT</th>
              <th>VALOR</th>
              <th>OBS</th>
              <th>STATUS</th>
              <th>DATA SOLICIT</th>
            </tr>
        </thead>
     </table>
         <div id="pager"></div>

ИЗОБРАЖЕНИЕ: http://i.stack.imgur.com/dphDB.jpg

**

EDIT:

**

Решено эти проблемы, но значок в Internet Explorer 8 выглядит странно. Вот код иконки:

    <div class="ui-state-attention ui-corner-all" style="display:table">
       <span class="ui-icon ui-icon-alert" title="Aguardando"></span>
    </div>

ЗНАЧОК В ПОЖАРНОМ ЛОТОКЕ ЗНАЧОК В IE8:

Answer 1

Форма просмотра будет отображаться в виде таблицы HTML. Об упаковке текста в таблице вы можете прочитать это и это старые ответы.

В случае формы просмотра вы можете использовать, например, следующий стиль CSS

div.ui-jqdialog-content td.form-view-data {
    white-space: normal !important;
    height: auto;
    vertical-align: middle;
    padding-top: 3px; padding-bottom: 3px
}

В случае, если форма просмотра с длинными данными может выглядеть как

Проблема с неправильным левым плавающим знаком в первой строке длинного текста будет понятна, если вы изучите соответствующий HTML-код. Вы увидите   в начале каждой ячейки с данными. Пустая ячейка содержит &nbsp;<span>&nbsp;</span> в качестве HTML. Я не уверен, является ли ошибка тем, что   будет вставлен дважды, но в случае переноса текста   не годится. Его можно удалить, например, с помощью следующего кода:

beforeShowForm: function ($form){
    $form.find("td.DataTD").each(function () {
        var html = $(this).html();  // &nbsp;<span>&nbsp;</span>
        if (html.substr(0, 6) === "&nbsp;") {
            $(this).html(html.substr(6));
        }
    });
}

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

Вы не публикуете , как вы заполняете иконки из столбца Status. Я надеюсь, что после вышеуказанных изменений значок будет выглядеть лучше. Если у вас все еще будут проблемы, вы можете просмотреть HTML-код из соответствующей ячейки (вы можете включить alert(html) в код beforeShowForm) и изменить код, чтобы он отображался лучше.

Вы можете найти демонстрацию, которую я написал для ответа здесь . Вам нужно просто выбрать строку с длинным текстом для отображения формы просмотра.

Answer 2

Нашел ответ о "display: table" здесь Ошибка Internet Explorer 8 с отображением: table . И это сработало!
Я использую <meta http-equiv="X-UA-Compatible" content="IE=edge" /> в начале страницы и вуаля!