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

Question

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

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

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

Приветствие Лука

Answer 1

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

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

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

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

2. Создайте ссылку в вашем фиде данных. Если вы используете тип данных XML, убедитесь, что вы используете флаг CDATA для инкапсуляции вашей ссылки, чтобы они могли правильно проанализировать XML.

   <! [CDATA [<a href = »javascript: showDialog (‘ 551 ’)»> text]]>

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

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

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

   функция showDialog (id) {

   $. 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");
   }
   

   * +1036 *}); }

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

Answer 2

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

Код #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');
  }
...
});