JQuery StickyTableHeaders插件无法正常工作

时间:2016-09-28 16:26:31

标签: jquery asp.net-mvc

我正在使用StickyTableHeaders插件,它在我在Visual Studio中运行时起作用但是我直接从浏览器运行时出现错误: SCRIPT438:Object不支持属性或方法'stickyTableHeaders'

我的Scripts文件夹中包含jquery.stickytableheaders.js。任何人都知道为什么这不能在Visual Studio之外工作?

以下是我的观点:

@model PagedList.StaticPagedList<Budget.Models.Budget_Mod.Budgets>
@using PagedList.Mvc;

<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

    @{
        ViewBag.Title = "Index";
    }

    <h2>Prepare Budget</h2>

    @if (TempData["Message"] != null)
    {
        <script language="javascript">
            alert('@TempData["Message"]');
        </script>
    }

    @using (Html.BeginForm("SaveData", "PrepareBudget", FormMethod.Post))
    {
        @Html.ValidationSummary(true)

        <table id="budgetTable">
            <thead>
                <tr>
                    <th style="width: 100px; background-color:#7ac0da">Fund</th>
                    <th style="width: 400px; background-color: #7ac0da; ">Function</th>
                    <th style="width: 2500px; background-color: #7ac0da; ">Object</th>
                    <th style="width: 600px; background-color: #7ac0da; ">Department</th>
                    <th style="width: 600px; background-color: #7ac0da; ">Location</th>
                    <th style="width: 400px; background-color: #7ac0da; ">Project</th>
                    <th style="width: 800px; background-color: #7ac0da; " align="center">@ViewData["prev_yr2_yr"]<br /> Actuals</th>
                    <th style="width: 800px; background-color: #7ac0da; " align="center">@ViewData["prev_yr1_yr"]<br /> Actuals</th>
                    <th style="width: 800px; background-color: #7ac0da; " align="center">@ViewData["Curr_yr_yr"]<br /> Budget</th>
                    <th style="width: 800px; background-color: #7ac0da; " align="center">@ViewData["next_yr_yr"]<br /> Proposed Budget</th>
                    <th style="width: 1000px; background-color: #7ac0da; ">Nature</th>
                    <th style="width: 1000px; background-color: #7ac0da; ">The Need</th>
                    <th style="width: 1000px; background-color: #7ac0da; ">Impact If Not Funded</th>
                    <th style="width: 1000px; background-color: #7ac0da; ">Aligns to District<br />Strategic Goal</th>
                    <th style="width: 1000px; background-color: #7ac0da; ">Aligns to District<br />Priority</th>
                    <th style="width: 1000px; background-color: #7ac0da; ">Rationale or <br />Computation</th>
                    <th style="width: 500px; background-color: #7ac0da; ">Is this an<br />Investment<br />Request?</th>
                    <th style="width: 1000px; background-color: #7ac0da; ">If this is an<br />Investment request,<br />please justify.</th>
                    <th style="width: 800px; background-color: #7ac0da; ">Major Object Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th style="width:100px"></th>
                    <th style="width:400px"></th>
                    <th style="width:2500px"></th>
                    <th style="width:600px"></th>
                    <th style="width:600px"></th>
                    <th style="width:400px"></th>
                    <th style="width:800px"></th>
                    <th style="width:800px"></th>
                    <th style="width:800px"></th>
                    <th style="width:800px"></th>
                    <th style="width:1000px"></th>
                    <th style="width:1000px"></th>
                    <th style="width:1000px"></th>
                    <th style="width:1000px"></th>
                    <th style="width:1000px"></th>
                    <th style="width:1000px"></th>
                    <th style="width:500px"></th>
                    <th style="width:1000px"></th>
                    <th style="width:800px"></th>
                    <th style="width:1000px">Total Budget<br />Requested</th>
                </tr>


                @{
        string prevObject = "0";
        string prevDept = "0";
                }

                @for (var i = 0; i < @Model.Count; i++)
                {
                    if (@Model[i].acct_object_type != prevObject)
                    {
                        <tr>
                            <td colspan="3" style="font-weight:bold">@Model[i].acct_object_type</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td style="font-weight:bold">@String.Format("{0,14:c}", Model[i].major_object_total)</td>
                            @if (@Model[i].department != prevDept)
                            {
                                <td style="font-weight:bold">@String.Format("{0,14:c}", Model[i].total_budget_requested)</td>
                            }
                        </tr>
                    }
                    prevObject = Model[i].acct_object_type;
                    prevDept = Model[i].department;
                    @Html.HiddenFor(model => model[i].version)
                    @Html.HiddenFor(model => model[i].fy)
                    @Html.HiddenFor(model => model[i].acct_object_type)
                    @Html.HiddenFor(model => model[i].created_by)
                    @Html.HiddenFor(model => model[i].date_created)
                    @Html.HiddenFor(model => model[i].modified_by)
                    @Html.HiddenFor(model => model[i].date_modified)
                    @Html.HiddenFor(model => model[i].major_object_total)
                    @Html.HiddenFor(model => model[i].total_budget_requested)

                    <tr>
                        <td align="left">
                            @Model[i].fund
                            @Html.HiddenFor(model => model[i].fund)
                        </td>
                        <td align="left">
                            @Model[i].acct_function
                            @Html.HiddenFor(model => model[i].acct_function)
                        </td>
                        <td style="width:2500px" align="left">
                            @Model[i].acct_object
                            @Html.HiddenFor(model => model[i].acct_object)
                        </td>
                        <td align="left">
                            @Model[i].department
                            @Html.HiddenFor(model => model[i].department)
                        </td>
                        <td align="left">
                            @Model[i].location
                            @Html.HiddenFor(model => model[i].location)
                        </td>
                        <td align="left">
                            @Model[i].program
                            @Html.HiddenFor(model => model[i].program)
                        </td>
                        <td align="right">
                            @String.Format("{0,14:c}", Model[i].prev_yr2_actuals)
                            @Html.HiddenFor(model => model[i].prev_yr2_actuals)
                        </td>
                        <td align="right">
                            @String.Format("{0,14:c}", Model[i].prev_yr1_actuals)
                            @Html.HiddenFor(model => model[i].prev_yr1_actuals)
                        </td>
                        <td align="right">
                            @String.Format("{0,14:c}", Model[i].curr_yr_budget)
                            @Html.HiddenFor(model => model[i].curr_yr_budget)
                        </td>

                        @if (Model[i].acct_object_type == "10000 Salaries" || Model[i].acct_object_type == "20000 Employee Benefits")
                        {
                            <td align="right" style="text-align: right">
                                @String.Format("{0,14:c}", Model[i].next_yr_proposed_budget)
                                @Html.HiddenFor(model => model[i].next_yr_proposed_budget)
                            </td>
                            <td align="left">
                                @Model[i].nature
                                @Html.HiddenFor(model => model[i].nature)
                            </td>
                            <td align="left">
                                @Model[i].need
                                @Html.HiddenFor(model => model[i].need)
                            </td>
                            <td align="left">
                                @Model[i].impact_if_not_funded
                                @Html.HiddenFor(model => model[i].impact_if_not_funded)
                            </td>
                            <td align="left">
                                @Model[i].align_to_district_goal
                                @Html.HiddenFor(model => model[i].align_to_district_goal)
                            </td>
                            <td align="left">
                                @Model[i].align_to_district_priority
                                @Html.HiddenFor(model => model[i].align_to_district_priority)
                            </td>
                            <td align="left">
                                @Model[i].rationale
                                @Html.HiddenFor(model => model[i].rationale)
                            </td>
                            <td align="left">
                                @Model[i].investment_request
                                @Html.HiddenFor(model => model[i].investment_request)
                            </td>
                            <td align="left">
                                @Model[i].investment_request_justification
                                @Html.HiddenFor(model => model[i].investment_request_justification)
                            </td>
                        }
                        else
                        {
                            <td align="right" style="text-align: right">
                                @Html.TextBoxFor(model => model[i].next_yr_proposed_budget, "{0:0.00}", new { data_val = "false" })
                                @Html.ValidationMessageFor(model => model[i].next_yr_proposed_budget)
                            </td>
                            <td align="left">
                                @Html.TextAreaFor(model => model[i].nature, new { cols = 50, rows = 3, data_val = "false" })
                                @Html.ValidationMessageFor(model => model[i].nature)
                            </td>
                            <td align="left">
                                @Html.TextAreaFor(model => model[i].need, new { cols = 50, rows = 3, data_val = "false" })
                                @Html.ValidationMessageFor(model => model[i].need)
                            </td>
                            <td align="left">
                                @Html.TextAreaFor(model => model[i].impact_if_not_funded, new { cols = 50, rows = 3, data_val = "false" })
                                @Html.ValidationMessageFor(model => model[i].impact_if_not_funded)
                            </td>
                            <td align="left">
                                @if (Model[i].align_to_district_goal.Length > 1)
                                {
                                    @Html.DisplayFor(model => model[i].align_to_district_goal)
                                    @Html.HiddenFor(model => model[i].align_to_district_goal)
                                }
                                else
                                {
                                    @Html.DropDownListFor(model => model[i].align_to_district_goal, ViewData["goals"] as SelectList, new { @class = "dropdownSource", data_val = "false" })
                                    @Html.ValidationMessageFor(model => model[i].align_to_district_goal)
                                    @Html.HiddenFor(model => model[i].align_to_district_goal)
                                }
                            </td>
                            <td align="left">
                                @if (Model[i].align_to_district_priority.Length > 1)
                                {
                                    @Html.DisplayFor(model => model[i].align_to_district_priority)
                                    @Html.HiddenFor(model => model[i].align_to_district_priority)
                                }
                                else
                                {
                                    @Html.DropDownListFor(model => model[i].align_to_district_priority, new SelectList(string.Empty, "Value", "Text"), new { @class = "clsColumnNames", data_val = "false" })
                                    @Html.ValidationMessageFor(model => model[i].align_to_district_priority)
                                    @Html.HiddenFor(model => model[i].align_to_district_priority)
                                }
                            </td>
                            <td align="left">
                                @Html.TextAreaFor(model => model[i].rationale, new { cols = 50, rows = 3, data_val = "false" })
                                @Html.ValidationMessageFor(model => model[i].rationale)
                            </td>
                            <td align="left">
                                @Html.TextAreaFor(model => model[i].investment_request, new { data_val = "false" })
                            </td>
                            <td align="left">
                                @Html.TextAreaFor(model => model[i].investment_request_justification, new { cols = 50, rows = 3, data_val = "false" })
                            </td>
                        }
                    </tr>
                }
            </tbody>
        </table>
        <br />
        <div class="col-sm-10">
            @Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
            Showing @Model.FirstItemOnPage to @Model.LastItemOnPage of @Model.TotalItemCount
        </div>

        <p>
            <input type="submit" formnovalidate="formnovalidate" value="Save Data" name="SaveData" id="SaveData" />
        </p>
        <br /><br />

        if (@ViewBag.Role == "Budget_Role" || @ViewBag.Role == "Chiefs_Role")
        {
            <p>
                <input type="submit" value="Save and Post Data" name="SavePost" id="SavePost" />
            </p>
        }


        @Html.AntiForgeryToken()
        <p>
            <h3>@Html.ActionLink("Back to Budget Menu", "Index", "Home")    <a href="https://apecsreports.scsk12.org/Secure/">Back to APECS Reports Menu</a></h3>
        </p>
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.stickytableheaders.js"></script>

<script>
    $(document).ready(function () {
        $("table").stickyTableHeaders();
    });

</script>

    <script>
        $("select.dropdownSource").on("change", (function () {

            var columnSelectBox = $(this).parent("td").next("td").find("select.clsColumnNames");

            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetPriorities","PrepareBudget")',
                dataType: 'json',
                data: { goals: $(this).find("option:selected").text() },
                success: function (str) {

                    $.each(str, function (Value, Text) {
                        columnSelectBox.append('<option value ="' + Text + '">' + Text + '</option>');

                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve columns.' + ex);
                }
            });
            return false;
        }));
    </script>

1 个答案:

答案 0 :(得分:0)

您的src="../Scripts/jquery.stickytableheaders.js"可能没有正确拉入js文件。

尝试 <script src="~/Scripts/jquery.stickytableheaders.js"></script>