色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery datagrid group

林子帆2年前8瀏覽0評論

jQuery Datagrid Group是一個非常實用的jQuery插件,它可以幫助我們快速方便地將數據進行分組顯示,使得數據的展示更加清晰和易于理解。

$(function(){
$('#dg').datagrid({
url:'datagrid_data.json',
groupField:'category',
view:groupview,
groupFormatter:function(value,rows){
return value + ' - ' + rows.length + ' Items';
},
});
});
var groupview = $.extend({}, $.fn.datagrid.defaults.view, {
renderRow: function(target, fields, frozen, rowIndex, rowData){
if (rowData.isGroup){
return '' + rowData.category + ' -- ' + rowData.name + '';
} else {
return $.fn.datagrid.defaults.view.renderRow(target, fields, frozen, rowIndex, rowData);
}
},
renderGroup: function(target, s, rowIndex, rowData){
var opts = $(target).datagrid('options');
var fields = $(target).datagrid('getColumnFields',true).length;
return '' + opts.groupFormatter.call(target, s, rowData) + '';
},
groupHandler: function(e, rowIndex, rowData){
$(this).datagrid('toggleRow', rowIndex);
}
});

在以上代碼中,我們首先使用了$.fn.datagrid.defaults.view對象的extend方法,創建一個新的對象groupview,并覆蓋了groupview的兩個方法renderRow和renderGroup。這兩個方法實現了對數據的分組展示,其中renderRow方法用于渲染每一行的數據,renderGroup方法用于渲染每一組的數據。

接下來,我們在datagrid的初始化代碼中使用了view屬性,并將其賦值為剛剛創建的groupview對象。具體來說,我們使用了groupField屬性來指定要分組的字段,groupFormatter屬性來定義分組的格式,這里我們以每個分組名稱后面跟著分組中元素的數量為格式。

最后我們還添加了一個groupHandler方法,用于實現分組展開和收起的效果。我們只需要在這個方法中調用toggleRow方法即可。