jqgrid与每个列的信息面板使网格显示滚动 [英] jqgrid with an information panel for each column makes grid to show scroll

问题描述

我们使用的是jQuery网格，网格的最后一列应该有链接。应该出现一个新的面板，它提供了更多信息。

因此，我们使用了一个格式化程序，它生成一个隐藏div 和 link 。问题在于对于最后一行，信息面板使网格具有滚动条。

正确

不正确的

我在 http://jsfiddle.net/9a3uaL5h/ 。点击点击我会使网格滚动。

格式化程序如下：

  function panelFormatter（cellvalue，options，rowObject）{
 return'< div id =samplestyle =zindex： 1000; height：200px; display：none; position：absolute; 
 background-color：red>更多资讯< / div> 
< a onclick = $（＃sample）。show（）>点击我< / a> ; 
 
 $ / code> 

如何修复面板显示在没有滚动条的网格上？

解决方案

我不确定你的真实代码的外观如何，但jsfiddle演示不好。无论如何，您的主要问题是：用于显示附加信息的< div> 包含< td> 元素作为父项。这是你的问题的主要原因。你应该在显示它之前将div添加到body中，以防止在网格上剪切。

另外我会推荐你​​

• 使用免费jqGrid 4.13.4而不是旧的jqGrid 4.6
  
• 不要在div中放置修改 id =sample以防止id重复错误。 $ b
• 使用 beforeSelectRow 回调代替 onclick 属性。 beforeSelectRow 回调将在内点击绑定到网格的处理程序（<表> ）。它会因事件冒泡而被调用。

<修改后的演示可以是以下内容：
$ b $ pre $ function $ panel $ < div name =samplestyle =z-index：2000; height：200px; display：none; position：absolute; background-color：red>更多资讯< / div> < a>点击我< / a>';


$ b $（＃grid）。jqGrid（{
...
beforeSelectRow：function（rowid，e） {
var $ td = $（e.target）.closest（tr.jqgrow> td），
colName = $ td.length< 0？
null：
$（this）.jqGrid（getGridParam）。colModel [$ td [0] .cellIndex] .name;
if（colName ===status&& e.target.tagName.toLowerCase （）===a）{
//status列中的< a>被点击
$ td.find（div [name = sample]）
.appendTo（body）
.position（{
：$ td，
at：left bottom，
my：left bottom ++ $ td.height （）
}）
.show（）;
}
}
}）;

参见 http://jsfiddle.net/OlegKi/9a3uaL5h/1/

更新：像回调一样使用jQuery Events。例如，可以使用事件 jqGridBeforeSelectRow 而不是 beforeSelectRow 回调。代码将是

  $（＃grid）。bind（jqGridBeforeSelectRow，function（event，rowid，e） {
 var $ td = $（e.target）.closest（tr.jqgrow> td），
 colName = $ td.length< 0？
 null：
 $（this）.jqGrid（getGridParam）。colModel [$ td [0] .cellIndex] .name; 
 if（colName ===status&& e.target.tagName.toLowerCase （）===a）{
 //status列中的< a>被点击
 $ td.find（div [name = sample]）
 .appendTo（body）
 .position（{
：$ td，
 at：left bottom，
 my：left bottom ++ $ td.height （）
}）
 .show（）; 
} 
}）; 
  

请参阅 http://jsfiddle.net/9a3uaL5h/2/ 。顺便说一句，可以使用 jQuery.bind （或更好的 jQuery.on ）之前网格由空的< table id =grid>< / table> 创建。请参阅 http://jsfiddle.net/9a3uaL5h/3/

We are using jquery grid, the last column of the grid should have link. By clicking the link a new panel should appear which gives more info.

So we used a formatter, which generates a hidden div and link. The problem is that for last rows, the information panel makes the grid to have the scroll bar.

Correct

Incorrect

I made a very simple test at http://jsfiddle.net/9a3uaL5h/. as you see clicking the click me will make the grid to scroll.

The formatter is as:

function panelFormatter(cellvalue, options, rowObject) {
  return '<div id="sample" style="zindex:1000; height: 200px; display:none;position:absolute; 
          background-color:red" > More Info </div>
          <a onclick=$("#sample").show()>click me</a> ';
}

How can I fix that the panel be displayed on to of grid without scroll bar?

解决方案

I'm not sure how looks your real code, but the jsfiddle demo isn't good. In any way your main problem: the <div> which you use to show an additional information has <td> element as the parent. It's the main reason of your problem. You should append the div to the body before displaying it to prevent the clipping on the grid.

Additionally I would recommend you

• to use free jqGrid 4.13.4 instead of old jqGrid 4.6
• don't place fix id="sample" in the divs to prevent id duplicate errors
• use beforeSelectRow callback instead of onclick attribute. The beforeSelectRow callback will be called inside of click handler bound to the grid (<table>). It will be called because of event bubbling. The tagret property of the event object gives us full incormation about the clicked element.

The modified demo could be about the following

function panelFormatter(cellvalue, options, rowObject) {
    return '<div name="sample" style="z-index:2000; height: 200px; display:none;position:absolute; background-color:red"> More Info </div> <a>click me</a>';
}

...
$("#grid").jqGrid({
    ...
    beforeSelectRow: function (rowid, e) {
        var $td = $(e.target).closest("tr.jqgrow>td"),
            colName = $td.length < 0 ?
                null :
                $(this).jqGrid("getGridParam").colModel[$td[0].cellIndex].name;
        if (colName === "status" && e.target.tagName.toLowerCase() === "a") {
            // <a> in the "status" column is clicked
            $td.find("div[name=sample]")
                .appendTo("body")
                .position({
                    of: $td,
                    at: "left bottom",
                    my: "left bottom+" + $td.height()
                })
                .show();
        }
    }
});

see http://jsfiddle.net/OlegKi/9a3uaL5h/1/

UPDATED: One can use jQuery Events in the same way like callbacks. For example, one can use the event jqGridBeforeSelectRow instead of beforeSelectRow callback. The code will be

$("#grid").bind("jqGridBeforeSelectRow", function (event, rowid, e) {
    var $td = $(e.target).closest("tr.jqgrow>td"),
        colName = $td.length < 0 ?
        null :
    $(this).jqGrid("getGridParam").colModel[$td[0].cellIndex].name;
    if (colName === "status" && e.target.tagName.toLowerCase() === "a") {
        // <a> in the "status" column is clicked
        $td.find("div[name=sample]")
            .appendTo("body")
            .position({
            of: $td,
            at: "left bottom",
            my: "left bottom+" + $td.height()
        })
            .show();
    }
});

See http://jsfiddle.net/9a3uaL5h/2/. By the way one can use jQuery.bind (or better jQuery.on) before the grid is created from the empty <table id="grid"></table>. See http://jsfiddle.net/9a3uaL5h/3/

这篇关于jqgrid与每个列的信息面板使网格显示滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！