0
當用戶從下拉列表中選擇新的時候,我正在使用JQ Widgets多列下拉列表和JQ UI對話框來創建新帳戶。問題是,當對話被打開,下拉不會關閉,我已經嘗試了.close()
方法,我從中得到的所有方法都是無效的方法調用錯誤。有沒有辦法在打開JQUI對話時關閉JQX多列下拉菜單?
這裏是一個屏幕截圖:
這裏是我的代碼:
$("#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>
所以給出了上述信息,是可以關閉此列表當對話打開?