jqgrid viewGridRow对话框大跨度和图标

Question

我有一个带有一些数据的JQGRID，Id喜欢在用户双击该行时在对话框中显示行数据。 做到了：

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

但我有两个问题：

1：我在其中一个字段中有一个图标，当它在对话框中显示时，它的位置搞砸了（见下图）。

2：我在最后一个字段中有一个长文本（最多150个字符）。该对话框以很长的跨度显示它，并创建一个水平滚动条。我想让它以几行或类似textarea的方式显示文本，以便创建一个垂直滚动条。 已经尝试过这个：

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

但它没有用。

我正在考虑获得“editGridRow”的相同样式，但仅限于查看。但它也没有成功。

任何人都知道如何解决这个问题？

**

编辑：

**

对不起伙计们，以下我是如何填补网格的！

<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

**

编辑：

**

解决这些问题，但在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>

FIONFOX中的ICON： ICON IN IE8：

Answer 1

“视图”表单将显示为HTML表格。关于在表格中包装文本，您可以阅读this和this旧答案。

如果是View表单，您可以使用以下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代码，则在长文本的第一行中错误的左浮动的问题将会很明显。您将在每个包含数据的单元格的开头看到 。 HTML包含空单元格&nbsp;<span>&nbsp;</span>。我不确定这是一个 将被插入两次的错误，但是在文本包装的情况下 是不好的。例如，可以使用以下代码删除它：

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));
        }
    });
}

演示显示，经过上述更改后，长文本将显示得足够好：

您不会在“状态”列中发布如何填充图标。我希望，经过上述修改后，图标看起来会更好看。如果您仍然遇到任何问题，可以检查相应单元格中的HTML代码（您可以在alert(html)的代码中包含beforeShowForm）并修改代码以便更好地显示。

你可以找到我为答案here编写的演示。您只需选择带有长文本的行来显示视图表单。

Answer 2

在这里找到关于“display：table”的答案Internet Explorer 8 bug with display: table。 它奏效了！
我在页面的开头使用<meta http-equiv="X-UA-Compatible" content="IE=edge" />并且瞧！