Easyui DataGrid自定義視圖和subGrid

使用DataGrid的自定義視圖，可以擴展一行顯示更多的細節

下文定義的divview其實是使用了datagrid的view配置，重寫了其默認的renderRow方法。

基於這種實現，我們可以顯示更多樣式的view。

1、通過擴展$.fn.datagrid.defaults.view定義一個視圖：

var divview = $.extend({}, $.fn.datagrid.defaults.view, {  
        render : function (target, container, frozen) {  
            var opts = $.data(target, 'datagrid').options;  
            var rows = $.data(target, 'datagrid').data.rows;  
            var fields = $(target).datagrid('getColumnFields', frozen);  
            var table = [];  
            if(frozen){  
                $(container).parent().prev().remove();            
            }else{  
                $(container).prev().remove();  
                $(container).css('overflow-x','hidden');  
            }  
            for(var i = 0; i < rows.length; i++) {  
                table.push(this.renderRow.call(rows[i], target, fields, frozen, i, rows[i]));  
            }  
            $(container).html(table.join(''));  
        },  
        renderRow : function(target, fields,frozen, rowIndex, rowData) {  
            var cc = [];  
            if (!frozen){  
                cc.push('<div class="div-content">');  
                // div-content-header  
                cc.push('<div class="div-content-header">');  
                cc.push('<table><tbody><tr>');  
                cc.push('<th><span>學校名稱：'+rowData.schoolName+'</span></th>');  
                cc.push('</tr></tbody></table>');  
                cc.push('</div>');  
                // div-content-footer  
                cc.push('<div class="div-content-footer">');  
                if(true){  
                    if(rowData.flg == '0'){  
                        cc.push('<a class="" href="javascript:void(0)" onclick="">添加</a>');  
                    } else {  
                        cc.push('<a class="" href="javascript:void(0)" onclick="">刪除</a>');  
                    }  
                }  
                cc.push('</div></div>');  
            }  
            return cc.join('');  
        }  
    });  

2、建立DataGrid，應用視圖divview：

$('#myGridDemo').datagrid({  
    nowrap : false,  
    pagination:true,  
    rownumbers:false,  
    url : 'datagrid_data.json',  
    queryParams:getQueryParams(),  
    view:divview,  
    onLoadSuccess:function(data){  
        gridAreaAdjust();  
    }  
});  

3、gridAreaAdjust()方法

       datagrid加載成功後，執行gridAreaAdjust方法，改變divview的樣式

       

4、subGrid使用

       MyListdemo   

$('#myListDemo').datagrid({  
    view: detailview,  
    detailFormatter:function(index,row){  
        return '<div style="padding:2px"><table class="ddv"></table></div>';  
    },  
    onExpandRow: function(index,row){  
        var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');  
        ddv.datagrid({  
            url:''+row.itemid,  
            fitColumns:true,  
            singleSelect:true,  
            rownumbers:true,  
            height:'auto',  
            columns:[[  
                {field:'name',title:'年級名稱',width:100},  
                {field:'gradeCount',title:'班級數量',width:100}  
            ]],  
            onResize:function(){  
                $('#myListDemo').datagrid('fixDetailRowHeight',index);  
            },  
            onLoadSuccess:function(){  
                setTimeout(function(){  
                    $('#myListDemo').datagrid('fixDetailRowHeight',index);  
                },0);  
            }  
        });  
        $('#myListDemo').datagrid('fixDetailRowHeight',index);  
    }  
});  

       url傳值的 row.itemid爲主grid的序號，需要傳遞給後臺，取得哪條數據的子grid

        點擊+後，onExpandRow事件將被觸發，創建一個新的subGrid，對主grid

        調用fixDetailRowHeight()方法，當子grid創建成功後，改變主grid的大小

原文轉自：http://blog.csdn.net/ld_____/article/details/47658809