Easyui datagrid扩展子网格detailview增删改查详解

话不多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:'数据验证不通过，不能保存！'
            })
        }
    });

以上。