easyui 自定义toolbar 加查询框
时间: 2024-01-05 14:04:38 浏览: 28
你可以通过以下步骤来自定义toolbar并加入查询框:
1. 在toolbar中添加一个文本框和一个按钮,用于执行查询操作。
```html
<div id="toolbar">
<input id="searchbox" class="easyui-textbox" data-options="prompt:'Search...', iconCls:'icon-search'">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">Search</a>
</div>
```
2. 在JavaScript中定义doSearch函数,用于执行查询操作。
```javascript
function doSearch() {
var keyword = $('#searchbox').textbox('getValue');
// TODO: 执行查询操作
}
```
3. 在datagrid中设置toolbar属性为自定义的toolbar。
```javascript
$('#datagrid').datagrid({
url: '...',
toolbar: '#toolbar',
// ...
});
```
4. 在doSearch函数中获取查询关键字,并通过datagrid的load方法重新加载数据,并传入查询参数。
```javascript
function doSearch() {
var keyword = $('#searchbox').textbox('getValue');
$('#datagrid').datagrid('load', {keyword: keyword});
}
```
5. 在后台接收到查询参数后,进行相应的查询操作。
```java
@RequestMapping("/list")
@ResponseBody
public List<User> list(@RequestParam(required=false) String keyword) {
// TODO: 执行查询操作
}
```
以上是一个简单的自定义toolbar加查询框的示例,你可以根据自己的需求进行修改和扩展。