jQuery EasyUI Data Grid - get selected row data
This example demonstrates how to get the selected row data.
Data Grid (datagrid) component contains two methods to retrieve the selected rows of data:
- getSelected: get the first row of data is selected, if the line is not selected, it returns null, otherwise it returns records.
- getSelections: get all selected rows of data, returns an array of data elements records.
Creating 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>
Using the Demo
Obtain selected data row:
var row = $ ( '# tt') datagrid ( 'getSelected').; if (row) { alert ( 'Item ID:' + row.itemid + "\ nPrice:" + row.listprice); }
Get itemid all selected rows:
var ids = []; var rows = $ ( '# tt') datagrid ( 'getSelections').; for (var i = 0; i <rows.length; i ++) { ids.push (rows [i] .itemid); } alert (ids.join ( '\ n'));