jqgrid viewGridRow对话框大跨度和图标[重复]

Posted 2023-03-06

【中文标题】jqgrid viewGridRow对话框大跨度和图标[重复]

【英文标题】：jqgrid viewGridRow dialog big span and icon [duplicate]

【发布时间】：2011-12-31 11:44:27

【问题描述】：

我有一个包含一些数据的 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 中的图标： IE8 中的图标：

【问题讨论】：

您可以将 URL 发布到演示或添加定义网格的代码吗？了解如何在网格中填充数据可能很重要。您是在数据中包含 html 片段还是使用了一些 formatters？

是的，我在表格代码之外使用 HTML 来显示图标。将其更改为css，现在可以正常工作了！谢谢！ :)

我很高兴读到这篇文章。问题的最后一个屏幕短片似乎是在删除  之前完成的，就像我在回答中显示的那样。在我的测试中，删除   后图标看起来非常好。

【参考方案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 包含  <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));
        
    );

demo显示，经过以上修改后，长文本显示效果已经足够好：

您不会发布您如何填写“状态”列中的图标。我希望，经过上述更改后，图标会更好看。如果还是有问题，可以检查相应单元格中的 HTML 代码（可以在beforeShowForm 的代码中包含alert(html)）并修改代码，使其显示得更好。

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

【讨论】：

感谢您的回答。解决了一切。我刚刚获得了行的 ID 并应用了您显示的 css！也解决了空白。

我刚刚发现 Internet Explorer 8 中图标的另一个问题。发布在问题中。 :)

@Mah：看看the demo。图标看起来不错。

示例中的图标不在 div 中。这就是它起作用的原因。我的是因为它的造型。所以不知何故 ie8 无法识别。

@Mah：我使用的正是您发布的 HTML 片段：'<div class="ui-state-attention ui-corner-all" style="display:table"><span class="ui-icon ui-icon-alert" title="Aguardando"></span></div>'。看上一个demo的源码。