easyui 动态2级datagrid

2级datagrid 需要添加js:   <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>

jsp代码

	<div class="easyui-layout" data-options="fit : true,border : false">
		<div data-options="region:'center',border:false">
			<table id="dataGrid" style="width:650px;height:250px"
		            title="监控项"
		            singleSelect="true" fitColumns="true">
		        <thead>
		            <tr>
		                <th field="monitorItem" width="80">监控项</th>
		                <th field="message" width="100">告警信息</th>
		                <th field="sn" align="right" width="80">工单号</th>
		                <th field="rq" align="right" width="80">扫描时间</th>
		            </tr>
		        </thead>
    		</table>
		</div>
	</div>

<script type="text/javascript">
	var dataGrid;
	var dataGridDetail;
	$(function() {
		dataGrid = $('#dataGrid').datagrid({
			fit:true,
			fitColumns : true,
			url:"${pageContext.request.contextPath}/MonitorItemController/datagrid",
			view: detailview,
			detailFormatter:function(index,row){
               return '<div style="padding:2px"><table class="ddv"></table></div>';
            },
			autoRowHeight:false,
			rowStyler:function(index,row){
    			 return 'style:height:40px';	
   			},
			
			onExpandRow: function(index,row){//展开2级表格的时候
				dataGridDetail = $(this).datagrid('getRowDetail',index).find('table.ddv');
				$.ajax({
	 			   type: "POST", 
	 			   url: "${pageContext.request.contextPath}/MonitorItemController/monitorDetail",  
	 			   data: {monitorItem:row.monitorItem , sn:row.sn} , 
	 			   dataType:"json"	,
				   success:function(data){ 
					    var options = {
					        fitColumns:true,
	                        singleSelect:true,
	                        rownumbers:true,
	                        loadMsg:'',
	                        height:'auto',
	                        onResize:function(){
                            	$('#dataGrid').datagrid('fixDetailRowHeight',index);
                        	},
                        	onLoadSuccess:function(){
	                            setTimeout(function(){
	                                $('#dataGrid').datagrid('fixDetailRowHeight',index);
	                            },0);
                        	},
					    };
					    options.columns = eval(data.columns);//把返回的数组转为对象(服务端返回的动态列数据)
					    dataGridDetail.datagrid(options);//根据配置选项，生成datagrid
					    dataGridDetail.datagrid("loadData", data.rows); //载入服务端返回的json格式的数据
	 			   }  
	 			});
                $('#dataGrid').datagrid('fixDetailRowHeight',index);
            },
			
			toolbar : '#toolbar',
			onLoadSuccess : function() {
				parent.$.messager.progress('close');
			},
			onRowContextMenu : function(e, rowIndex, rowData) {
				e.preventDefault();
				$(this).datagrid('unselectAll');
				$(this).datagrid('selectRow', rowIndex);
				$('#menu').menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			}
		});
	});
</script>

服务端代码

	@RequestMapping(value="/monitorDetail")
	@ResponseBody//一次性获取全部节点
	public ResJson monitorDetail(HttpServletRequest request,String monitorItem ,String sn){
		
		System.out.println(monitorItem+sn);
//		数据库中的字段读出来全部小写（动态列数据）
		
		String columns="{columns:[[" +
		"{field:'v_ip',title:'IP',align:'center',width:50},"+
		"{field:'v_filesystem',title:'分区',align:'center',width:50},"+
		"{field:'n_used',title:'使用率',align:'center',width:50}]]}";
		
		List<DiskPage> list= setRows();

		ResJson json=new ResJson();
		json.setMsg("return data ");
		json.setColumns(columns);
		json.setRows(list);
		
		return json;
	}

public class ResJson implements Serializable{

	private boolean success=false;
	private String msg="";
	private String columns="";
	private Object rows=null;