easyui使用detailview创建子网格数据

效果图(网上copy的图片，使用方法请关注下方)：

使用方法：
html页面除了基本的css和js外，创建分组子网格还需引入下方js，请自行下载。

		<script type="text/javascript" src="../../easyui/datagrid-detailview.js"></script>

首先，在html页面创建table，table的class为 class=“easyui-datagrid”，此处略。
其次，使用js创建子网格数据（detailview）

var isEdite = false;
var tempindexp = -1;
var isEditep = false; // 是否为编辑状态,默认 未编辑
var isEditec = false; // 是否为编辑状态,默认 未编辑
$(function(){
$('#broTable').datagrid({
	view: detailview,
	detailFormatter:function(index,row){
		return '<div style="padding:1px"><table id="ddv" class="ddv"></table></div>';
	},
	onExpandRow: function(index,row){
		var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
		var tempindexc = -1;
		var ddvProgram; //得到上一次点击的数据
		var ss;//得到上一次点击的行id
		ddv.datagrid({
			url:编写您的url,
			fitColumns:true,
			singleSelect:true,
			rownumbers:true,
			loadMsg:'',
			height:'auto',
			columns:[[
					{field:'srName',title:'名称',width:230,align:'center'},
					{field:'srTimes',title:'时长',width:100,align:'center'},
					{field:'srSize',title:'大小',width:100,align:'center'},
					{field:'srWidth',title:'尺寸',width:100,align:'center'},
					{field:'broDate',title:'播出时间',width:180,align:'center',
						editor:{
							type:'text',
							options:{
							valueField:'broDate',
							textField:'name',
							required:true}}
					},
									]],
			onResize:function(){
				$('#broTable').datagrid('fixDetailRowHeight',index);//在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度
			},
			onLoadSuccess:function(){
				setTimeout(function(){
					$('#broTable').datagrid('fixDetailRowHeight',index);//在加载父列表明细成功时，获取此时整个列表的高度，使其适应变化后的高度，此时的索引
				});
			},
			onCheck:function(rowIndex,rowData){//点击事件
				tData = ddv.datagrid('getData');
				tempindexc = rowIndex;
				ddvProgram = rowData;
			},
			onDblClickRow:function(index,field,value){//双击修改
					ddv.datagrid('beginEdit', index);
					ss = index;
			},
			onBeforeEdit:function(){//开始编辑之前结束上一次编辑状态
				ddv.datagrid('endEdit',ss);
			},
			onAfterEdit:function(){//结束编辑后处理
				var rows = ddv.datagrid("getRows");
				var row = rows[ss];//ss为行号
				updateRow(row); //更新修改数据
			},
			toolbar:[//在子网格内加入按钮点击事件
			         {
			        	text:'保存',
			        	iconCls:'icon-save',
			        	handler:function(){
			        	//编写您的逻辑，假设您处理的是分组里边的数据，请不要将方法抽出到外边
			         	}
			         }，
			          {
			        	 text:'上移',
			        	 iconCls: 'icon-undo',
			        	 handler:function(){
		        		          if (isEdite == false) {
		        			              var data = tData;
		        			              if (tempindexc < 0) {
		        			                  $.messager.alert("错误", "请先选择一条数据！", "error");
		        			              } else if (tempindexc == 0) {
		        			                  $.messager.alert("提示", "已经是第一行了！", "info");
		        			              } else {
		        			                  var temprow = data.rows[tempindexc];
		        			                  data.rows[tempindexc] = data.rows[parseInt(tempindexc) - 1];
		        			                  data.rows[parseInt(tempindexc) - 1] = temprow;
		        			                  var temprowval = data.rows[tempindexc].OrderList;
		        			                  data.rows[parseInt(tempindexc)].OrderList = data.rows[parseInt(tempindexc) - 1].OrderList;
		        			                  data.rows[parseInt(tempindexc) - 1].OrderList = temprowval;
		        			                  ddv.datagrid("selectRow", parseInt(tempindexc) - 1);
		        			                  ddv.datagrid("loadData", data);
		        			              }
		        			          }
		        			          else {
		        			              $.messager.alert("错误", "请先保存数据！", "error");
		        			         }
			         }，
			         {
			        	 text:'删除',
			        	 iconCls:'icon-remove',
			        	 handler:function(){
			        	 if(ddvProgram != null){
			        		 $.messager.confirm("提示", "确定删除吗？", function(r){
			        			 if(r){
			        				 deleteRow(ddvProgram);//删除方法
			        				 ddv.datagrid('reload');
			        				 ddvProgram = null;
			        			 }else{
			        				 ddvProgram = null;
			        			 }
			        		 });
			        	 }else{
			        		 $.messager.alert("提示", "请选择数据！", "info");
			        	 }
			         }
			         },
			        }]
		});
		$('#broTable').datagrid('fixDetailRowHeight',index);
	}		
});

});