如何在 webpack 包中包含 bootstrap-multiselect 添加并使用?

时间:2021-02-11 21:40:16

标签: jquery twitter-bootstrap webpack

我对前端很陌生,最近运行 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>
    

0 个答案:

没有答案