Question

我发出了多个getJSON请求，在每次请求之后，我构建了一个面板并用数据初始化第三方分层网格。我遇到的问题是面板不是按照发送请求的顺序创建的，而是按照它们返回的顺序创建的。我想我已经将自己挖成了一个整体，但如果我不必，我真的不想重新设计这个。

var _grids = {
        ServiceGrid: {
            id: 0,
            parentUrl: _SERVICE_CONTENT_URL,
            childUrl: _SERVICE_HISTORY_URL,
            parentElementName: "ServiceTypeName",
            childElementName: "ServiceLogEntries",
            childPrimaryKey: "LogID",
            tableName: "Service",
            data: [],
            parentColumns: [...],
            childColumns: [...]
        },
        ServiceItemGrid: {
            id: 1,
            parentUrl: _SERVICE_ITEM_CONTENT_URL,
            childUrl: _SERVICE_ITEM_HISTORY_URL,
            parentElementName: "PackageServiceItemName",
            childElementName: "ServiceItemLogEntries",
            childPrimaryKey: "LogID",
            tableName: "Service Item",
            data: [],
            parentColumns: [...],
            childColumns: [...]
        }
    };

function prepareDataForGrid(_grids, id) {
    var tableIdIncrementor = 0;
    var $panelGroup = $("<div>").addClass("panel-group");

    // Append Accordion
    $panelGroup.attr("id", "accordion");
    $panelGroup.appendTo("#placeholder");


    $.each(_grids, function(index, grid) {
        var parentUrl = grid.parentUrl,
            childUrl = grid.childUrl,
            //Request data
            parentData = getApiDataAjax(parentUrl, id),
            childData = getApiDataAjax(childUrl, id);

        $.when(parentData, childData).done(function (parentDataResult, childDataResult) {
            //Combine child to parent
            combineElements(parentDataResult[0], childDataResult[0], grid);
            // Hydrate grid.data with combined data
            grid.data = parentDataResult[0];

            //loop through grids, build panels for each parent
            $.each(grid.data.result, function(index, value) {

                appendhtml(grid, value, tableIdIncrementor);

                //Create hierarchical grid  
                $("#" + tableIdIncrementor).igHierarchicalGrid({
                    initialDataBindDepth: 1,
                    dataSource: JSON.stringify(value),
                    dataSourceType: "json",
                    responseDataKey: "result",
                    autoGenerateColumns: false,
                    primaryKey: "ID",
                    columns: grid.parentColumns,
                    autoGenerateLayouts: false,
                    defaultChildrenDataProperty: value[grid.childElementName],
                    columnLayouts: [
                        {
                            key: grid.childElementName,
                            autoGenerateColumns: false,
                            primaryKey: value.childPrimaryKey,
                            columns: grid.childColumns
                        }
                    ]
                });

                tableIdIncrementor++;
            });
        });
    });
}

我可以先制作所有面板，然后通过id将网格连接到面板上，但如果按照发出请求的顺序附加面板和网格，那就简单多了。

感谢。

Answer 1

一个简单的解决方案是在您循环时创建div并将div附加到目标div，然后在数据到达时将数据插入每个div。

$.each(function () {
    var $thisDiv = $("<div>").appendTo("#targetDiv");
    $.when(doThis,doThat).done(function (result1, result2) {
        $thisDiv.append(result1).append(result2);
    });
});

虽然，我希望事先建立html结构并一次插入所有内容，只是因为我更喜欢尽可能少地触摸dom。

以与发送时相同的顺序显示AJAX响应，而不使用同步请求

1 个答案: