主要是運用 easyui的方法進行行內嵌套顯示，讓一行可以顯示更多的東西，讓一行顯示JSON的字符串、從表之類的東西。

下邊先看效果圖：

接下來說實現過程：
（1）在首次加載中添加代碼

view: detailview, detailFormatter:function(index,row){ return '<div style="padding:2px"><table class="ddv"></table></div>';},onExpandRow: function(index,row){ var ddv=$(this).datagrid('getRowDetail',index).find('table.ddv'); ddv.datagrid({url:'datagrid22_getdetail.php?itemid='+row.itemid,//從表的查詢fitColumns:true,singleSelect:true,rownumbers:true,loadMsg:'',height:'auto',columns:[[{field:'orderid',title:'Order ID',width:100},{field:'quantity',title:'Quantity',width:100}, {field:'unitprice',title:'Unit Price',width:100}]], onResize:function(){ $('#orderList').datagrid('fixDetailRowHeight', index);},//調節高度onLoadSuccess:function(){setTimeout(function(){ $('#orderList').datagrid('fixDetailRowHeight', index);},0);}}); $('#orderList').datagrid('fixDetailRowHeight', index); }});

因為我是做了顯示排序翻頁的，所以放在了他們下邊。如果沒有，那么就放在你顯示的字段下邊就好了。

要顯示的字段也寫在上邊就可以。

當用戶點擊展開按鈕（’+’）時，將會觸發“onExpandRow”事件。我們用樹列創建一個新的子網格。當subgrid加載數據成功或調整大小時，請記住為master datagrid調用’fixDetailRowHeight’方法。

（2）如果前臺報找不到detailview，那你需要在easyui中添加一個方法，我會放到我的資源下載中。由于要的可以下載。

（3）引用這個文件時記得放在這個引用下邊

---

---

最后這個操作借鑒了一下引導，感謝作者。

http://www.jeasyui.com/tutorial/datagrid/datagrid22.php

轉載于:https://www.cnblogs.com/Grant-Fu/p/7412973.html

總結

以上是生活随笔為你收集整理的easyUI下datagrid嵌套显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。