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

Question

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.

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.

Any ideas how i could do this. I'm using asp.net if thats going to be relevent.

Cheers Luke

Answer 1

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:

1. Add a “dialog” div tag to your page.

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.

   < cell>< ![CDATA[< a href=”javascript:showDialog('551')”>text]]>< /cell>

   In this instance, since we know the actual id at the time the link is create, I pre-populated the id (eg 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.

3. Create a local function (eg showDialog (id)) to correspond to your link.

4. 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.

   function showDialog (id) {

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

   }); }

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.

Answer 2

I am attempting this late. May be you have an answer. Thought this will help others.

The #dialog code can be done as suggested by gurun8. This needs to be wired to the jqgrid. There is a onSelectRow event which triggers whenever a row is selected in jqgrid. Refer documentation . I usually add autoOpen: false , to the dialog constructor.

You need to add the onselectrow event to the grid (jqgrid function as shown below) and you can pass the id to the function. This id is the unique identifier in the jqgrid. Make sure there are no syntax errors, add comma wherever appropriate.

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