jqGrid: subgrid doesn't populate with data

问题

I've got a subgrid that, when you click the "+" sign next to "Cheese", the ajax query fires, and I see the subgrid column names, but the actual data isn't populated into the subgrid. The problem happens regardless of which grid I try to expand, but the "Cheese" example is the one shown below.

You can see the XML response in the bottom portion of the FireBug output in the screenshot. I've read through that XML, and it looks to be valid. On a hunch, I also pasted the XML output into this page, and it seems to indent just fine. On top of that, I also had the ajax call return some very basic values, and no matter what I've tried so far, the grid remains empty.

What you should see in the subgrid is:

------------------------------------------------------
|Translations                    | Language | Active |
------------------------------------------------------
| It's cheesy goodness           |   EN     |   No   |
| fromage                        |   FR     |   No   | 
|                                |   DE     |   N/A  |   <-- "N/A" means there's no translation of "cheese" in German, currently in the database

    ... etc., with all supported languages listed.

The code for the subgrid is:

$("#translationsList").jqGrid({
    caption : "Translations",
    datatype : "xml",
    url : translationsFeed,
    editurl : translationsEdit,
    mtype : "get",
    pager : "#translationsPager",
    rowNum : 20,
    autowidth : true,
    sortname : "phrase",
    sortorder : "asc",
    viewrecords : true,
    multiselect : false,
    hidegrid : false,
    height : 300,
    altRows : true,
    rownumbers : true,
    toolbar : [false],
    colNames : ["phrase_id", "translation_id", "language_cd", "Phrase", "Translation", "Created", "Modified", "Active"],
    colModel : [
            { name : "phrase_id",                                   index : "phrase_id",            sortable : true,    search : false, editable : true,    edittype : "text",      editrules: { edithidden :true },                                    hidden : true},
            { name : "translation_id",                          index : "translation_id", sortable : false, search : false, editable : true,    edittype : "text",      editrules: { edithidden :true },                                    hidden : true},
            { name : "language_cd",                                 index : "language_cd",      sortable : true,    search : true,  editable : true,    edittype : "text",      editrules: { edithidden: true, required : true }, hidden : true },
        { name : "Phrase",              width:200,  index : "phrase",               sortable : true,    search : true,  editable : true,    edittype : "text",      editrules: { required : true } },
        { name : "Translation",         width:200,  index : "translation",      sortable : true,    search : true,  editable : true,    edittype : "text",      editrules: { required : false } },
        { name : "Created",             width:100,  index : "modify_dt",            sortable : true,    search : true },
        { name : "Modified",            width:100,  index : "create_dt",            sortable : true,    search : true },
        { name : "Active",              width:20,       index : "active",               sortable : true,    search : true,  editable : true,    edittype : "select",    editoptions:{value:"0:No;1:Yes"} }
    ],
    onSelectRow: function(id) {
            jQuery('#translationsList').editRow(id, true);
    },
    subGrid: true,
    subGridUrl: 'ajax/translations_subgrid_feed.php',
    subgridtype: 'xml',
    subGridModel : [{
      name      : ['Translations', 'Language', 'Active'],
      width     : [583, 70, 80],
      align     : ['left','right','right'],
      params    : ['phrase_id']
    }],
  subGridOptions: {
    plusicon : "ui-icon-plus",
    minusicon : "ui-icon-minus",
    openicon: "ui-icon-carat-1-sw",
    expandOnLoad: true,
    selectOnExpand : false,
    reloadOnExpand : true
  }
});

The XML response for the main/subgrids can be found in this Gist

回答1:

I could reproduce the problem and analysed the code of subgrid module of jqGrid. My explanation is: the new expandOnLoad: true property of the subGridOptions which you use can work only in case of 'local' datatype on the main grid. I don't found the corresponding remark about this in the documentation, but it is so.

In the version 4.1 are used delayOnLoad option, but it didn't works correct. In the version 4.1.1, after the fix the option are not used and immediately after adding a row in the main grid. The problem is that jqGrid use .grid.hDiv.loading property to skip ajax request if the response of the previous ajax request are not processed till the end. Inside of beforeSend handler of the $.ajax request of the main grid (see here) will be called beginReq() which first line is

ts.grid.hDiv.loading = true;

then inside of success handler of the $.ajax request the addXmlData method will be called, which call addSubGrid for every row of the main grid, which call .trigger('click'); on the "expand" icon of the grid row. As the result the populatesubgrid will be called on all grid rows before the .grid.hDiv.loading will be chaned to false inside of endReq at the end of success handler. So in the corresponding part of the populatesubgrid method where the ts.grid.hDiv.loading will be tested the corresponding $.ajax call will be skipped and the rows will be not expanded.

So I can repeat the short result of my analyses: don't use expandOnLoad: true option. It is not work on remote data.

来源：https://stackoverflow.com/questions/6459900/jqgrid-subgrid-doesnt-populate-with-data

标签

jqgrid

subgrid