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>

ICON in FIREFOX: IE8中的ICON:

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

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

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

您可以在这里找到我为答案编写的演示。您只需选择包含长文本的行即可显示视图表单。