从链接的jqGrid和弹出模态窗口 [英] jqgrid and popup modal windows from link
问题描述
我有一个jqGrid的，我想提出一个链接在一个模态窗口中打开了该行的更多细节。
I have got a jqgrid, and i would like to put a link in it to open up more details on the row in a modal window.
一切我读过关于模态窗口使用，当您点击链接时会显示一个div，但我想传递一个ID，所以我可以只得到了信息，我需要。我知道我可以用一个新的窗口做到这一点相当伊斯利，但我想用POSS，如果模式窗口。
Everything i have read about modal windows uses a div that gets shown when you click the link, but i want to pass an id so i can just get the info i need. I know i could do it with a new window quite easly but i would like to use a modal window if poss.
任何想法我怎么能做到这一点。我使用asp.net如果那将是培训相关。
Any ideas how i could do this. I'm using asp.net if thats going to be relevent.
干杯
卢克
推荐答案
我建议使用jQuery用户界面对话框插件自定义模式窗口。你可以在这里找到演示和文档：
I'd suggest using the jQuery UI Dialog plugin for custom modal windows. You can find demonstration and documentation here:
http://jqueryui.com/demos/dialog/
在理论上，做你问什么，你可以按照以下步骤操作：
In theory, to do what you're asking for, you could follow these steps:
-
添加对话div标签到您的网页。
Add a "dialog" div tag to your page.
建立链接到您的数据。如果您使用的是XML数据类型确保您使用一个CDATA标记来封装你的链接，使他们支持XML，可以正确分析。
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.
＆LT;电池>＆LT; ！[CDATA [＆LT; A HREF =JavaScript的：的ShowDialog（'551'）>正文]]>＆LT; /细胞>
< cell>< ![CDATA[< a href="javascript:showDialog(‘551’)">text]]>< /cell>
在此情况下，由于我们在链路是创建时间知道实际的id，我$ P $对填充在函数的ID（例如，551）。这也可以从与 selrow 属性的jqGrid API检索。这是你的电话。如果使用JSON数据类型，这个主意相似。你就不必担心 CDATA 预选赛。
In this instance, since we know the actual id at the time the link is create, I pre-populated the id (e.g. 551) in the function. This could also be retrieved from jqGrid API with the selrow property. It’s your call. If you use a JSON data type, the idea would similar. You wouldn’t have to worry about the CDATA qualifier.
添加code在的ShowDialog 函数来填充和打开模态对话框。使用AJAX调用来收集特定数据此记录，创建对话框内容，并使用jQuery html的方法填充对话框。
Add code in the showDialog function to populate and open the modal dialog. Using an AJAX call to gather specific data for this record, create the dialog content and populate the dialog using the jQuery .html method.
功能的ShowDialog（ID）{
function showDialog (id) {
$。阿贾克斯（{
网址：feed.aspx ID =+ ID，
成功：功能（数据）{
VAR内容= // TODO：在此处创建对话框布局
$.ajax({ url: "feed.aspx?id=" + id, success: function(data) { var content = // TODO: create dialog layout here
$("#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到您的网页，而不是仅仅将其手动像我上面描述。这可能是多了几分优雅的期待，但会达到同样的目标。
This is just one way to skin the cat. You should be able to use more of a jQuery approach with the link creation. If desired, rather than building the specific link the data feed, you could add jQuery click event bindings to handle the request. It’s your call. You could also add the dialog div dynamically to your page using jQuery rather than just placing it manually like I described above. It might be a little more elegant looking but would achieve the same goal.
这篇关于从链接的jqGrid和弹出模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
