The best jQuery EasyUI Data Grid - Add box Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,
This example demonstrates how to place a box in the column to the data grid (DataGrid). Checkboxes, the user will have the option to select / deselect the grid lines of data.
To add a check box column, we just need to add a column attribute checkbox and set it to true. Code as follows:
<Table id = "tt" title = "Checkbox Select" class = "easyui-datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" idField = "itemid" pagination = "true" iconCls = "icon-save"> <Thead> <Tr> <Th field = "ck" checkbox = "true"> </ th> <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 = "100"> Attribute </ th> <Th field = "status" width = "60" align = "center"> Status </ th> </ Tr> </ Thead> </ Table>
The code above added a checkbox column attributes with, so it will become a checkbox column. If idField property has been set, the data grid (DataGrid) selection will remain set on different pages.