Comment ajouter des données détaillées aux lignes?

Question

J'utilise gijgo de gijgo.com/Grid pour un contrôle datatable. Jusqu'à présent, pour le chargement de données standard, cela fonctionne comme le charme et était super rapide. Mais maintenant je dois ajouter sous-réseaux aka grille dans une rangée. comme indiqué sur cette image:

Le site Gijgo a des exemples de codes sur la génération des datatables réguliers, mais pas beaucoup d'informations de génération de sous-réseaux.

J'ai le code suivant pour générer le écrit table primaire

<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="~/Content/grid.min.css" rel="stylesheet" /> 

<table id="grid" style="margin-left:5%;"> 
    @*<thead> 
    <tr> 
    <th width="100em" data-field="ProductID">Product ID</th> 
    <th data-field="Name">Name</th> 
    <th data-field="ProductNumber" data-min-width="250" data-priority="1">Product Number</th>    
    </tr> 
    </thead>*@ 
</table> 

@section Scripts{ 
    <script src="~/Scripts/jquery-2.2.3.min.js"></script> 
    <script src="~/Scripts/bootstrap.min.js"></script> 
    <script src="~/Scripts/grid.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     var grid = $('#grid').grid({ 
     columns: [ 
      { title: 'CategoryID', field: 'Category ID' }, 
      { title: 'Name', field: 'Name' }, 
      { title: 'Is Blocked', field: 'Blocked' } 
     ], 
     dataSource: 'Home/GetData', 
     uiLibrary:'bootstrap', 
     detailTemplate: '<div class="divT row"><table class="tbl" data-source="Home/GetAllProducts"></table></div>',/*****/ 
     responsive: true, 
     showHiddenColumnsAsDetails: false, 
     width: 800, 

     }); 
    }) 
} 

j'ai utilisé la propriété « detailTemplate » pour créer une section de détail comme mentionné sur Gijgo demo site. il ne génère pas la table interne dans chaque rangée. Les données de la table interne proviennent de DB.

Le code ci-dessus supposé répertorier toutes les catégories comme les lignes principales et sous chaque ligne il devrait afficher tous les produits pour cette catégorie dans une grille interne.

Y a-t-il des choses à faire pour accomplir ma tâche de sous-réseau?

Answer 1

Je pense que ce serait mieux si vous utilisez l'événement detailExpand pour charger des données dans un sous-groupe.
Vous pouvez en savoir plus sur cet événement à http://gijgo.com/Grid/Events/detailExpand

Voici l'exemple:

var grid, data = [ {ID: 1, Name: 'test 1'}, {ID: 2, Name: 'test 2'}, {ID: 3, Name: 'test 3'} ]; 
    grid = $('#grid').grid({ 
     dataSource: '/version_0_6/Grid/GetPlayers', 
     detailTemplate: '<div></div>', 
     columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'DateOfBirth', type: 'date' } ] 
    }); 
    grid.on('detailExpand', function (e, $detailWrapper, record) { 
     var subggrid = $detailWrapper.append('<table id="subgrid"/>').find('table').grid({ 
      dataSource: data, 
      columns: [{ field: 'ID', width: 20 }, { field: 'Name' }], 
      pager: { limit: 2 } 
     }); 
     subggrid.on('pageChanging', function (e, newPage) { 
      e.stopPropagation(); 
      }); 
    }); 
    grid.on('detailCollapse', function (e, $detailWrapper, record) { 
     $detailWrapper.empty(); 
    });