jqgrid и всплывающие модальные окна по ссылке

У меня есть jqgrid, и я хотел бы поместить в него ссылку, чтобы открыть более подробную информацию о строке в модальном окне.

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

Любые идеи, как я мог это сделать. Я использую asp.net, если это будет актуально.

Привет Люк


asp.net jqgrid
person beakersoft    schedule 27.04.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я бы предложил использовать плагин jQuery UI Dialog для пользовательских модальных окон. Вы можете найти демонстрацию и документацию здесь:

http://jqueryui.com/demos/dialog/

Теоретически, чтобы сделать то, о чем вы просите, вы можете выполнить следующие шаги:

  1. Добавьте тег div «диалог» на свою страницу.

  2. Build the link into your data feed. If you’re using a XML data type make sure you use a CDATA flag to encapsulate your link so that they XML may be parsed correctly.

    ‹ ячейка>‹ ![CDATA[‹ a href="javascript:showDialog('551')">текст]]>‹ /cell>

    В этом случае, поскольку мы знаем фактический идентификатор на момент создания ссылки, я предварительно заполнил идентификатор (например, 551) в функции. Это также можно получить из API jqGrid с помощью свойства selrow. Это ваш вызов. Если вы используете тип данных JSON, идея будет похожей. Вам не придется беспокоиться о квалификаторе CDATA.

  3. Создайте локальную функцию (например, showDialog (id)) для соответствия вашей ссылке.

  4. Добавьте код в функцию showDialog для заполнения и открытия модального диалогового окна. Используя вызов AJAX для сбора конкретных данных для этой записи, создайте содержимое диалогового окна и заполните диалоговое окно с помощью метода jQuery .html.

    функция showDialog (идентификатор) {

    $.ajax({ url: "feed.aspx?id=" + id, success: function(data) { var content = // TODO: создать диалоговое окно здесь

        $("#dialog").html(content);

    $("#dialog").dialog({
        title: 'Record Details',
        modal: true,
        closeOnEscape: true,
        width: 300,
        height: 200,
        buttons: false,
        position: "center",
    });

    $("#dialog").dialog("open");
}

    }); }

Это всего лишь один из способов освежевать кошку. Вы должны иметь возможность использовать больше jQuery-подхода при создании ссылок. При желании вместо того, чтобы создавать конкретную ссылку на фид данных, вы можете добавить привязки событий щелчка jQuery для обработки запроса. Это ваш вызов. Вы также можете динамически добавить диалоговое окно div на свою страницу с помощью jQuery, а не просто размещать его вручную, как я описал выше. Это может быть немного более элегантно, но будет достигать той же цели.

person gurun8    schedule 01.05.2010

arrow_upward
1
arrow_downward

Я пытаюсь это поздно. Может у вас есть ответ. Думал, это поможет другим.

Код #dialog можно сделать так, как предложил gurun8. Это нужно подключить к jqgrid. Существует событие onSelectRow, которое срабатывает всякий раз, когда в jqgrid выбирается строка. См. документацию. Обычно я добавляю autoOpen: false в конструктор диалога.

Вам нужно добавить событие onselectrow в сетку (функция jqgrid, как показано ниже), и вы можете передать идентификатор в функцию. Этот идентификатор является уникальным идентификатором в jqgrid. Убедитесь, что нет синтаксических ошибок, добавьте запятую, где это необходимо.

$s("#list").jqGrid({
...
  onSelectRow: function(id){
    console.log("row is selected"+id);
    $url = "your_url/";
    $s('#dialog').load($url);
    $s('#dialog').dialog('open');
  }
...
});
person Umapathy    schedule 27.12.2010