SOURCE

onload = function () {

	// create main grid
	var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [
    	{ binding: 'name', header: 'Name', width: '2*' },
      { binding: 'dept', header: 'Dept', width: '*' },
    ],
  	itemsSource: getData()
  });
  
  // detail level 0
	var dp = new wijmo.grid.detail.FlexGridDetailProvider(theGrid, {
    createDetailCell: function (row) {
    	var cell = document.createElement('div');
      var grid = new wijmo.grid.FlexGrid(cell, {
		    autoGenerateColumns: false,
    		columns: [
    			{ binding: 'name', header: 'Name', width: '2*' },
      		{ binding: 'year', header: 'Year', width: '*' },
    		],
      	itemsSource: row.dataItem.pubs
      });
      
      // detail level 1
      var dp2 = new wijmo.grid.detail.FlexGridDetailProvider(grid, {
		    createDetailCell: function (row) {
		    	var cell = document.createElement('div');
    		  var grid = new wijmo.grid.FlexGrid(cell, {
				    autoGenerateColumns: false,
    				columns: [
    					{ binding: 'publisher', header: 'Publisher', width: '2*' },
      				{ binding: 'editions', header: 'Editions', width: '*' },
    				],
      			itemsSource: row.dataItem.eds
      		});
		      wijmo.addClass(cell, 'detail-1');
	      	return cell;
				}
			});
      
      wijmo.addClass(cell, 'detail-0');
      return cell;
		}
	});

function getData() {
  	return [
    	{ name: 'Albert', dept: 123, pubs: [
      	{ name: 'MASc thesis', year: 1940, eds: [
        	{ publisher: 'Cambridge', editions: 1 },
        	{ publisher: 'Elsevier', editions: 4 }
        ]},
      	{ name: 'General Relativity', year: 1942, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ] },
      ]},
    	{ name: 'Alan', dept: 123, pubs: [
      	{ name: 'MASc thesis', year: 1940, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ]},
      	{ name: 'Universal Computability', year: 1942, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ]},
      ]},
    	{ name: 'Robert', dept: 123, pubs: [
      	{ name: 'MASc thesis', year: 1932, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ]},
      	{ name: 'Universal Computers', year: 1935, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ]},
      	{ name: 'Replicating Machines', year: 1938, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ]},
      ]},
    	{ name: 'Joseph', dept: 123, pubs: [
      	{ name: 'MASc thesis', year: 1932, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ]},
      	{ name: 'Incompleteness Theorem', year: 1935, eds: [
        	{ publisher: 'Cambridge', editions: 13 },
        	{ publisher: 'Elsevier', editions: 44 }
        ]},
      ]},
    ]
  }
}

<div class="container">

  <h1>
    Multi-Level Row Details</h1>
  <p>
    行详细信息可能包含任何HTML元素，包括具有其他详细信息的其他网格。</p>
  <div id="theGrid"></div>
</div>

.detail-0 {
  min-height: 300px;
}
.detail-1 {
  min-height: 200px;
}
body {
  margin-bottom: 20pt;
}