jquery - 在 MVC3 Webgird 中展开和折叠

Question

有人可以帮我实现展开/折叠功能吗？

单击展开按钮时，我需要获取相应记录的相关数据并将其显示为子行。

grid.Column(header: "Expand", 
    format: @<text>
        <a href='#' class="expandable-open-button" rel="1" >&gt;</a> 
        <div class="expandable-child-row"></div> 
     </text>)

我正在考虑使用 jQuery。单击“扩展”链接，我们可以从数据库中获取数据并将 webgrid html 设置为元素。

Answer 1

使用 JQuerynext选择“子”元素（实际上是兄弟）；并slideToggle扩展元素：

// add the click handler
$(".expandable-open-button").on("click", function(e) {

    // prevent the default action on the link
    e.preventDefault();

    // select the details row and toggle its visibility
    $(this).next(".expandable-child-row").slideToggle();
});

编辑您可以通过将项目 ID 作为数据属性添加到标记来传递它。

format: (item) => @<text><a data-id='@item.ID'>

然后使用attrJQuery 检索它：

.on("click", function(e) {

    var id = $(this).attr("data-id");   
    alert(id);
... }