jqgrid视图行对话框大的span和图标

Question

jqgrid视图行对话框大的span和图标

5

我有一个包含数据的JQGRID，当用户双击行时，我希望能够在对话框中显示该行数据。

可以使用以下代码实现：

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

但是我有两个问题：

1：一个字段中存在图标，当它在对话框中显示时，位置会混乱（见下图）。

2：在最后一个字段有一段较长的文本（限制150个字符）。对话框会将其显示为一个长行，导致水平滚动条出现。我希望它能显示为几行或类似于文本域的东西，这样就会出现垂直滚动条。已尝试过如下方法：

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>

在Firefox中的图标： Firefox 在IE8中的图标： IE8

- Mah

你能否发布演示的URL或添加定义网格的代码？了解如何填充网格中的数据可能很重要。您是否在数据中包含HTML片段，或者使用一些格式化程序？ - Oleg

是的，我曾在表格代码外使用HTML来显示图标。现在改为使用CSS，一切正常！谢谢！ :) - Mah

我很高兴看到这个。问题中的最后一张截图似乎是在删除 之前完成的，就像我在我的答案中所示。在我的测试中，删除 后图标看起来非常好。 - Oleg

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

视图表单将显示为HTML表格。关于表格中文本的换行，您可以阅读this和this旧答案。

在视图表单中，您可以例如使用以下CSS样式。

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

在这种情况下，具有大量数据的视图表单可能会呈现如下：

enter image description here

如果您检查相应的HTML代码，就会清楚地看到长文本第一行错误的左浮动问题。您会发现每个具有数据的单元格开头都有 。空单元格的HTML内容为 <span> </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));
        }
    });
}

演示表明，在进行以上更改后，长文本将被很好地显示。

enter image description here

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

你可以在这里找到我为答案编写的演示here。你只需要选择带有长文本的行以显示查看表单。