jQuery EasyUI Data Grid - Get selected row data

jQuery EasyUI Data Grid - Get selected row data

This section is about how to get selected row data in the jQuery EasyUI data grid.

The following example shows how to obtain selected row data.

The datagrid component contains two methods for retrieving selected row data:

• getSelected: Get the first selected row data, if no row is selected, return null, or return the record.
• getSelections: Get all the selected row data and return the array data recorded by the element.

Create a data grid (DataGrid)

	<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  url="data/datagrid_data.json" 	title="Load Data" iconCls="icon-save">
		<thead>
			<tr>
				<th field="itemid" width="80">Item ID</th>
				<th field="productid" width="80">Product ID</th>
				<th field="listprice" width="80" align="right">List Price</th>
				<th field="unitcost" width="80" align="right">Unit Cost</th>
				<th field="attr1" width="150">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>

	<table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="data/datagrid_data.json" title="Load Data" iconCls="icon-save">
		<thead>
			<tr>
				<th field="itemid" width="80">Item ID</th>
				<th field="productid" width="80">Product ID</th>
				<th field="listprice" width="80" align="right">List Price</th>
				<th field="unitcost" width="80" align="right">Unit Cost</th>
				<th field="attr1" width="150">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>

Use the demo

To obtain selected row data:

	var row = $('#tt').datagrid('getSelected');
	if (row){
		alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
	}

Get the itemid for all selected lines:

	var ids = [];
	var rows = $('#tt').datagrid('getSelections');
	for(var i=0; i<rows.length; i++){ 		
            ids.push(rows[i].itemid); 	
        } 	
        alert(ids.join('\n')); 

Download the jQuery EasyUI instance

jeasyui-datagrid-datagrid3.zip