Question

我有一个jqgrid，我想在其中添加一个链接，以便在模态窗口中打开关于该行的更多详细信息。

我读到的关于模态窗口的所有内容都使用了一个div，当你点击链接时会显示，但我想传递一个id，这样我就能得到我需要的信息。我知道我可以很容易地使用一个新窗口，但我想使用模态窗口，如果可能的话。

我有什么想法可以做到这一点。我正在使用asp.net，如果那将是相关的。

干杯路加

Answer 1

我建议使用jQuery UI Dialog插件来自定义模式窗口。您可以在这里找到演示和文档：

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

理论上，为了做你要求的事，你可以按照以下步骤操作：

在页面中添加“dialog”div标记。
构建数据Feed链接。如果您使用的是XML数据类型，请确保使用CDATA标志来封装链接，以便正确解析它们的XML。

＆LT;电池＆gt;＆LT; ！[CDATA并[d a href =“javascript：showDialog（'551'）”＆gt; text]]＆gt;＆lt; /电池＆gt;

在这种情况下，由于我们知道链接创建时的实际ID，因此我预先填充了函数中的id（例如551）。也可以使用selrow属性从jqGrid API检索此内容。这是你的电话。如果您使用JSON数据类型，那么这个想法就会类似。您不必担心CDATA限定符。
创建一个本地函数（例如showDialog（id））以对应您的链接。
在showDialog函数中添加代码以填充并打开模式对话框。使用AJAX调用收集此记录的特定数据，创建对话框内容并使用jQuery .html方法填充对话框。

function showDialog（id）{

$。AJAX（{ url：“feed.aspx？id =”+ id，成功：函数（数据）{ 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单击事件绑定来处理请求，而不是构建数据源的特定链接。这是你的电话。你也可以使用jQuery动态地将对话框div添加到你的页面，而不是像我上面描述的那样手动放置它。它可能看起来更优雅，但会达到同样的目标。

Answer 2

我正在尝试这么晚。可能你有答案。认为这将有助于其他人。

#dialog代码可以按照gurun8的建议完成。这需要连接到jqgrid。有一个onSelectRow事件，只要在jqgrid中选择了一行，就会触发该事件。请参阅documentation。我通常将autoOpen: false添加到对话框构造函数中。

您需要将onselectrow事件添加到网格（jqgrid函数，如下所示），您可以将id传递给函数。此id是jqgrid中的唯一标识符。确保没有语法错误，请在适当的地方添加逗号。

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

来自链接的jqgrid和弹出模式窗口

2 个答案: