我对前端很陌生,最近运行 npm i bootstrap-multiselect,现在引导程序位于节点模块文件中,尝试调用 multiselect 但没有加载 JS 文件我假设需要在 report.js 中执行此操作?谢谢
report.js
require("./datepicker");
require("./object");
require("./spinner");
require("./dialogs");
require("./binding");
require("./spinner");
const moment = require("moment");
(function (sx, jQuery, moment) {
var Report = sx.Object.inherits({
init: function () {
this.rejectModel = new RejectReportModel();
this.actionedModel = new ActionedReportModel();
this.modal = new sx.FormDialog({
title: "Select a date range",
content: $("#reject-report"),
okText: "Run report",
cancelText: "Cancel",
validate: {}
}, this.rejectModel);
this.modalActioned = new sx.FormDialog({
title: "select a date range",
content: $("#actioned-report"),
okText: "Run report",
cancelText: "Cancel",
validate: {}
}, this.actionedModel);
sx.spinner.hide();
this.rejectButton = $("#btn-reject-report");
this.statusButton = $("#btn-status-report");
this.overdueButton = $("#btn-overdue-report");
this.missingButton = $("#btn-missing-report");
this.actionedButton = $("#btn-actioned-report");
this.rejectButton.click(jQuery.proxy(this.rejectReport, this));
this.statusButton.click(jQuery.proxy(this.statusReport, this));
this.overdueButton.click(jQuery.proxy(this.overdueReport, this));
this.missingButton.click(jQuery.proxy(this.missingReport, this));
this.actionedButton.click(jQuery.proxy(this.actionedReport, this));
},
rejectReport: function () {
this.modal
.show()
.done(jQuery.proxy(this.rejectGenerate, this));
},
rejectGenerate: function () {
this.generate("/report/reject", this.rejectModel);
},
statusReport: function () {
},
overdueReport: function () {
},
missingReport: function () {
},
actionedReport: function () {
this.modalActioned
.show()
.done(jQuery.proxy(this.actionedGenerate, this));
},
actionedGenerate: function () {
this.generate("/report/actioned", this.actionedModel);
},
generate: function (url, model) {
this.currentModel = model;
sx.spinner.show();
jQuery
.ajax({
url: url,
data: model.data,
xhrFields: {
responseType: "arraybuffer"
},
type: "POST",
headers: {
Accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
}
})
.done(jQuery.proxy(this.success, this))
.always(jQuery.proxy(this.complete, this));
},
success: function (result, status, response) {
var date = moment(new Date())
.format("DDMMMYYYYHHmmss");
var blob = new Blob([result], { type: "" });
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = `${this.currentModel.filename}_${date}.xlsx`;
link.click();
},
complete: function () {
sx.spinner.hide();
}
});
var RejectReportModel = sx.Binding.inherits({
init: function () {
this.bind("from");
this.bind("to");
this.filename="RejectReasonReport";
}
});
var ActionedReportModel = sx.Binding.inherits({
init: function () {
this.bind("actioned_from");
this.bind("actioned_to");
this.bind("Actioned_DepartmentName");
this.filename = "ActionedApplicationReport";
}
});
sx.Report = Report;
})(sx, $, moment);
索引.cshtml
@section Scripts {
<script type="text/javascript">
var report = new sx.Report();
</script>
}
<partial name="_Dialogs" />
<partial name="_RejectReport" />
<partial name="_ActionedReport" />
<partial name="_Spinner" />
<div class="container">
<section>
<div class="banner text-center">
<h1>Reports</h1>
<div class="sticky-space"></div>
</div>
<section class="section-body">
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<p class="table-title">Run a report</p>
<hr />
<div class="row">
<div class="col-md-3">
<button class="btn btn-info full" id="btn-reject-report"><span class="icon-after external-orange">Reject reason report</span></button>
</div>
<div class="col-md-3">
<button class="btn btn-info full" id="btn-status-report"><span class="icon-after external-orange">Under action status report</span></button>
</div>
<div class="col-md-3">
<button class="btn btn-info full" id="btn-overdue-report"><span class="icon-after external-orange">Overdue report</span></button>
</div>
<div class="col-md-3">
<button class="btn btn-info full" id="btn-missing-report"><span class="icon-after external-orange">Missing application report</span></button>
</div>
<div></div>
<div class="col-md-3">
<button class="btn btn-info full" id="btn-actioned-report"><span class="icon-after external-orange">Actioned application report</span></button>
</div>
</div>
<div class="row">
</div>
<hr />
</div>
</div>
</div>
</section>
</section>
</div>
_ActionedReport.cshtml @model Sx.Workflow.Server.ViewModels.ReportVm @ @
<form class="" id="actioned-report">
<div class="row">
<div class="col-md-12">
<div class="form-layout">
<div class="form-group row">
<div class="col">
<label class="control-label">From</label>
</div>
<div class="col">
<div class="form-control-container">
<input id="actioned_from"
name="from"
class="form-control datepicker"
type="text"
data-min-date="-365d"
data-max-date="+0d"
data-rule-required="true"
data-rule-date="true"
data-rule-date-less-than="to" />
<div class="actions-container">
<span class="icon-after calendar-blue"></span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col">
<label class="control-label">To</label>
</div>
<div class="col">
<div class="form-control-container">
<input id="actioned_to"
name="to"
type="text"
class="form-control datepicker"
data-min-date="-365d"
data-max-date="+0d"
data-rule-required="true"
data-rule-date="true"
data-rule-date-greater-than="from" />
<div class="actions-container">
<span class="icon-after calendar-blue"></span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col">
<label class="control-label">Department</label>
</div>
<div class="col">
<div class="form-control-container">
<select class="form-control" asp-for="Actioned_DepartmentName" asp-items="Model.Departments" multiple>
<option value="">Please select department(s)...</option>
</select>
</div>
</div>
</div>
@Html.ListBoxFor(model => model.Actioned_DepartmentName, new MultiSelectList(Model.Departments, "Value", "Text"), new { @class = "multiselect listbox123", multiple = "multiple", id = "Subjects_dropdown" })
</div>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#Subjects_dropdown').multiselect();
alert('test')
});
</script>