javascript - 每列都有一个信息面板的 jqgrid 使网格显示滚动

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 附加到主体，以防止在网格上剪裁。

另外我会推荐你​​

• 使用free jqGrid 4.13.4 而不是旧的 jqGrid 4.6
• 不要修复id="sample"在 div 中防止 id 重复错误
• 使用beforeSelectRow回调而不是 onclick属性。 beforeSelectRow回调将在 click 内部调用处理程序绑定(bind)到 grid ( <table> )。它会因为 event bubbling 而被调用. tagret事件对象的属性为我们提供了关于被点击元素的完整信息。

修改后的demo大概是下面的内容

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

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

更新:可以像回调一样使用 jQuery 事件。例如，可以使用事件 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/9a3uaL5h/2/ .顺便说一下，可以使用 jQuery.bind (或更好的 jQuery.on ) 之前 从空 <table id="grid"></table> 创建网格.参见 http://jsfiddle.net/9a3uaL5h/3/