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-content-header  
                cc.push('
');  
                cc.push('');  
                cc.push('');  
                cc.push('
学校名称：'+rowData.schoolName+'
');  
                cc.push('
');  
                // div-content-footer  
                cc.push('
');  
                if(true){  
                    if(rowData.flg == '0'){  
                        cc.push('添加');  
                    } else {  
                        cc.push('删除');  
                    }  
                }  
                cc.push('
');  
            }  
            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 '
';  
    },  
    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