话不多gang,先上代码,将以下三个属性插入主网格的初始化参数中:
view : detailview, //1 detailFormatter : function(index, row) { //2 return '<div style="padding:2px"><table class="ddv"></table></div>'; }, onExpandRow : function(index, row) { //3 //首先创建子网格你得有容器 var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv'); //这步是将此容器属性赋给一个外部变量 myddv=ddv; //设置当打开另一个子网格时,折叠上一个 var rows = $('#singlechoice_datagrid').datagrid('getRows'); $.each(rows,function(i,k){ //获取当前所有展开的子网格 var expander = $('#singlechoice_datagrid').datagrid('getExpander',i); if(expander.length && expander.hasClass('datagrid-row-collapse')){ if(k.id != row.id){ //折叠上一次展开的子网格 $('#singlechoice_datagrid').datagrid('collapseRow',i); } } }); //子网格初始化参数 ddv.datagrid({ url : 'checkAnswer?id=' + row.id, fitColumns : true, singleSelect : true, checkbox : true, height : 'auto', columns : [ [{ field : 'options', title : '选项内容', align : 'center', width : 200 },{ field : 'answer', title : '选项对错', align : 'center', width : 200, formatter : function( value, row, index) { if (value == 1) { return "正确"; } else { return "错误"; } } } ] ], toolbar:[ { text:'新增选项', iconCls:'icon-add', //小图标 handler:function(){ $('#myform').form('clear'); //重置表单数据 flag="add"; $('#answer').combobox('select',0); $('#itemId').val(row.id); //传递存储答案需要的相关数据 $('#kcid').val(row.konw.course.id); $('#knowid').val(row.konw.id); $('#mydialog').dialog({ //动态生成表头 title:'新增选项', }); $('#mydialog').dialog('open'); } },{ text:'修改选项', iconCls:'icon-edit', handler:function(){ flag="edit"; var arr = ddv.datagrid('getSelections'); //返回选中记录 //判断是否选择一条记录或多条或未选 if(arr.length == 0){ $.messager.show({ title:'提示信息!', msg:'您还未选择要修改的数据!每次只能修改一条数据哟!', height:180, width:220 }); }else if(arr.length != 1){ $.messager.show({ title:'提示信息!', msg:'每次只能选择一条数据进行修改!', height:180, width:220 }); }else{ $('#myform').form('clear'); $('#mydialog').dialog({ //动态生成表头 title:'修改选项', }); $('#mydialog').dialog('open'); //打开窗口 //重写数据 $('#myform').form('load',{ itemId:arr[0].item.id, answerid:arr[0].id, options:arr[0].options, answer:arr[0].answer, course:arr[0].know.course.id, know:arr[0].know.id, iden:arr[0].item.iden }); } } },{ text:'删除选项', iconCls:'icon-remove', handler:function(){ var arr = ddv.datagrid('getSelections'); if(arr.length <= 0){ $.messager.show({ title:'提示信息!', msg:'至少选择一条数据进行删除', height:180, width:220 }); }else{ $.messager.confirm('提示信息','确认删除?',function(r){ if(r){ //批量删除 var ids = ''; for(var i = 0;i < arr.length;i++){ ids += arr[i].id+','; } ids = ids.substring(0 , ids.length - 1); $.post('delete',{ids:ids},function(result){ //1.刷新数据表格 ddv.datagrid('reload'); //2.清空idField ddv.datagrid('unselectAll'); }); }else{ return; } }); } } } ], onResize : function() { $('#singlechoice_datagrid').datagrid('fixDetailRowHeight',index); }, onLoadSuccess : function() { setTimeout(function() { $('#singlechoice_datagrid').datagrid('fixDetailRowHeight',index); }, 0); } }); $('#singlechoice_datagrid').datagrid('fixDetailRowHeight', index); }
问题来了,依照上面的操作,当我打开一个外部编辑dialog,填写完数据并提交后,如何刷新子网格呢?这时候我们只需要在外部定义一个变量,在每次打开窗口前都把此次的子网格容器赋给它,即可达到我们刷新的目的:
var myddv; //用于储存子网格容器
编辑弹窗代码:
$('#btn1').click(function(){ if($('#myform').form('validate')){ $.ajax({ type:'post', //提交方式 url:'optionssave', //请求地址 cache:false, //清除缓存 data:$('#myform').serialize(), //序列化表单 //dataType:'json', //返回数据格式 success:function(result){ if(result=='no'){ $.messager.alert('提示','单选题只能有一个正确答案!'); return; } //1.关闭窗口 $('#mydialog').dialog('close'); myddv.datagrid('reload'); } }); }else{ $.messager.show({ title:'提示信息!', msg:'数据验证不通过,不能保存!' }) } });
以上。