0
好的，...我正在使用JQuery v2.2.3，JQWidgets v4.1.2用于ASP.NET MVC 5前端，用于后端我正在使用ASP.NET c＃。奇怪的执行JavaScript，JQuery和JQWidgets
我的网页与SPA相似，因为它非常庞大。我遇到困难的部分是脚本应该使用同步Ajax调用重新填充所有JQXGrid的位置。我知道Ajax应该是一个同步的，但是当一个同步的ajax调用忽略了我的重复调用。这是应该发生的事情：
- 当最终用户从帐户下拉列表中选择新的时候，脚本关闭网格，清除选择并打开新帐户对话框。
- 创建帐户后，新帐户创建对话框关闭。
- （这是奇怪的地方）该脚本然后应该重新填充页面上的所有JQXGrids以反映添加。
- 最后，创建的帐户应该在创建帐户的下拉列表中自动选择。
下面是脚本实际上是在做它的当前状态：
- 当最终用户选择从帐户下拉新的脚本关闭电网，清除选择并打开新的账户对话。
- 创建帐户后，新帐户创建对话框关闭。
- 该脚本然后尝试重新填充页面上的所有JQXGrid以反映添加。
- 该脚本在每个下拉列表下方都有重复的下拉列表。
- 在创建帐户的下拉列表中自动选择创建的帐户。但是，选中网格后，网格只显示该帐户，当选中重复网格时，关闭对话框时，所有帐户将显示和，单击的下拉网格（副本）会保留在屏幕上。
这里是所有JQXGrids建模后，我的HTML /剃刀脚本部分：
<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;
}
});
}
这里是脚本部分从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
});
}