Блог

Прежде всего, я прочитал все разделы об этой проблеме и не смог найти решения. По сути, я пытаюсь применить простой вложенный gridview в моем проекте MVC. Все работает нормально, за исключением функции развертывания / свертывания. Я реализую это с помощью этого скрипта:

  $(document).ready(function () {
                var size = $("#main #gridT > thead > tr > th").size(); // get total column
                $("#main #gridT > thead > tr > th").last().remove(); // remove last column header
                $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
                $("#main #gridT > tbody > tr").each(function (i, el) {
                    $(this).prepend(
                            $("<td></td>")
                            .addClass("hoverEff")
                            .addClass("expand")
                            .attr('title', "click for show/hide")
                        );

                    //now get sub table from last column and add this to the next new added row
                    var table = $("table", this).parent().html();
                    //add new row with this subtable
                    $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='"   (size - 1)   "'>"   table   "</td></tr>");
                    $("table", this).parent().remove();
  

—>>> До этого момента все работало гладко.

       //// add click event for make collapsible
                $(".hoverEff", this).live('click', function () {
                    alert($(".hoverEff").parent().closest("tr").next().text());
                    $(".hoverEff").parent().closest("tr").next().slidetoggle(100);
                    $(".hoverEff").toggleclass("expand collapse");
                });
            });
            //by default make all subgrid in collapse mode
            $("#main #gridt > tbody > tr td.expand").each(function (i, el) {
                $(this).toggleclass("expand collapse");
                $(this).parent().closest("tr").next().slidetoggle(100);
            });

        });
  

Когда я открываю свою страницу, подсетки не сворачиваются, и когда я нажимаю на кнопку, это ничего не запускает. Я попытался проверить, работает ли функция с этим кодом:

 alert($(".hoverEff").parent().closest("tr").next().text());
  

и это так. Я также слышал, что .slidetoggle не может влиять на встроенные элементы, но мой элемент — это tr внутри таблицы. Я тоже это слышал .live удален в jQuery 2.0.0, но у меня установлен jQuery 3.0.0 через NuGet. Я не могу вызвать событие .on (‘click’), и я начинаю думать, что я что-то напутал в рендеринге пакета.

Моя сетка:

 <div class="inner" id="inner2">
        <div id="main" style="padding:25px; background-color:white;">
            @grid.GetHtml(
            htmlAttributes: new { id = "gridT", width = "700px" },
            columns: grid.Columns(
                    grid.Column("singleUser.RA_Responsible_Person", "RA Responsible Person"),
                    grid.Column("singleUser.Issues_Count", "Issues Count"),
                    grid.Column(header: "Min Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Min_Deadline)),
                    grid.Column(header: "Max Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Max_Deadline)),

                    grid.Column(format: (item) =>
                    {
                        WebGrid subGrid = new WebGrid(source: item.Cases);
                        return subGrid.GetHtml(
                            htmlAttributes: new { id = "subT" },
                            columns: subGrid.Columns(
                                    subGrid.Column("Issue_ID", "Issue_ID"),
                                    subGrid.Column("Issue", "Issue"),
                                    subGrid.Column("Case_Status", "Case_Status"),
                                    subGrid.Column("Issued_by", "Issued_by"),
                                    subGrid.Column("Issue_Date", "Issue_date"),
                                )
                            );
                    })
        )
    )
        </div>
  

Пожалуйста, помогите! Заранее спасибо!

Есть ли какие-либо ошибки консоли?

Я считаю, что toggleclass должен быть toggleClass, не так ли? То же самое с slideToggle?

Ранее я использовал Google graphs на этой странице и добавил jquery в качестве библиотеки по ссылке на googleapis. Я удалил это, и я думаю, что все функции перестали работать, но это только начало.

Я создам еще одну проблему с другим контентом.