EasyUI Forum

<table class="easyui-datagrid" id="candu" style="width:100%; height:485px"
           method="get"
           url="listlab"
           singleSelect="false"
           fitColumns="true"
           sortName="column4"
           rowNumbers="true"
           sortOrder="asc"
           multiSort="true"
           data-options="
                view:groupview,
                groupField:'column4',
                groupFormatter:function(value, rows) {
					return value + ' - ' + rows.length + ' Data';
                }
           ">
        <thead>
            <tr>
                <th field="id" width="10px" checkbox="true" ></th>
                <th field="column1" width="20px">Column 1</th>
                <th field="column2" width="20px">Column 2</th>
                <th field="column3" width="30px" editor="textbox">Column 3</th>
                <th field="column4" width="20px" sortable="true" >Column 4</th>
            </tr>
        </thead>
    </table>

groupFormatter:function(value, rows){
  var s = value + ' - ' + rows.length + ' Item(s)';
  s = '<input type="checkbox" onclick="checkGroup(\''+value+'\',event)">'+s;
  return s;
}

function checkGroup(value,event){
  value = $.trim(value);
  var dg = $('#dg');
  var groups = dg.datagrid('groups');
  var group = null;
  for(var i=0; i<groups.length; i++){
    if (groups[i].value == value){
      group = groups[i];
      break;
    }
  }
  var checked = $(event.target).is(':checked');
  for(var i=group.startIndex; i<group.startIndex+group.rows.length; i++){
    dg.datagrid(checked?'checkRow':'uncheckRow',i)
  }
}