【JS】easyui使用detailview创建子网格数据

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

使用方法：

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

		<script type="text/javascript" src="https://www.pianshen.com/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><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);
}
});

});