我正在扩展一个允许用户选择类型的网页（对应于分区，部门，位置等参考表），因此现有代码会生成呈现所选类型的表格的HTML。用于编辑的记录：用于名称，描述，状态的单选下拉列表，更新按钮的文本框。 新类型需要多选下拉列表，并选择当前值。 bootstrap multiselect被渲染得很好 - 我看到了包含它们的记录的当前值，并且＆＃34;没有选择＆＃34;为了其他人。当我点击下拉列表时，它与Bootstrap面板上的所有其他输入/选择/按钮一起被禁用。
这是css：
<link href="/Content/jquery-ui.css" rel="stylesheet">
<link href="/Content/jquery-ui-timepicker-addon.css" rel="stylesheet">
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/site.css" rel="stylesheet">
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet">
<link href="/Content/Datatables/datatables.bootstrap.css" rel="stylesheet">
<link href="/Content/Datatables/fixedHeader.bootstrap.css" rel="stylesheet">
<link href="/Content/Datatables/responsive.bootstrap.css" rel="stylesheet">
<link href="/Content/Datatables/select.bootstrap.css" rel="stylesheet">
这是脚本：
<script src="/Scripts/jquery-2.2.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-filestyle.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/bootstrap-multiselect-collapsible-groups.js"></script>
<script src="/Scripts/jquery-validate.js"></script>
<script src="/Scripts/jquery-validate-unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui-timepicker-addon.js"></script>
<script src="/Scripts/DataTables/jquery.datatables.js"></script>
<script src="/Scripts/DataTables/datatables.bootstrap.js"></script>
<script src="/Scripts/DataTables/datatables.fixedHeader.js"></script>
<script src="/Scripts/DataTables/datatables.responsive.js"></script>
<script src="/Scripts/DataTables/datatables.select.js"></script>
我在这里生成包含要更新的记录的HTML表格：
var siteRoot = '@Url.Content("~/")';
/* functionality and field are selected from dropdowns on the page; they identify which type (i.e. reference table) to update.
field 'baseline' is the one that needs a multiselect.
*/
var populateTable = function (functionality, field) {
$("#dataGridPanel table tbody").html("");
getDataValues(functionality, field)
.success(function (data) {
if (data != null) {
createTableForFieldType($("#dataGridPanel table"), functionality, field, data);
}
});
}
var getDataValues = function (functionality, fieldName) {
return $.ajax({
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
url: siteRoot + "DataManagement/GetEntityValues",
data: JSON.stringify({
"functionality": functionality,
"fieldName": fieldName
})
});
};
var createTableForFieldType = function (table, functionality, fieldName, rowData) {
table = $(table);
table.html("");
table.append($(document.createElement("thead")).append(createTableHeaderRow(fieldName)));
table.append($(document.createElement("tbody")));
switch (fieldName) {
case "baseline":
getDataValues(functionality, "operatingsystem").success(function (dependencyData) {
for (var i = 0; i < rowData.length; i++) {
$("tbody", table).append(createTableUpdateRow(functionality, fieldName, rowData[i]));
}
/* load all Baseline OS dropdowns with all OS values */
var dropdowns = $("select.operatingsystem");
for (var i = 0; i < dependencyData.length; i++) {
var option = $(document.createElement("option")).val(dependencyData[i].Id).text(dependencyData[i].Name);
dropdowns.append(option);
}
dropdowns.each(function () {
$(this).multiselect();
});
/* select the current value(s), stored in an attribute of each select as a comma-separated string of OSIds, in createTableUpdateRow */
dropdowns.each(function () {
var OSIds = $(this).attr("osids");
if (OSIds.length > 0)
{
var OSIdArray = OSIds.split(",");
$(this).multiselect("select", OSIdArray);
}
$(this).multiselect("refresh");
});
});
break;
default:
table.append(createTableAddRow(fieldName));
for (var k = 0; k < rowData.length; k++) {
$("tbody", table).append(createTableUpdateRow(functionality, fieldName, rowData[k]));
}
break;
}
};
删除了无关代码的createTableUpdateRow函数（多选下拉列表是操作系统ID /名称列表）：
var createTableHeaderRow = function (fieldName) {
var row = $(document.createElement("tr"));
var headerNames = [];
switch (fieldName) {
case "baseline":
headerNames = ["Name", "Status", "Description", "SourceId", "OS", "Last Modified By", "Last Modified Date"];
break;
}
for (var i = 0; i < headerNames.length; i++) {
row.append($(document.createElement("td")).text(headerNames[i]));
}
return row;
};
var createTableUpdateRow = function (functionality, fieldName, rowData) {
var row = $(document.createElement("tr")).attr("data-forid", rowData.Id || rowData.UniqueId);
var cellContents = [];
var lastModifiedDate = rowData.LastModifiedDate == null ? null : new Date(parseInt(rowData.LastModifiedDate.substr(6)));
var dateFormatted = (lastModifiedDate != null ? lastModifiedDate.toDateString() : "");
var statusSelect = "<select class=\"form-control status\">" +
"<option value=\"\"" + (rowData.Status == null ? " selected=\"selected\"" : "") + ">--Select a Status--</option>" +
"<option value=\"1\"" + (rowData.Status === 1 ? " selected=\"selected\"" : "") + ">Active</option>" +
"<option value=\"0\"" + (rowData.Status === 0 ? " selected=\"selected\"" : "") + ">Inactive</option>" +
"</select>";
var dependentSelect = $(document.createElement("select")).addClass("form-control");
switch (fieldName) {
case "baseline":
/* attr("osids") has the current comma-separated OSId values */
var multiSelect = $(document.createElement("select")).addClass("operatingsystem").attr("multiple", "multiple").attr("osids", rowData.OSIds == null ? "" : rowData.OSIds);
/* multiSelect.append("<option value=\"\"" + (rowData.Id == null ? " selected=\"selected\"" : "") + ">--Select an OS--</option>"); */
cellContents = [
rowData.Name,
statusSelect,
rowData.Description,
rowData.SourceId,
multiSelect,
rowData.LastModifiedByUserId,
dateFormatted,
$(document.createElement("button")).attr("data-action", "update").attr("data-forid", rowData.Id).attr("type", "button").addClass("btn btn-primary").html("Update")
];
break;
default:
break;
}
for (var i = 0; i < cellContents.length; i++) {
row.append($(document.createElement("td")).append(cellContents[i]));
}
return row;
};
答案 0 :(得分：0)
解决了它。在代码的其他地方，面板中所有按钮元素的点击事件都在检查数据值。有问题的按钮是添加和更新按钮（即数据值＆＃39;添加＆＃39;或更新＆＃39;）。介绍multiselect添加了另一个按钮元素。我添加了一些代码来使这个事件处理程序忽略多选按钮，现在一切都很好。