<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin-bottom:10px">
<input id="searchBox" class="easyui-textbox" label="Search:" labelWidth="50" style="width:200px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="searchData()">Search</a>
</div>
<table id="datagrid" title="DataGrid" style="width:400px;height:250px;">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="150">Name</th>
<th field="age" width="50">Age</th>
</tr>
</thead>
</table>
<script>
$(function(){
// 初始化 DataGrid
$('#datagrid').datagrid({
url: 'your_data_url', // 替换成你的远程数据源 URL
method: 'get',
columns: [[
{field: 'id', title: 'ID', width: 50},
{field: 'name', title: 'Name', width: 150},
{field: 'age', title: 'Age', width: 50}
]],
pagination: true,
rownumbers: true,
fitColumns: true,
singleSelect: true
});
});
// 查询数据的函数
function searchData(){
var searchText = $('#searchBox').textbox('getValue'); // 获取查询文本
// 使用 load 方法重新加载数据,传递查询条件到后端处理
$('#datagrid').datagrid('load', { keyword: searchText });
}
</script>
</body>
</html>
在上述代码中,我们使用了 textbox 组件创建一个文本框,用于输入查询条件。点击 "Search" 按钮后,调用 searchData 函数,获取输入的查询文本,然后使用 datagrid 的 load 方法重新加载数据,同时传递查询条件到后端(你需要替换成实际的后端数据接口)。这样就实现了基本的查询功能。
请注意,在实际项目中,你需要替换 'your_data_url' 为你的后端数据接口的实际 URL,同时在后端处理接口中根据传递的查询条件进行数据过滤。
转载请注明出处:http://www.zyzy.cn/article/detail/13105/jQuery EasyUI