Question

是否可以在MvContribGrid中显示具有嵌套IEnumerable属性的类，例如......

public class ParentViewModel
{
    IEnumerable<Parent> Parents {get;set;}
}

public Class Parent
{
     public string Name{get;set;}
     public IEnumerable<Children> Children {get;set}
}

Answer 1

我有类似的要求，但我使用ajax显示分层信息。它有两个方面帮助我。一个子信息在请求时加载。所以我不必一次加载所有信息，也有助于多级层次结构。

我使用Jquery Datatable和mvccontrib网格进行分页搜索，并引入了分层数据展开折叠链接

<强>更新在我的例子中，我创建了第一列，第一列有一些concat信息，这需要我识别我点击的行。 class .expand是告诉点击它应该展开。一个$ .ajax调用，检索的信息将被附加到被点击的行。 expand / collapse是js方法。你会在下面看到这段代码。

<%Html.Grid(Model)
    .Columns(column =>
            {%>
            <% <td><a id="<%= c.Desc %>_<%= c.No %>" href="#" class="expand"></a></td>                
            <% }).Attributes(c => new Dictionary<string, object> { { "padding-left", " 5px" } });                
                column.For(c => c.Date).Format("{0:dd/MM/yyyy}").Named("Date");
                column.For(c => c.Desc).Named("Description");                   
               }).Attributes(id => "example")
            .Empty("----------- No Ledger Details for current month/Search -----------    ").Render();%>

我使用jquery数据表进行分页并在填充的行中进行搜索。还使用了tabletool插件来获取jquery数据表，这有助于将结果导出到csv / xls / pdf。并复制粘贴我的内容。

 <script language="javascript" type="text/javascript">
  $(document).ready(function () {
    $('#example').dataTable({
        "sDom": 'T<"clear">lfrtip',
        "bProcessing": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bFilter": true,
        "iDisplayLength": 10,
        "bSort": false,
        "oTableTools": {
            "sRowSelect": "multi",
            "sSwfPath": "../../../../Content/media/swf/copy_cvs_xls_pdf.swf",
            "aButtons": ["select_all", "select_none", "copy", "print", {
                "sExtends": "collection",
                "sButtonText": "Save",
                "aButtons": ["csv", "xls", "pdf"]
            }]
        }
    });

});
</script>

崩溃/展开

$("#example a.collapse").live('click', function (event) {
            event.preventDefault();
            $(this).closest('tr').next().slideUp().remove();
            $(this).removeClass("expand");
            $(this).addClass("collapse");
        });
        $("#example a.expand").live('click', function (event) {
            event.preventDefault();
            var parent = $(this).closest('tr');
            var linkid = $(this).attr('id');
            var parts = linkid.split("_");
            var billNo = parts[1];                
            loadBillDetails(parent, billNo);                
            $(this).removeClass("collapse");
            $(this).addClass("expand");
        });

        function loadBillDetails(parent, billNo) {
            var defaultParameters = "{BillNo:" + billNo + "}";
            $.ajax({
                type: "POST",
                url: '<%=Url.Action("GetBillDetails", "Order") %>',
                data: defaultParameters,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: (function (data) {
                    var str = "<tr style='padding:5px;'><td colspan=7><div style='width: 850px; max-height: 300px; overflow: auto; background-color: #F4F4F4;'>";
                    str += "<table width='100%' id='billDetails'><tr align='left'><th>BillNo</th><th>ProductName</th><th>OrderNo</th><th>RollNo</th><th>Qty</th><th>Rate</th><th></th><th></th><th></th><th></th></tr>";
                    if (data.BillDetails.length > 0) {
                        for (var y = 0; y < data.BillDetails.length; y++) {
                            str += "<tr><td>" + data.BillDetails[y].FinalBillNo + "</td><td>" + data.BillDetails[y].ProductName + "</td><td>" + data.BillDetails[y].OrderNo + "</td><td>" + data.BillDetails[y].RollsNo + "</td><td>" + data.BillDetails[y].Qty + "</td><td>" + data.BillDetails[y].Rate + "</td><td></td><td></td><td></td></tr>";
                        }
                        str += "</table></div></td></tr>";
                    }
                    else {
                        str = "<tr style='padding:7px;'><td colspan=6>No order found.</td></tr>";
                    }
                    var newRow = $(str);
                    parent.after(newRow).slideDown();
                }),
                error: (function () {
                    parent.after("<tr style='padding:5px;'><td colspan=5>An Error has occurred.</td></tr>");
                })
            });
        }

    });

MvcContrib Grid中的分层数据

1 个答案: