Question

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

所以我们使用了格式化程序，它会生成hidden div和link。问题是，对于最后一行，信息面板使网格具有滚动条。

正确

不正确的

我在http://jsfiddle.net/9a3uaL5h/做了一个非常简单的测试。如您所见，单击click me将使网格滚动。

格式化程序如下：

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

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

Answer 1

我不确定你的真实代码看起来如何，但jsfiddle演示并不好。无论如何，您的主要问题是：用于显示其他信息的<div>以<td>元素作为父级。这是您遇到问题的主要原因。您应该在显示div之前将div附加到正文，以防止在网格上剪切。

另外我会推荐你

使用QSqlDriver::hasFeature(QSqlDriver::EventNotifications) 4.13.4而不是旧的jqGrid 4.6
不要在div中修复id="sample"以防止ID重复错误
使用beforeSelectRow回调代替onclick属性。 beforeSelectRow回调将在绑定到 grid （click）的<table>处理程序内部调用。它将因free jqGrid而被调用。事件对象的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();
        }
    }
});

请参阅event bubbling

更新：可以像回调一样使用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") {
        // <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();
    }
});

见http://jsfiddle.net/OlegKi/9a3uaL5h/1/。顺便说一句，可以使用jQuery.bind（或更好jQuery.on）之前从空<table id="grid"></table>创建网格。见http://jsfiddle.net/9a3uaL5h/2/

带有每列的信息面板的jqgrid使网格显示滚动

1 个答案: