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
});
}