The best jQuery EasyUI Data Grid - toolbar Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,
This example demonstrates how to add a toolbar (toolbar) to the data grid (datagrid).
<Table id = "tt" class = "easyui-datagrid" style = "width: 600px; height: 250px" url = "data / datagrid_data.json" title = "DataGrid with Toolbar" iconCls = "icon-save" toolbar = "# tb"> <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> <Div id = "tb"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')"> Add </a> <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')"> Cut </a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')"> Save </a> </ Div>
We do not need to write any javascript code simply by 'toolbar' property attached toolbar (toolbar) to the data grid (datagrid).