2015-06-05 21 views
0

當用戶從下拉列表中選擇新的時候,我正在使用JQ Widgets多列下拉列表和JQ UI對話框來創建新帳戶。問題是,當對話被打開,下拉不會關閉,我已經嘗試了.close()方法,我從中得到的所有方法都是無效的方法調用錯誤。有沒有辦法在打開JQUI對話時關閉JQX多列下拉菜單?

這裏是一個屏幕截圖:

enter image description here

這裏是我的代碼:

$("#divNewAccount").dialog({ 
 
\t autoOpen: false, 
 
\t modal: true, 
 
\t title: "New Account", 
 
\t width: 600, 
 
\t buttons: { 
 
\t \t Ok: function() { 
 
\t \t \t // TODO: Add logic and code to add record to database and autopopulate #jqxAccountDropdown AND select record value just updated 
 
\t \t \t $(this).dialog("close"); 
 
\t \t }, 
 
\t \t Cancel: function() { 
 
\t \t \t $(this).dialog("close"); 
 
\t \t } 
 
\t } 
 
}); 
 

 
// Start Multicolum for Accounts 
 
// prepare the data 
 
var data = new Array(); 
 

 
var AccountIndex_Default = [""]; 
 
var AccountName_Default = ["New"]; 
 
var AccountType_Default = [""]; 
 

 
if(@(Html.Raw(JsonConvert.SerializeObject(ViewBag.ServiceID))) !== null){ 
 
\t var AccountIndex_FromService = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountID)))]; 
 
\t var AccountName_FromService = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountName)))]; 
 
\t var AccountType_FromService = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountType)))]; 
 

 
\t var AccountIndex = ServiceIndex_Default.concat(AccountIndex_FromService); 
 
\t var AccountName = ServiceName_Default.concat(AccountName_FromService); 
 
\t var AccountType = ServiceNotes_Default.concat(AccountType_FromService); 
 
} else { 
 
\t var AccountIndex = AccountIndex_Default; 
 
\t var AccountName = AccountName_Default; 
 
\t var AccountType = AccountType_Default; 
 
} 
 

 
for (var i = 0; i < AccountIndex.length; i++) { 
 
\t var row = {}; 
 
\t row["accountindex"] = AccountIndex[i]; 
 
\t row["accountname"] = AccountName[i]; 
 
\t row["accounttype"] = AccountType[i]; 
 
\t data[i] = row; 
 
} 
 
var source = { localdata: data, datatype: "array" }; 
 
$("#jqxAccountDropdownButton").jqxDropDownButton({ width: 150, height: 25 }); 
 
$("#jqxAccountDropdownGrid").jqxGrid({ 
 
\t width: 350, 
 
\t height: 200, 
 
\t source: source, 
 
\t theme: 'energyblue', 
 
\t columns: [ 
 
\t { text: '', datafield: 'accountindex', width: 0 }, 
 
\t { text: 'Account Name', datafield: 'accountname', width: 200 }, 
 
\t { text: 'Account Type', datafield: 'accounttype', width: 100 } 
 
\t ] 
 
}); 
 

 
$("#jqxAccountDropdownGrid").bind('rowselect', function (event) { 
 
\t var args = event.args; 
 
\t var row = $("#jqxAccountDropdownGrid").jqxGrid('getrowdata', args.rowindex); 
 
\t var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + 
 
\t \t row["accountname"] + '</div>'; 
 
\t $("#jqxAccountDropdownButton").jqxDropDownButton('setContent', dropDownContent); 
 
\t if (row["accountname"].toString().toLowerCase() === "new") { 
 
\t \t $("#divNewAccount").dialog("open"); 
 
\t } 
 
}); 
 
// End Multicolume for Accounts
<script src="/Content/themes/jquery-ui-1.11.4/jquery-ui.js"></script> 
 
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet" /> 
 
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.theme.css" rel="stylesheet" /> 
 
<link href="/Content/ScrollingTables.css" rel="stylesheet" /> 
 
<link href="/Content/Multiselect.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.base.css" type="text/css" /> 
 
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> 
 
<script type="text/javascript" src="~/jqwidgets/jqxcore.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxbuttons.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxscrollbar.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxmenu.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxgrid.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxgrid.pager.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxgrid.selection.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxdata.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxlistbox.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxdropdownlist.js"></script> 
 
<script type="text/javascript" src="~/jqwidgets/jqxdropdownbutton.js"></script> 
 

 
<div id="jqxAccountDropdownButton"> 
 
\t <div id='jqxAccountDropdownWidget' style="font-size: 13px; font-family: Verdana; float: left;"> 
 
\t \t <div id="jqxAccountDropdownGrid"></div> 
 
\t </div> 
 
</div>

所以給出了上述信息,是可以關閉此列表當對話打開?

回答

0

找到了答案......

使用$("#jqxAccountDropdownButton").jqxDropDownButton('close');

相關問題