Print Page - Select all checked rows in datagrid

Title: Select all checked rows in datagrid
Post by: esteen on June 04, 2012, 06:03:17 AM

When using the datagrid, it is easy to add a checkbox for each row. However, it seems a method such as .datagrid("getChecked") is missing, which would return all rows where the checkbox has been selected, in the same way as .datagrid("getSelections") return all rows that have been selected.

How can we accomplish this with the datagrid component?

Title: Re: Select all checked rows in datagrid
Post by: stworthy on June 04, 2012, 06:51:08 PM

It is easy to extend the 'getChecked' method for datagrid. The example below shows how to implement this method:

Code:

$.extend($.fn.datagrid.methods, {
	getChecked: function(jq){
		var rr = [];
		var rows = jq.datagrid('getRows');
		jq.datagrid('getPanel').find('div.datagrid-cell-check input:checked').each(function(){
			var index = $(this).parents('tr.datagrid-row:first').attr('datagrid-row-index');
			rr.push(rows[index]);
		});
		return rr;
	}
});

Title: Re: Select all checked rows in datagrid
Post by: esteen on June 05, 2012, 02:11:33 AM

This does not work when we have alternating rows (striped: true), then class is empty or datagrid-row-alt:

<tr class="" datagrid-row-index="0" style="height: 28px;">
<tr class="datagrid-row-alt" datagrid-row-index="1" style="height: 28px;">
<tr class="" datagrid-row-index="2" style="height: 28px;">
<tr class="datagrid-row-alt" datagrid-row-index="3" style="height: 28px;">
<tr class="" datagrid-row-index="4" style="height: 28px;">
<tr class="datagrid-row-alt" datagrid-row-index="5" style="height: 28px;">
<tr class="" datagrid-row-index="6" style="height: 28px;">
<tr class="datagrid-row-alt" datagrid-row-index="7" style="height: 28px;">
<tr class="" datagrid-row-index="8" style="height: 28px;">
<tr class="datagrid-row-alt" datagrid-row-index="9" style="height: 28px;">
<tr class="" datagrid-row-index="10" style="height: 28px;">
<tr class="datagrid-row-alt" datagrid-row-index="11" style="height: 28px;">
<tr class="" datagrid-row-index="12" style="height: 28px;">
<tr class="datagrid-row-alt" datagrid-row-index="13" style="height: 28px;">
<tr class="" datagrid-row-index="14" style="height: 28px;">

Seems to work with:

jq.datagrid('getPanel').find('div.datagrid-cell-check input:checked').each(function(){
         var index = $(this).parents('tr:first').attr('datagrid-row-index');
         rr.push(rows[index]);
      });

Title: Re: Select all checked rows in datagrid
Post by: stworthy on June 05, 2012, 02:45:48 AM

Try using the latest version of easyui, otherwise rewrite the 'getChecked' method as below:

Code:

$.extend($.fn.datagrid.methods, {
	getChecked: function(jq){
		var rr = [];
		var rows = jq.datagrid('getRows');
		jq.datagrid('getPanel').find('div.datagrid-cell-check input:checked').each(function(){
			var index = $(this).parents('tr:first').attr('datagrid-row-index');
			rr.push(rows[index]);
		});
		return rr;
	}
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: esteen on June 04, 2012, 06:03:17 AM