jQuery EasyUI DataGrid - Creating Complex Toolbars
The toolbar of the DataGrid can contain buttons and other components. You can easily define the toolbar layout by using an existing DIV tag, which will become the content of the DataGrid toolbar. This tutorial will show you how to create a complex toolbar for the DataGrid component.
Creating a Toolbar
<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<div>
Date From: <input class="easyui-datebox" style="width:80px">
To: <input class="easyui-datebox" style="width:80px">
Language:
<input class="easyui-combobox" style="width:100px"
url="data/combobox_data.json"
valueField="id" textField="text">
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
</div>
Creating a DataGrid
<table class="easyui-datagrid" style="width:600px;height:250px"
url="data/datagrid_data.json"
title="DataGrid - Complex Toolbar" toolbar="#tb"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="60">Item ID</th>
<th field="productid" width="80">Product ID</th>
<th field="listprice" align="right" width="70">List Price</th>
<th field="unitcost" align="right" width="70">Unit Cost</th>
<th field="attr1" width="200">Address</th>
<th field="status" width="50">Status</th>
</tr>
</thead>
</table>
As you can see, the toolbar of the DataGrid is similar to a dialog. We don't need to write any JavaScript code to create a DataGrid with a complex toolbar.