EasyUI Datagrid是一款基于jQuery的擴展插件，用于展示和編輯表格數據。其中，DetailView是Datagrid的一個功能，可以用于顯示和隱藏詳細信息。

使用步驟如下：

1. 引入EasyUI的相關文件，包括jQuery庫和easyui的css和js文件。

2. 在HTML中創建一個div元素，作為Datagrid的容器。

3. 在JavaScript中，使用datagrid方法創建一個Datagrid實例，并調用detailview屬性進行配置。

$('#datagrid').datagrid({
url: 'data.json', // 數據源URL
detailview: true, // 啟用DetailView功能
onExpandRow: function(index, row){ // 在展開行時觸發的事件
$('#datagrid').datagrid('expandRow', index); // 調用expandRow方法展開行
},
onCollapseRow: function(index, row){ // 在折疊行時觸發的事件
$('#datagrid').datagrid('collapseRow', index); // 調用collapseRow方法折疊行
}
});

4. 在數據源URL中返回一個JSON格式的數據，包括表格的列和行數據。

{
"columns": [[
{ "field": "id", "title": "ID" },
{ "field": "name", "title": "Name" },
{ "field": "age", "title": "Age" }
]],
"rows": [
{ "id": 1, "name": "John", "age": 30 },
{ "id": 2, "name": "Jane", "age": 25 },
{ "id": 3, "name": "Tom", "age": 35 }
]
}

5. 在Datagrid中的每一行的最后一列添加一個按鈕，用于展開和折疊詳細信息。

{
field: 'detail',
title: 'Detail',
width: 100,
formatter: function(value, row, index){
return '<a href="javascript:void(0);" onclick="expandRow('+index+')">Expand</a>';
}
}

function expandRow(index){
$('#datagrid').datagrid('expandRow', index);
}

6. 根據需求，可以自定義展開的詳細內容。可以在onExpandRow事件中使用datagrid的getRowDetail方法獲取詳細內容，并進行相關操作。

onExpandRow: function(index, row){
var detail = $('#datagrid').datagrid('getRowDetail', index);
detail.html('This is the detail information for row ' + index);
}

以上就是EasyUI Datagrid DetailView的簡單使用介紹。可以根據自己的需求進行配置和定制，實現更豐富的功能和顯示效果。