Question

我有一个表（jqGrid），我想在文档加载时动态添加一个小图标/图像。将根据网格的一个隐藏列值（日期）插入图像;它应该标记行/页面/网格查看器的重要性/紧迫性。我非常精通jQuery并且我有逻辑，但我唯一遇到的问题是在DOM结构中应该插入这个元素，因为它不应该是实际网格的一部分。它应该浮动到网格外部行的左侧。所以基本上，我问的是这个：

1）在DOM结构中应该插入这个元素吗？包含实际表的div容器？;

2）应如何设置样式（CSS）？

我想出的唯一方法是获取相关行的y坐标并将其插入设置为该y坐标的div容器（包含表）中。我不确定这是否是最佳或正确的方法。

编辑：这里有很多好方法。我正在考虑将“afterInsertRow”事件与David的方法结合起来。谢谢大家的帮助！

Answer 1

为什么要在table的外部添加任何元素？在给定标记的情况下，只需使用隐藏的单元格来包含要显示的图像/元素和样式以响应父:hover的{{1}}：

tr

CSS：

<table>
    <thead>
        <tr>
            <th></th>
            <th>Column 'one'</th>
            <th>Column 'two'</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>row one</td>
            <td>row one</td>
        </tr>
        <tr>
            <td></td>
            <td>row two</td>
            <td>row two</td>
        </tr>
    </tbody>
</table>

这种方法似乎可以工作（我认为也应该在IE中工作）：JS Fiddle demo，

Answer 2

最简单的解决方案是使用jQuery＆＃34;我的＃34;定位：

1）将元素附加到页面正文。

2）使用jQuery＆＃34;我的＃34;定位将元素放置在您尝试标记为紧急的行元素旁边。 http://docs.jquery.com/UI/API/1.8/Position

Answer 3

您可以使用jqGrid中的afterInsertRow事件：

var my_jqGrid = $('#id_table').jqGrid({
   ... //Other configs

   afterInsertRow: function(rowid, rowdata, rowelement){

       console.log(rowdata);
       //Here you code condition to insert in other div
       if(rowdata['key']=='status_ok'){
           $('#div_id').append( '<img src="image/ok.png" />'  );
       }          
   }

});

查看维基here

我添加一个简单的图像，你可以附加一个div容器图像并用css设置高度。

在行之前但在表外添加元素？

3 个答案: