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:'數據驗證不經過，不能保存！'
            })
        }    
    });

 

以上。