jQuery EasyUI 数据网格 - 添加工具栏
jQuery EasyUI是一个易于使用且功能丰富的jQuery插件库，提供了多个UI组件以实现现代用户界面的开发和设计。其中，数据网格是jQuery EasyUI的核心组件之一，它是一个可扩展的表格控件，支持复杂数据绑定、过滤、排序、分页等功能。在数据网格中添加上工具栏，可以为用户提供更加直观的操作方式。 本文将介绍如何添加工具栏的示例和方法。
准备工作
在使用EasyUI数据网格组件前，需要先在页面中引入以下文件：
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
创建数据网格
首先，我们需要有一个基本的数据网格来绑定数据。
<table id="dg" title="DataGrid" class="easyui-datagrid" style="width:100%;height:400px"
url="datagrid_data.json" pagination="true"
rownumbers="true" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="50">Item ID</th>
<th field="productid" width="50">Product ID</th>
<th field="listprice" width="50">List Price</th>
<th field="unitcost" width="50">Unit Cost</th>
<th field="attr1" width="50">Attribute</th>
<th field="status" width="50">Status</th>
</tr>
</thead>
</table>
添加工具栏
接下来我们可以添加工具栏了。工具栏是通过 easyui-toolbar 组件来实现的，可以在数据网格中添加任意多个工具栏按钮。以下是添加工具栏的代码：
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeItem()">Remove</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reload()">Reload</a>
<span style="float:right;">
<input id="searchbox" class="easyui-searchbox" placeholder="Search..."
style="width:200px;height:30px;padding:1px;border-radius:3px;"
prompt="Enter keywords...">
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">Search</a>
</span>
</div>
上述代码中，我们创建了多个 easyui-linkbutton，每个按钮都有一个 iconCls 属性用来设置图标， plain 属性用来设置是否显示文字， onclick 属性用来设置点击事件。最后一个搜索框是 easyui-searchbox 组件，用来提供搜索功能。
将上述代码复制到对应的网页中，并将其添加到数据网格中。最终的代码如下：
<div id="tb" style="padding:3px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeItem()">Remove</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reload()">Reload</a>
<span style="float:right;">
<input id="searchbox" class="easyui-searchbox" placeholder="Search..."
style="width:200px;height:30px;padding:1px;border-radius:3px;"
prompt="Enter keywords...">
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">Search</a>
</span>
</div>
<table id="dg" title="DataGrid" class="easyui-datagrid" style="width:100%;height:400px"
url="datagrid_data.json" pagination="true"
rownumbers="true" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="50">Item ID</th>
<th field="productid" width="50">Product ID</th>
<th field="listprice" width="50">List Price</th>
<th field="unitcost" width="50">Unit Cost</th>
<th field="attr1" width="50">Attribute</th>
<th field="status" width="50">Status</th>
</tr>
</thead>
</table>
<script>
$('#dg').datagrid({
toolbar:'#tb',
});
function newItem(){
alert('New Item');
}
function editItem(){
alert('Edit Item');
}
function removeItem(){
alert('Remove Item');
}
function saveItem(){
alert('Save Item');
}
function reload(){
alert('Reload Data');
}
function doSearch(){
alert('Search');
}
</script>
最后，在JavaScript中将工具栏属性 toolbar 设置为我们创建的 div，即可将工具栏添加到数据网格中，并实现相应的事件功能。通过本文你已经学会了如何使用EasyUI数据网格添加工具栏，快去尝试一下吧！