Question

好的，...我正在使用JQuery v2.2.3，JQWidgets v4.1.2用于前端，后端使用ASP.NET MVC 5我正在使用ASP.NET c＃。

我的页面与SPA类似，因为它非常庞大。我遇到困难的部分是脚本应该使用同步Ajax调用重新填充所有JQXGrids。我知道Ajax意味着是同步的，但是当ajax调用时，ajax调用会忽略我的重复调用。这是应该发生的事情：

当最终用户从帐户下拉列表中选择新内容时，脚本将关闭网格，清除选择并打开新帐户对话框。
创建帐户后，将关闭新帐户创建对话框。
（这是奇怪的地方）然后该脚本应重新填充页面上的所有JQXGrids以反映添加。
最后，应该在创建帐户的下拉列表中自动选择创建的帐户。

以下是脚本在当前状态下实际执行的操作：

当最终用户从帐户下拉列表中选择新内容时，脚本将关闭网格，清除选择并打开新帐户对话框。
创建帐户后，将关闭新帐户创建对话框。
然后，脚本会尝试重新填充页面上的所有JQXGrids以反映添加内容。
该脚本在每个下拉列表下方生成重复的下拉列表。
在创建帐户的下拉列表中自动选择创建的帐户。但是，当选择网格时，仅显示该帐户，当选择重复网格时，所有帐户在对话框关闭时显示 AND ，单击的下拉网格（副本）将保留在屏幕。

这是我的HTML / Razor Script部分，所有JQXGrids都是以模仿的方式构建的：

<div class="col-sm-7">
    <div id="jqxSubAccountDropdownButton">
        <div id="jqxSubAccountDropdownWidget" style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxSubAccountDropdownGrid"></div>
        </div>
    </div>
</div>

这是脚本部分，应该自动填充它启动序列：

function PopulateAccounts(rePopulate) {
    PopulateAccountArray("jqxSubAccountDropdownGrid", F, null, null, rePopulate);
}

以下是保存新帐户并吐出记录ID Guid：

function SaveAccount(GridName) {
    var rowIndex;
    var AccountNumber = $("#txtNewAccountAccountNumber").val();
    var AccountTypeID = $("#listAddNewAccountType").val();
    var Balance = $("#txtEndingBalance").val();
    var CurrencyReferenceListID = $("#listNewAccountCurrency").val();
    var Description = $("#txtNewAccountDescription").val();
    var Name = $("#txtAccountName").val();
    var Note = $("#txtNewAccountNote").val();
    var OpenBalance = $("#txtEndingBalance").val();
    var OpenBalanceDate = $("#txtEndingDate").val();
    var OrderChecksAt = $("#txtNewAccountOrderChecks").val();
    var ParentID = $("#chkAddNewAccountSubAccount").val();
    var RoutingNumber = $("#txtNewAccountRoutingNumber").val();
    var TaxLineInfoReturnTaxLineID = $("#listNewAccountTaxLineMapping").val();

    var _AccountData = {
        "GridName": GridName,
        "AccountData": {
            "Name": Name,
            "IsActive": T,
            "ParentID": ParentID,
            "AccountTypeID": AccountTypeID,
            "SpecialAccountTypeID": null,
            "IsTaxAccount": null,
            "AccountNumber": AccountNumber,
            "RoutingNumber": RoutingNumber,
            "Description": Description,
            "Note": Note,
            "Balance": OpenBalance,
            "TotalBalance": OpenBalance,
            "OpenBalance": OpenBalance,
            "OpenBalanceDate": OpenBalanceDate,
            "TaxLineInfoReturnTaxLineID": TaxLineInfoReturnTaxLineID,
            "CashFlowClassification": null,
            "CurrencyReferenceListID": CurrencyReferenceListID,
            "OrderChecksAt": OrderChecksAt
        }
    };

    callService("POST", g_WebServiceSaveAccountURL, _AccountData, function (jsonData) {
        alert("Record Added");

        PopulateAccounts(true);

        rowIndex = GetRowIDOfItemByGUID(GridName, jsonData.AccountID, "AccountIndex");
        $("#" + GridName).jqxGrid('selectrow', rowIndex);
    });
}

