2012-03-16 3 views

ответ

0

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

я использовал Jquery DataTable вместе с mvccontrib сеткой для поиска постраничного и для иерархических данных расширения Распада связь была введена

Обновлены: В моей exmple я создал первый столбец с некоторой 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 DataTable для пагинацией и поиск в населенной rows.and также используется 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>"); 
       }) 
      }); 
     } 

    }); 
+0

У вас есть пример или документы я мог смотреть снова? –

+0

Хорошо, я сделаю то, что я сделал –

+0

@KaiCriticallyAcclaimedCooper. У меня есть мой ответ с моим примером. –

Смежные вопросы