CheckBox select checkbox on DataGrid

CheckBox select on DataGrid

Tutorial  » Selecting CheckBox on DataGrid

This tutorial will show you how to place a checkbox column on a DataGrid. With checkboxes, the user has the option to select/deselect grid rows once.

watch demo

To add a checkbox column, we just add a column with a checkbox attribute and set it to true. The code looks like this:

1. <table id = "tt" title = "checkbox selection" class = "easyui-datagrid" style = " width : 550px ; height : 250px "
2. url = “data / datagrid_data.json”
3. idField = “itemid” pagination = “true”
4. iconCls = "icon save" >
5. <THEAD>
6. <TR>
7. <th field = “ck” checkbox = “true” > </ th>
8. <th field = “itemid” width = “80” > 商品ID </ th>
9. <th field = “productid” width = “80” > 产品ID </ th>
10. <th field = “listprice” width = “80” align = “right” > List Price </ th>
11. <th field = "unitcost" width = "80" align = "right" > unitcost </th>
12. <th field = “attr1” width = “100” > 属性</ th>
13. <th field = “status” width = “60” align = “center” > Status </ th>
14. </ TR>
15. </ THEAD>
16. </ TABLE>

Above code we add a column with checkbox property so it will be checkbox column. If the idField property is set, the selection of the DataGrid will remain in different pages.

Download the EasyUI example:

easyui-datagrid-demo.zip