jQuery EasyUI 数据网格 - 创建复杂工具栏
jQuery EasyUI 数据网格 - 创建复杂工具栏
概述
数据网格是 jQuery EasyUI 中非常常用的组件之一。它提供了数据展示、排序、筛选、编辑等功能，为开发者提供了非常便捷的数据管理方式。在数据网格中，工具栏也是一个非常重要的组成部分，通过工具栏我们可以对网格数据进行各种操作。本文将介绍如何使用 jQuery EasyUI 创建一个复杂的工具栏。
创建基本的数据网格
首先，我们需要引入 EasyUI 的相关 css 和 js 文件，然后创建一个基本的数据网格，示例如下：
<div class="easyui-panel"
style="padding: 5px;"
data-options="
fit: true,
title: '数据网格'
">
<table id="dg"></table>
</div>
<script>
$('#dg').datagrid({
url: 'data.json',
columns: [[
{field:'name',title:'姓名'},
{field:'age',title:'年龄'},
{field:'gender',title:'性别'}
]],
pagination: true,
rownumbers: true,
fitColumns: true
});
</script>
以上代码中，我们创建了一个数据网格，并配置了数据源 url、表格列数和分页等参数。这个数据网格还比较简单，下面我们将为它创建一个复杂的工具栏。
创建复杂的工具栏
jQuery EasyUI 的工具栏支持多种控件类型，例如按钮、文本框、下拉框等。我们可以通过在工具栏 toolbar 中添加这些控件来实现需求。以下简单举例说明各种控件的使用。
添加按钮
添加按钮需要使用 button 控件，示例代码如下：
<div class="easyui-panel"
style="padding: 5px;"
data-options="
fit: true,
title: '数据网格',
tools: [{
iconCls: 'icon-add',
text: '添加',
handler: function(){
alert('添加按钮被点击了');
}
}]
">
<table id="dg"></table>
</div>
以上代码中，我们在 EasyUI 的 toolbar 配置中添加了一个按钮控件，其中 iconCls 和 text 分别用于控制按钮的样式和文字内容，handler 属性表示按钮的点击事件绑定。这个按钮的作用是弹出一个提示框。
添加文本框
添加文本框需要使用 textbox 控件，示例代码如下：
<div class="easyui-panel"
style="padding: 5px;"
data-options="
fit: true,
title: '数据网格',
tools: [{
prompt: '输入姓名',
iconCls: 'icon-search',
handler: function(value){
alert('查询 ' + value);
}
}]
">
<table id="dg"></table>
</div>
以上代码中，我们在 toolbar 配置中添加了一个 textbox 控件，其中 prompt 属性是文本框的提示信息，当文本框获得焦点时会出现该提示；iconCls 属性用于控制工具栏中该文本框前的图标样式；handler 属性表示文本框的回车事件绑定。这个文本框的作用是输入姓名进行查询。
添加下拉菜单
添加下拉菜单需要使用 combobox 控件，示例代码如下：
<div class="easyui-panel"
style="padding: 5px;"
data-options="
fit: true,
title: '数据网格',
tools: [{
text: '编辑',
iconCls: 'icon-edit',
menu: [{
text: '复制',
iconCls: 'icon-redo',
handler: function(){
alert('复制菜单项被点击了');
}
},'-',{
text: '剪切',
iconCls: 'icon-cut',
handler: function(){
alert('剪切菜单项被点击了');
}
},'-',{
text: '粘贴',
iconCls: 'icon-paste',
handler: function(){
alert('粘贴菜单项被点击了');
}
}]
}]
">
<table id="dg"></table>
</div>
以上代码中，我们在 toolbar 配置中添加了一个 combobox 控件，其中 text 属性是下拉菜单的名称，menu 属性用于配置下拉菜单的选项。其中分隔线 - 表示一个菜单项的结束。
总结：通过以上示例，我们了解到了如何使用 jQuery EasyUI 创建复杂的工具栏，并添加了按钮、文本框、下拉菜单等控件。不同的控件之间的区别在于它们的属性配置和使用方法不同。在实际开发中，我们可以根据需求选择合适的工具栏控件，进行灵活组合使用。