jQuery EasyUI 数据网格 - 添加查询功能
jQuery EasyUI 数据网格 - 添加查询功能
简介
jQuery EasyUI 是一款轻量级、易使用的 jQuery 插件库，包含了多个 UI 组件，其中包括数据网格（datagrid），目前 jQuery EasyUI 版本为 1.9.3。
数据网格（datagrid）是 jQuery EasyUI 中最为常用的组件之一，用于表格数据的展示及编辑。本文将介绍如何通过 EasyUI 的 datagrid 添加查询功能。
实现步骤
在开始之前，需要先了解如何使用 jQuery EasyUI 的 datagrid 组件。如果不了解可以先学习 EasyUI datagrid 的基础用法。
- 引入相关文件
使用 EasyUI 的 datagrid，需要引入以下文件：
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- EasyUI -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
- HTML 结构
在 HTML 中添加 datagrid 的 DOM 结构，并设置相应的属性。
<table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
url="data.json"
rownumbers="true"
pagination="true"
fitColumns="true"
singleSelect="true">
<thead>
<tr>
<th field="name" width="50%">Name</th>
<th field="value" width="50%">Value</th>
</tr>
</thead>
</table>
其中，url 属性为 datagrid 数据的来源，可以是一个 URL 地址或者返回 JSON 数据的回调函数；rownumbers 表示是否显示行号；pagination 表示是否启用分页条；fitColumns 表示列宽自适应；singleSelect 表示是否只能选中一行。
- 添加查询表单
在 HTML 中添加一个表单，用于输入查询条件。
<form id="queryForm">
<label>Name: <input type="text" name="name"></label>
<label>Value: <input type="text" name="value"></label>
<button type="button" id="btnSearch">Search</button>
</form>
- 编写查询代码
在 JavaScript 中编写查询代码，通过触发按钮点击事件或者表单提交事件，获取表单的值，拼接查询条件后，重新加载 datagrid。
// 点击按钮触发查询
$('#btnSearch').click(function(){
var queryParams = $('#queryForm').serialize(); // 获取表单参数
$('#dg').datagrid('load', {
name: queryParams.name, // 传递 name 参数进行查询
value: queryParams.value // 传递 value 参数进行查询
});
});
// 表单提交触发查询
$('#queryForm').submit(function (e) {
e.preventDefault(); // 阻止表单默认提交
var queryParams = $(this).serialize(); // 获取表单参数
$('#dg').datagrid('load', {
name: queryParams.name, // 传递 name 参数进行查询
value: queryParams.value // 传递 value 参数进行查询
});
});
其中，通过 $('#queryForm').serialize() 获取表单参数，将参数传递给 datagrid 的 load 方法即可实现查询功能。
- 完整代码
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- EasyUI -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
url="data.json"
rownumbers="true"
pagination="true"
fitColumns="true"
singleSelect="true">
<thead>
<tr>
<th field="name" width="50%">Name</th>
<th field="value" width="50%">Value</th>
</tr>
</thead>
</table>
<form id="queryForm">
<label>Name: <input type="text" name="name"></label>
<label>Value: <input type="text" name="value"></label>
<button type="button" id="btnSearch">Search</button>
</form>
<script>
// 点击按钮触发查询
$('#btnSearch').click(function(){
var queryParams = $('#queryForm').serialize(); // 获取表单参数
$('#dg').datagrid('load', {
name: queryParams.name, // 传递 name 参数进行查询
value: queryParams.value // 传递 value 参数进行查询
});
});
// 表单提交触发查询
$('#queryForm').submit(function (e) {
e.preventDefault(); // 阻止表单默认提交
var queryParams = $(this).serialize(); // 获取表单参数
$('#dg').datagrid('load', {
name: queryParams.name, // 传递 name 参数进行查询
value: queryParams.value // 传递 value 参数进行查询
});
});
</script>
结语
通过以上步骤，我们就可以轻松的实现查询功能。另外，EasyUI datagrid 还可以实现排序、分组、编辑、删除等常用功能，有关这些更高级功能的使用，可以参考 EasyUI 的官方文档。