以下是应该创建网格并分配事件绑定的脚本部分：

function AccountsMulticolumn(GridName, data, rePopulate) {
    var _Object = $("#" + GridName);
    var _ObjectParent = _Object.parent();
    var _ObjectParentParent = _Object.parent().parent();

//      if (rePopulate) {
//          _Object.remove();
//          _ObjectParent.append("<div id='" + GridName + "'></div>")
//      }

    var source = { localdata: data, datatype: "array" };

    $(_ObjectParentParent).jqxDropDownButton({ width: 150, height: 25 });
    $(_Object).jqxGrid({
        width: 550,
        height: 200,
        source: source,
        theme: 'energyblue',
        columns: [
            { text: '', datafield: 'AccountIndex', width: 0 },
            { text: 'Account Name', datafield: 'AccountName', width: 300 },
            { text: 'Account Type', datafield: 'AccountType', width: 200 }
        ]
    });

    $(_Object).jqxGrid('selectionmode', 'singlerow');

    $(_Object).bind('rowselect', function (event) {
        var args = event.args;
        var row = $(_Object).jqxGrid('getrowdata', args.rowindex);

        if (row["AccountName"].toString().toLowerCase() !== "new") {
            var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row["AccountName"] + '</div>';
            _ObjectParentParent.jqxDropDownButton('close');
        }
        $(_ObjectParentParent).jqxDropDownButton('setContent', dropDownContent);
        if (row["AccountName"].toString().toLowerCase() === "new") {
            _ObjectParentParent.jqxDropDownButton('close');
            $("#divNewAccountDetails").dialog("open");
            $(_Object).jqxGrid('clearselection');
            g_JQXGridName = GridName;
        }
    });
}

以下是Script部分，它从API获取数据并将其解析为JQXGrid函数的可用格式：

function PopulateAccountArray(GridName, ShowNew, rePopulate) {
    callService("GET", g_WebServiceAccountsGetAllSpecialURL, null, function (jsonResult) {
        var data = new Array();

        var AccountIndex_Default = [""];
        var AccountName_Default = [""];
        var AccountNotes_Default = [""];

        if (ShowNew) {
            AccountName_Default = ["New"];
        }

        var _oAccountID = [];
        var _oAccountName = [];
        var _oAccountNotes = [];

        if (jsonResult.length > 0) {
            for (i = 0; i < jsonResult.length; i++) {
                _oAccountID[i] = jsonResult[i].RecordID;
                _oAccountName[i] = jsonResult[i].AccountName;
                _oAccountNotes[i] = jsonResult[i].AccountType;
            };

            var AccountIndex_FromService = _oAccountID;
            var AccountName_FromService = _oAccountName;
            var AccountType_FromService = _oAccountNotes;

            var AccountIndex = AccountIndex_Default.concat(AccountIndex_FromService);
            var AccountName = AccountName_Default.concat(AccountName_FromService);
            var AccountType = AccountNotes_Default.concat(AccountType_FromService);
        } else {
            var AccountIndex = AccountIndex_Default;
            var AccountName = AccountName_Default;
            var AccountType = AccountNotes_Default;
        }

        for (var i = 0; i < AccountIndex.length; i++) {
            var row = {};
            row["AccountIndex"] = AccountIndex[i];
            row["AccountName"] = AccountName[i];
            row["AccountType"] = AccountType[i];
            data[i] = row;
        }

        AccountsMulticolumn(GridName, data, rePopulate);
    });
}

最后我的AJAX电话：

function callService(Type, Url, Data, successFunction) {
    $.ajax({
        type: Type,                     // GET or POST or PUT or DELETE verb
        dataType: "json",
        async: false,
        url: Url,                       // Location of the service
        data: Data,                     // Data sent to server
        success: successFunction,
        error: serviceErrorHandler      // When Service call fails
    });
}

Answer 1

原来，我是我自己最大的敌人。我意识到函数调用的位置几乎是重要。因此，在完全重写我的函数，mvc razor代码放置，确保我在AJAX调用中使用同步调用，并重新指定JQ Widget网格的网格数据后，所有问题都得到了解决。

奇怪的执行JavaScript，JQuery和JQWidgets

1 个答案: