Easyui DataGrid自定义视图和subGrid

来源：互联网发布：淘宝客新手怎么推广编辑：程序博客网时间：2024/04/27 23:40

使用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-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：

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

0 0