Иерархические данные в MvcContrib Grid - PullRequest
Новая
       15

Иерархические данные в MvcContrib Grid

0 голосов
/ 17 марта 2012

Можно ли показать класс со вложенным свойством IEnumerable в MvContribGrid, например ... 

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

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

1 Ответ

0 голосов
/ 17 марта 2012

У меня было похожее требование, но я использовал ajax для отображения иерархической информации. Это поможет мне двумя способами. Одна дочерняя информация загружается по запросу. поэтому мне не нужно загружать всю информацию за один раз, а также помог в иерархии нескольких уровней.

Я использовал Jquery Datatable вместе с сеткой mvccontrib для поиска по страницам и для иерархической передачи данных.

Обновлен: В моем примере я создал первый столбец с некоторой краткой информацией о первом столбце, которая необходима для идентификации строки, по которой я щелкнул. класс .expand указывает на то, что он должен быть расширен. Вызов $ .ajax будет выполнен, и полученная информация будет добавлена ​​в строку, по которой щелкнули. развернуть / свернуть метод 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 datatable для разбивки на страницы и поиска в заполненных строках. Я также использовал плагин tabletool для jquery datatable, который помогает экспортировать результаты в 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>");
                })
            });
        }

    });
...