Question

首先，我已经阅读了有关此问题的所有主题，但无法找到解决方案。基本上我正在尝试在我的MVC项目中应用一个简单的嵌套gridview。除扩展/折叠功能外，一切正常。我用这个脚本实现它：

 $(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();

- ＆gt;＆gt;＆gt;到目前为止，一切顺利。

      //// 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中删除了，但是我通过NuGet安装了jQuery 3.0.0。我无法触发.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>

请协助！提前谢谢！

Answer 1

是否有控制台错误？

我相信toggleclass应该是toggleClass应该不是吗？与slideToggle相同吗？

Answer 2

我之前在此页面中使用过google图表，并通过指向googleapis的链接将jquery添加为库。我删除它，我认为所有功能都停止工作，但这是一个开始。

我会针对不同的内容提出另一个问题。

.toggleclass和.slidetoggle不起作用

2 个答案: