Javascript jqgrid为每列提供一个信息面板，使网格显示滚动

我们使用的是jquery网格，网格的最后一列应该有链接。通过单击链接，将出现一个新面板，提供更多信息

所以我们使用了一个格式化程序，它生成一个

隐藏的div

和

链接

。问题是，对于最后一行，信息面板使网格具有滚动条

正确的

不正确

我做了一个非常简单的测试。如您所见，单击

单击我将使网格滚动

格式化程序如下所示：

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> ';
}

功能面板格式化程序（单元格值、选项、行对象）{
返回“更多信息”
点击我'；
}

如何修复面板在没有滚动条的情况下显示在网格上的问题？
我不确定您的真实代码看起来如何，但JSFIDLE演示并不好。不管怎样，您的主要问题是：用于显示附加信息的
元素将
元素作为父元素。这是你问题的主要原因。在显示主体之前，应将div附加到主体，以防止在网格上进行剪裁

另外，我会推荐你


使用4.13.4代替旧的jqGrid 4.6
不要在div中放置fix
id=“sample”
，以防止id重复错误
在选择行

回调之前使用

，而不是单击属性。将在绑定到网格（
）的
单击处理程序内部调用
beforeSelectRow
回调。它将被称为，因为。事件对象的
tagret
属性为我们提供了有关单击元素的完整信息

修改后的演示可能与以下内容有关

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();
        }
    }
});

看。顺便说一下，在从空的
创建网格之前，可以使用
jQuery.bind
（或者更好的
jQuery.on
）。请参见
我不确定您的真实代码看起来如何，但JSFIDLE演示并不好。不管怎样，您的主要问题是：用于显示附加信息的
元素将
元素作为父元素。这是你问题的主要原因。在显示主体之前，应将div附加到主体，以防止在网格上进行剪裁

另外，我会推荐你


使用4.13.4代替旧的jqGrid 4.6
不要在div中放置fix
id=“sample”
，以防止id重复错误
在选择行
回调之前使用
，而不是单击属性。将在绑定到网格（
）的
单击处理程序内部调用
beforeSelectRow
回调。它将被称为，因为。事件对象的
tagret
属性为我们提供了有关单击元素的完整信息

修改后的演示可能与以下内容有关

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();
        }
    }
});

看。顺便说一下，在从空的
创建网格之前，可以使用
jQuery.bind
（或者更好的
jQuery.on
）。见
亲爱的奥列格，谢谢！这非常有用，因为我的jqGrid是用struts 2 jquery grid标记生成的，在选择Row
之前，我无法轻松处理
，我是否可以用我的
格式化程序
方法解决这个问题@阿利雷扎法塔希：不客气！您可以使用jQuery事件（请参阅）而不是回调来执行相同的操作。事件的第一个参数并没有真正的帮助，但是下一个参数对应于回调的参数。例如，我的答案中的演示可以更改为以下内容：正是我想要的：）亲爱的Oleg，谢谢！这非常有用，因为我的jqGrid是用struts 2 jquery grid标记生成的，在选择Row
之前，我无法轻松处理
，我是否可以用我的
格式化程序
方法解决这个问题@阿利雷扎法塔希：不客气！您可以使用jQuery事件（请参阅）而不是回调来执行相同的操作。事件的第一个参数并没有真正的帮助，但是下一个参数对应于回调的参数。例如，我的答案中的演示可以更改为以下内容：正是我想要的：）