Easyui DataGrid自定义视图和subGrid



使用DataGrid的自定义视图，可以扩展一行显示更多的细节

下文定义的divview其实是使用了datagrid的view配置，重写了其默认的renderRow方法。

基于这种实现，我们可以显示更多样式的view。

1、通过扩展$.fn.datagrid.defaults.view定义一个视图：

[javascript] view plaincopyprint?

1. var divview = $.extend({}, $.fn.datagrid.defaults.view, {  
2.         render : function (target, container, frozen) {  
3.             var opts = $.data(target, 'datagrid').options;  
4.             var rows = $.data(target, 'datagrid').data.rows;  
5.             var fields = $(target).datagrid('getColumnFields', frozen);  
6.             var table = [];  
7.             if(frozen){  
8.                 $(container).parent().prev().remove();            
9.             }else{  
10.                 $(container).prev().remove();  
11.                 $(container).css('overflow-x','hidden');  
12.             }  
13.             for(var i = 0; i < rows.length; i++) {  
14.                 table.push(this.renderRow.call(rows[i], target, fields, frozen, i, rows[i]));  
15.             }  
16.             $(container).html(table.join(''));  
17.         },  
18.         renderRow : function(target, fields,frozen, rowIndex, rowData) {  
19.             var cc = [];  
20.             if (!frozen){  
21.                 cc.push('<div class="div-content">');  
22.                 // div-content-header  
23.                 cc.push('<div class="div-content-header">');  
24.                 cc.push('<table><tbody><tr>');  
25.                 cc.push('<th><span>学校名称：'+rowData.schoolName+'</span></th>');  
26.                 cc.push('</tr></tbody></table>');  
27.                 cc.push('</div>');  
28.                 // div-content-footer  
29.                 cc.push('<div class="div-content-footer">');  
30.                 if(true){  
31.                     if(rowData.flg == '0'){  
32.                         cc.push('<a class="" href="javascript:void(0)" onclick="">添加</a>');  
33.                     } else {  
34.                         cc.push('<a class="" href="javascript:void(0)" onclick="">删除</a>');  
35.                     }  
36.                 }  
37.                 cc.push('</div></div>');  
38.             }  
39.             return cc.join('');  
40.         }  
41.     });  

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-headercc.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-footercc.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：

[javascript] view plaincopyprint?

1. $('#myGridDemo').datagrid({  
2.     nowrap : false,  
3.     pagination:true,  
4.     rownumbers:false,  
5.     url : 'datagrid_data.json',  
6.     queryParams:getQueryParams(),  
7.     view:divview,  
8.     onLoadSuccess:function(data){  
9.         gridAreaAdjust();  
10.     }  
11. });  

$('#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   

     

       实现代码：

      

[javascript] view plaincopyprint?

1. $('#myListDemo').datagrid({  
2.     view: detailview,  
3.     detailFormatter:function(index,row){  
4.         return '<div style="padding:2px"><table class="ddv"></table></div>';  
5.     },  
6.     onExpandRow: function(index,row){  
7.         var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');  
8.         ddv.datagrid({  
9.             url:''+row.itemid,  
10.             fitColumns:true,  
11.             singleSelect:true,  
12.             rownumbers:true,  
13.             height:'auto',  
14.             columns:[[  
15.                 {field:'name',title:'年级名称',width:100},  
16.                 {field:'gradeCount',title:'班级数量',width:100}  
17.             ]],  
18.             onResize:function(){  
19.                 $('#myListDemo').datagrid('fixDetailRowHeight',index);  
20.             },  
21.             onLoadSuccess:function(){  
22.                 setTimeout(function(){  
23.                     $('#myListDemo').datagrid('fixDetailRowHeight',index);  
24.                 },0);  
25.             }  
26.         });  
27.         $('#myListDemo').datagrid('fixDetailRowHeight',index);  
28.     }  
29. });  

$('#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