Блог

Мы используем jquery grid, в последнем столбце сетки должна быть ссылка. При нажатии на ссылку должна появиться новая панель, которая предоставляет больше информации.

Итак, мы использовали средство форматирования, которое генерирует 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> ';
}
  

Как я могу исправить, чтобы панель отображалась в сетке без полосы прокрутки?

Я не уверен, как выглядит ваш реальный код, но демонстрация jsfiddle не очень хороша. В любом случае ваша главная проблема: <div> который вы используете для отображения дополнительной информации, имеет <td> элемент в качестве родительского. Это основная причина вашей проблемы. Вы должны добавить div к телу перед его отображением, чтобы предотвратить обрезку сетки.

Кроме того, я бы порекомендовал вам

• использовать бесплатную jqGrid 4.13.4 вместо старой jqGrid 4.6
• не размещайте исправление id="sample" в divs, чтобы предотвратить ошибки дублирования идентификаторов
• используйте beforeSelectRow обратный вызов вместо onclick атрибута. beforeSelectRow Обратный вызов будет вызываться внутри click обработчика, привязанного к сетке ( <table> ). Она будет вызвана из-за появления пузырьков событий. tagret Свойство объекта event дает нам полную информацию о выбранном элементе.

Модифицированная демонстрация может быть примерно следующей

 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" amp;amp; 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" amp;amp; 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 /