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 ''; } 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 ' ' + rowData.category + ' -- ' + rowData.name + ' '; }, groupHandler: function(e, rowIndex, rowData){ $(this).datagrid('toggleRow', rowIndex); } }); ' + opts.groupFormatter.call(target, s, rowData) + '
在以上代碼中,我們首先使用了$.fn.datagrid.defaults.view對象的extend方法,創建一個新的對象groupview,并覆蓋了groupview的兩個方法renderRow和renderGroup。這兩個方法實現了對數據的分組展示,其中renderRow方法用于渲染每一行的數據,renderGroup方法用于渲染每一組的數據。
接下來,我們在datagrid的初始化代碼中使用了view屬性,并將其賦值為剛剛創建的groupview對象。具體來說,我們使用了groupField屬性來指定要分組的字段,groupFormatter屬性來定義分組的格式,這里我們以每個分組名稱后面跟著分組中元素的數量為格式。
最后我們還添加了一個groupHandler方法,用于實現分組展開和收起的效果。我們只需要在這個方法中調用toggleRow方法即可。