jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI界面。開發者不需要編寫複雜的javascript，也不需要對css樣式有深入的瞭解，開發者需要了解的只有一些簡單的html標籤。
本經驗是 【jQuery EasyUI從入門到精通】系列教程的第20部分，在第19部分基礎上，繼續講述 jQuery EasyUI Web Demos之DataGrid（數據表格）。
工具/原料
筆記本電腦或是臺式機
互聯網
jQuery EasyUI
DataGrid（數據表格）
方法/步驟
Context Menu on DataGrid（數據表格DataGrid中的語境菜單），Right click on the header of DataGrid to display context menu（右擊數據報告頭部以顯示語境菜單）.
案例HTML基本結構如下所示：
Context Menu on DataGrid
Right click on the header of DataGrid to display context menu.
Context Menu on DataGrid（數據表格DataGrid中的語境菜單），Javascript代碼如下所示：
Context Menu on DataGrid（數據表格DataGrid中的語境菜單），運行效果如下圖所示。
Master Detail，Expand row in DataGrid to show details（在數據表格裡擴展行以顯示細節），Click the expand button to expand row and view details.
Expand row in DataGrid to show details（在數據表格裡擴展行以顯示細節），運行效果如下圖所示。
SubGrid，Expand row in DataGrid to show subgrid（在數據表格中擴展行以顯示子表格）。Click the expand button to expand row and view subgrid.
HTML基本結構如下所示：
Expand row in DataGrid to show subgrid（在數據表格中擴展行以顯示子表格），運行效果如下圖所示：
注意事項
jQuery EasyUI插件依賴於JQuery，需要在easyui.min.js之前引入JQuery庫