qtip jqgrid选择器问题

发布于 2024-10-02 20:21:53 字数 487 浏览 7 评论 0原文

我想将 qtip 与 jqgrid 一起使用，并根据在 jqgrid 中选择的行显示不同的图像。图像的路径可以在 jqgrid 内作为隐藏单元格。我环顾四周，但找不到任何关于 jqgrid 是否有可以使用的相关行选择器的文档。有谁知道我想要的选择器，或者我是否应该尝试完全不同的方法？

到目前为止唯一有效的选择器在下面，但它适用于整个网格。我尝试了一些方法来指定行，但没有任何效果。任何帮助将不胜感激。

$('#gridtable').qtip({
         content: 'Some text',
         show: 'mouseover',
         hide: 'mouseout',
         position: {
            corner: {
            target: 'topLeft',
            tooltip: 'bottomLeft'
         }
      }
     });

原文

I want to use qtip with jqgrid and show a different image depending on which row is selected within the jqgrid. The path of the image could be within the jqgrid as a hidden cell. I have looked around but can't find any documentation on if jqgrid has a relevant row selector that could be used. Does anyone know the selector I want or if I should be trying for a different approach altogether?

The only selector that worked so far is below but it is for the entire grid. I have tried a few things to specify the row but nothing has worked. Any help would be appreciated.

$('#gridtable').qtip({
         content: 'Some text',
         show: 'mouseover',
         hide: 'mouseout',
         position: {
            corner: {
            target: 'topLeft',
            tooltip: 'bottomLeft'
         }
      }
     });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟雨凡馨 2024-10-09 20:21:53

我的解决方案是在具有葡萄酒图像的每一行中放置一个图标，并为其分配该行的 ID。这意味着每一行都可以被赋予一个唯一的类来悬停。不漂亮，但它有效。

 if((gridRow['photo'] != "false"))
                {

                $("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+'  <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'});

                path = '<img src="images/winephotos/'
                + gridRow['id']
                +'.jpg" width="350" height="450" alt="Wine Image"'
                +' class="resize"/>';

                $('.imageicon'+i).qtip({
                    content:  $(path)
                        ,
                        position: {
                             corner: {
                             target: 'topLeft',
                             tooltip: 'bottomLeft'
                          }

                    },
                    show: {
                        when: 'click',
                        //ready: true,
                        solo: true
                    },
                    hide: {
                        when: {
                            event: 'click',
                            event: 'mouseout'
                        }
                    },
                    style: { 
                         width: { max: 280 }, 
                        name: 'dark' 
                     }
                });
                 }
                gridRow=false;
            }

My solution was to place an icon within each row that had a wine image and assign it the id of the row. This meant that each row could be given a unique class to hover over. Not pretty but it worked.

 if((gridRow['photo'] != "false"))
                {

                $("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+'  <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'});

                path = '<img src="images/winephotos/'
                + gridRow['id']
                +'.jpg" width="350" height="450" alt="Wine Image"'
                +' class="resize"/>';

                $('.imageicon'+i).qtip({
                    content:  $(path)
                        ,
                        position: {
                             corner: {
                             target: 'topLeft',
                             tooltip: 'bottomLeft'
                          }

                    },
                    show: {
                        when: 'click',
                        //ready: true,
                        solo: true
                    },
                    hide: {
                        when: {
                            event: 'click',
                            event: 'mouseout'
                        }
                    },
                    style: { 
                         width: { max: 280 }, 
                        name: 'dark' 
                     }
                });
                 }
                gridRow=false;
            }

回复收藏 0 原文

~没有更多了~