easyui Datagrid+searchbox 实现搜索功能

最新推荐文章于 2022-05-07 20:24:01 发布
最新推荐文章于 2022-05-07 20:24:01 发布
阅读量5w 收藏 13
点赞数 9
分类专栏： Java Web easyUI学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wconvey/article/details/39989233
版权

说明:采用了ssh架构


这是搜索前的界面:

这是根据用户名搜索后出现的搜索结果:

1.前台页面:

<%@ page language="java" pageEncoding="utf-8" isELIgnored="false"%>
<%
	String path = request.getContextPath();
%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css"
	type="text/css" charset="utf-8"></link>
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"
	charset="utf-8"></link>
</head>
<script type="text/javascript">
	function doSearch(value,name){ //用户输入用户名,点击搜素,触发此函数
		$("#tt").datagrid({
			title:'searchBox',
			iconCls:'icon-ok',
			width:600,
			pageSize:10,
			pageList:[5,10,15,20],
			nowrap:true,
			striped:true,
			collapsible:true,
			toolbar:"#easyui_toolbar",
			url:'searchByUsernameAction.action?searchValue='+value, //触发此action,带上参数searcValue
			loadMsg:'数据加载中......',
			fitColumns:true,//允许表格自动缩放,以适应父容器
			sortName:'userId',
			sortOrder:'asc',
			remoteSort:false,
			columns : [ [ {
				field : 'userId',
				width : 150,
				title : '用户id'
			}, {
				field : 'name',
				width : 150,
				title : '用户名'
			}, {
				field : 'password',
				width : 230,
				align : 'right',
				title : '密码'
			} ] ],
			pagination : true,
			rownumbers : true
		})
	}
	
</script>
<body>
	<div class="easyui-panel" title="DataGrid with searching box"
		icon="icon-save" style="width: 600px; height: 420px;"
		collapsible="true" minimizable="true" maximizable=true closable="true">

		<div class="easyui-layout" fit="true"  >
			<div  id="easyui_toolbar" region="north" border="false"
				style="border-bottom: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;">
				<div style="float: left;">
					<a href="#" class="easyui-linkbutton" plain="true" icon="icon-add">新增</a>
				</div>

				<div class="datagrid-btn-separator"></div>

				<div style="float: left;">
					<a href="#" class="easyui-linkbutton" plain="true" icon="icon-save">编辑</a>
				</div>

				<div class="datagrid-btn-separator"></div>

				<div style="float: left;">
					<a href="#" class="easyui-linkbutton" plain="true"
						icon="icon-remove">删除</a>
				</div>

				<div id="tb" style="float: right;">
					<input id="ss" class="easyui-searchbox"
						searcher="doSearch" prompt="请输入用户名"
						style="width: 130px; vertical-align: middle;"></input> 
				</div>

			</div>
			<div region="center" border="false">
				<table id="tt"></table>
			</div>

		</div>
	</div>
	<script>
		$('#tt').datagrid({
			title:'searchBox',
			iconCls:'icon-ok',
			width:600,
			pageSize:10,
			pageList:[5,10,15,20],
			nowrap:true,
			striped:true,
			collapsible:true,
			toolbar:"#easyui_toolbar",
			//url : './datagrid/userData.json',
			url:'getAllUserAction.action', //搜索前,触发此action请求所有用户信息
			loadMsg:'数据加载中......',
			fitColumns:true,//允许表格自动缩放,以适应父容器
			sortName:'userId',
			sortOrder:'asc',
			remoteSort:false,
			columns : [ [ {
				field : 'userId',
				width : 150,
				title : '用户id'
			}, {
				field : 'name',
				width : 150,
				title : '用户名'
			}, {
				field : 'password',
				width : 230,
				align : 'right',
				title : '密码'
			} ] ],
			pagination : true,
			rownumbers : true
		});
	</script>

</body>
</html>
2.strust.xml的配置 

	<package name="easyui" extends="struts-default">
		<action name="getAllUserAction" class="com.ssh.action.UserAction"
			method="getAllUser">
		</action>
		<action name="userVerifyAction" class="com.ssh.action.UserAction"
			method="verify">
		</action>
		<action name="delUserAction" class="com.ssh.action.UserAction"
			method="delUser">
		</action>
		<action name="userAddAction" class="com.ssh.action.UserAction"
			method="add">
		</action>
		<action name="searchByUsernameAction" class="com.ssh.action.UserAction"
		        method="searchByUsername">
		</action>
	</package>

3.action类

<span style="font-size:12px;">package com.ssh.action;

import java.io.PrintWriter;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.ssh.bean.TUser;
import com.ssh.service.UserService;
import com.ssh.serviceImp.ViewLogServiceImp;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;

@SuppressWarnings("serial")
public class UserAction extends ActionSupport{
	// static Logger log = Logger.getLogger(TUser.class);

	private JSONObject jsonObj;
	private String rows;//
	private String page;
	
	private TUser tuser;
	private String tableName;
	private String fieldName;
	private String parameter;
	private UserService userService;
	private String num;// 删除时循环的次数；
	private String ids;//要删除的用户id号
	private String searchValue;

	//
	private ViewLogServiceImp viewLogService;
	
	// 测试用的变量
	String userId;
	String name;
	String password;
	

	//

	public void getAllUser() throws Exception {
		// log.info("查询所有学生信息！");
		System.out.println("getAllUser方法" + "page=" + page + "  rows=" + rows);

		List list = userService.getUserList(page, rows);
		for (int i = 0; i < list.size(); i++) {
			System.out.println(((TUser) list.get(i)).getName() + "*");
		}
		int size = userService.getUserTotal();
		System.out.println("UserAction:Total=" + size + ",page=" + list.size());
		try {
			toBeJson(list, size);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	/*
	 * public void add() throws Exception { tuser=new TUser();
	 * tuser.setUserId(15); tuser.setName("aaaaa"); tuser.setPassword("xxxx");
	 */
	public void add(String userId, String name, String password)
			throws Exception {
		System.out
				.println("add方法:   " + userId + "  " + name + "  " + password);
		userService.saveUser(userId, name, password);
	    
	}

	public void add() throws Exception {
		System.out.println("不带参数的add方法:   " + tuser.getUserId() + "  "
				+ tuser.getName() + "  " + tuser.getPassword());
		userService.saveUser((tuser.getUserId()).toString(), tuser.getName(),
				tuser.getPassword());
		 TUser tu=getTUser();
		userService.saveRecord(tu, "add user");
		
	}

	// 添加时，验证是否已经存在数据库
	public void verify() throws Exception {
		System.out.println("UserAction:verfiy: " + tableName + " " + fieldName
				+ "  " + parameter);
		String s = userService.queryByUnique(tableName, fieldName, parameter);
		// 将验证结果返回到页面，1代表已经存在数据库中，0代表没有
		System.out.println("s=" + s);

		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;Charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(s);
		out.flush();
		out.close();
	}

	// 删除
	public void delUser(String ids) throws Exception {
		System.out.println("delUser方法:   " + ids);
		userService.delUser(ids);
		TUser tu=getTUser();
		userService.saveRecord(tu, "delete user");
		
	}
	public void delUser()throws Exception{
		System.out.println("不带参数delUser方法: "+ids);
		userService.delUser(ids);
	}
    public void searchByUsername()throws Exception{
    	List list=userService.searchByUsername(page,rows,searchValue);
    	int size=userService.getSearchByUsernameTotal(searchValue);
    	toBeJson(list,size);
    }
	// 转化WieJson格式
	@SuppressWarnings({ "rawtypes", "unchecked" })
	public void toBeJson(List list, int total) throws Exception {
		try {
			HttpServletResponse response = ServletActionContext.getResponse();
			// ？？？？？？？？？？？？？？？
			// JSONObject jobj = new JSONObject();
			// System.out.println("UserAction.toBeJson()4");
			// jobj.accumulate("total", total);// total代表一共有多少数据
			// System.out.println("UserAction.toBeJson()1");
			// jobj.accumulate("rows", list);// rows是代表显示的页的数据
			// System.out.println("UserAction.toBeJson()3");
			// response.setCharacterEncoding("utf-8");// 指定为utf-8
			// System.out.println("UserAction.toBeJson()2" + jobj.toString());

			String sb = "{";
			sb += "\"total\":" + total;
			sb += ",\"rows\":[";
			for (TUser po : (List<TUser>) list) {
				sb += "{";
				sb += "\"name\":\"" + po.getName();
				sb += "\",\"password\":\"" + po.getPassword();
				sb += "\",\"userId\":" + po.getUserId();
				sb += "},";
			}
			if (sb.endsWith(","))
				sb = sb.substring(0, sb.length() - 1);
			sb += "]}";
			// System.out.println("UserAction.toBeJson()" + sb);
			response.getWriter().write(sb);// 转化为JSON格式
			// log.info(sb);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	//根据session来获取当前用户的信息
	@SuppressWarnings("rawtypes")
	public TUser getTUser()
	{
		ActionContext ctx=ActionContext.getContext();
		Map session=ctx.getSession();
		TUser tu=(TUser)session.get("LOGINED_USER");
		System.out.println("UserAction中:getTUser方法:"+tu.getUserId()+"  "+tu.getName());
		return tu;
	}

	public JSONObject getJsonObj() {
		return jsonObj;
	}

	public void setJsonObj(JSONObject jsonObj) {
		this.jsonObj = jsonObj;
	}

	public String getRows() {
		return rows;
	}

	public void setRows(String rows) {
		this.rows = rows;
	}

	public String getPage() {
		return page;
	}

	public void setPage(String page) {
		this.page = page;
	}

	public TUser getTuser() {
		return tuser;
	}

	public void setTuser(TUser tuser) {
		this.tuser = tuser;
	}

	public String getTableName() {
		return tableName;
	}

	public void setTableName(String tableName) {
		this.tableName = tableName;
	}

	public String getFieldName() {
		return fieldName;
	}

	public void setFieldName(String fieldName) {
		this.fieldName = fieldName;
	}

	public String getParameter() {
		return parameter;
	}

	public void setParameter(String parameter) {
		this.parameter = parameter;
	}

	public UserService getUserService() {
		return userService;
	}

	public void setUserService(UserService userService) {
		this.userService = userService;
	}

	public String getNum() {
		return num;
	}

	public void setNum(String num) {
		this.num = num;
	}

	public String getIds() {
		return ids;
	}

	public void setIds(String ids) {
		this.ids = ids;
	}

	public String getUserId() {
		return userId;
	}

	public void setUserId(String userId) {
		this.userId = userId;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public ViewLogServiceImp getViewLogService() {
		return viewLogService;
	}

	public void setViewLogService(ViewLogServiceImp viewLogService) {
		this.viewLogService = viewLogService;
	}

	public String getSearchValue() {
		return searchValue;
	}

	public void setSearchValue(String searchValue) {
		this.searchValue = searchValue;
	}
	

}</span>

2.实现层,查询数据库 

package com.ssh.serviceImp;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpSession;

//import org.hibernate.criterion.DetachedCriteria;
import org.apache.struts2.ServletActionContext;
import org.springframework.orm.hibernate3.HibernateTemplate;

import com.ssh.bean.TAdminLog;
import com.ssh.bean.TUser;
import com.ssh.service.UserService;

public class UserServiceImp implements UserService {
	HibernateTemplate ht;

	public HibernateTemplate getHt() {
		return ht;
	}

	public void setHt(HibernateTemplate ht) {
		this.ht = ht;
	}

	@SuppressWarnings("unchecked")
	@Override
	public List<TUser> getTUser(String username, String password) {
		// TODO Auto-generated method stub
		StringBuffer sql = new StringBuffer("from TUser where name='");
		sql.append(username + "' and password='" + password + "'");
		return ht.find(sql.toString());
	}

	//
	@SuppressWarnings("rawtypes")
	public List getUserList(String page, String rows) {

		int currentPage = Integer
				.parseInt((page == null) || (page == "0") ? "1" : page);
		int pageSize = Integer.parseInt((rows == null) || rows == "0" ? "1"
				: rows);
		System.out.println("currentPage=" + currentPage + "  pageSize="
				+ pageSize);

		/*
		 * DetachedCriteria criteria=DetachedCriteria.forClass(TUser.class);
		 * List list=ht.findByCriteria(criteria, currentPage*pageSize,
		 * pageSize);
		 */
		StringBuffer sql = new StringBuffer("from TUser where userId>=");
		sql.append((currentPage - 1) * pageSize + 1);
		sql.append(" and userId <=");
		sql.append(currentPage * pageSize);
		List list = ht.find(sql.toString());
		return list;
	}

	@SuppressWarnings("rawtypes")
	public int getUserTotal() throws Exception {
		List list = ht.find("from TUser");
		return list.size();
	}

	// 新增用户信息
	public void saveUser(String userId, String name, String password)
			throws Exception {
		System.out.println("UserServiceImp:" + name);
		TUser tuser = new TUser();
		tuser.setUserId(Integer.parseInt(userId));
		tuser.setName(name);
		tuser.setPassword(password);
		ht.save(tuser);

		HttpSession session = ServletActionContext.getRequest().getSession();
		TUser tu = new TUser();
		String uid = (String) session.getAttribute("userId");
		String na = (String) session.getAttribute("username");
		String ps = (String) session.getAttribute("password");
		tu.setUserId(Integer.parseInt(uid));
		tu.setName(na);
		tu.setPassword(ps);
		saveRecord(tu, "save user");
	}

	// 删除用户
	@SuppressWarnings("rawtypes")
	public void delUser(String ids) throws Exception {
		int id = Integer.parseInt(ids);
		StringBuffer sql = new StringBuffer(
				"delete TUer user where user.userId = ");
		sql.append(id);
		System.out.println(sql);
		// ht.delete(sql);
		// TUser tuser = (TUser) (ht.find("from TUser where userId = " + ids));
		TUser tuser = new TUser();
		List list = ht.find("from TUser where userId = " + ids);
		if (list.size() > 0) {
			tuser = (TUser) list.get(0);
		}
		System.out.println("***" + tuser.getName());
		ht.delete(tuser);

		HttpSession session = ServletActionContext.getRequest().getSession();
		TUser tu = new TUser();
		String uid = (String) session.getAttribute("userId");
		String na = (String) session.getAttribute("username");
		String ps = (String) session.getAttribute("password");

		tu.setUserId(Integer.parseInt(uid));
		tu.setName(na);
		tu.setPassword(ps);
		System.out.println("delUser:userId:");
		System.out.println(uid);

		saveRecord(tu, "delUser user");
	}

	// 判断是否具有唯一性
	@SuppressWarnings("rawtypes")
	public String queryByUnique(String tableName, String fieldName,
			String parameter) throws Exception {
		System.out.println("tableName:" + tableName + " fieldName:" + fieldName
				+ " parameter:" + parameter);

		StringBuffer sql = new StringBuffer("from " + tableName + " where "
				+ fieldName + " = " + parameter);

		System.out.println(sql.toString());

		List list = null;
		try {
			list = ht.find(sql.toString());
			if (list != null) {
				System.out.println("***1" + list.toString());

				// System.out.println(((TUser) list.get(0)).getName());

			} else {
				System.out.println("***2");
			}

		} catch (Exception e) {
			e.printStackTrace();
		}

		/*
		 * if (list != null) { //System.out.println(((TUser)
		 * list.get(0)).getName());
		 * 
		 * } else { System.out.println("***"); }
		 */

		if (list == null || list.size() != 0) {
			return "1";
		} else {
			return "0";// 代表数据库里没有这条数据；
		}
	}

	@Override
	public void saveRecord(TUser tuser, String record) throws Exception {
		// TODO Auto-generated method stub
		TAdminLog tAdminLog = new TAdminLog(tuser, record);
		ht.save(tAdminLog);
	}

	@Override
	public List searchByUsername(String page, String rows, String searchValue)
			throws Exception {
		// TODO Auto-generated method stub
		System.out.println("page="+page);
		System.out.println("rows="+rows);
		System.out.println("searchValue="+searchValue);
		StringBuffer sql = new StringBuffer("from TUser t where t.name ='");
		sql.append(searchValue);
		sql.append("'");//注意要加单引号
		System.out.println("searchByUsername:"+sql);
		List list = ht.find(sql.toString());
		int currentPage = Integer
				.parseInt((page == null) || (page == "0") ? "1" : page);
		int currentRows = Integer
				.parseInt((rows == null) || (rows == "0") ? "1" : rows);
		int number = (currentPage - 1) * currentRows;
		List li = new ArrayList();
		for (int i = number; i < (number + currentRows)
				&& i < (list.size()); i++) {
			li.add(list.get(i));
		}
		return li;
	}

	@Override
	public int getSearchByUsernameTotal(String searchValue) throws Exception {
		// TODO Auto-generated method stub
		StringBuffer sql = new StringBuffer("from TUser t where t.name ='");
		sql.append(searchValue);
		sql.append("'");
		List list = ht.find(sql.toString());
		if (list.size() == 0) {
			return 0;
		} else {
			return list.size();
		}
	}

}

数据库截图:


注:全部的源码,我压缩后传到csdn资源上myf工程,感兴趣的朋友可以看一下,刚入门,源码写的比较菜,欢迎大家提出意见和建议,有问题发我扣扣消息,2513822561


sumi
关注
专栏目录
easyui datagrid 搜索框
u013421749的专栏
06-17 1941
引入页     import="java.util.*" pageEncoding="UTF-8"%>     String path = request.getContextPath();     String root = request.getScheme() + "://" + request.getServerName()             + ":" +
asp.net mvc easyui datagrid使用
wq1234wq的专栏
04-12 4266
话不多说，上代码吧。 创建一个Controller
在jquery easyui中的datagrid中添加searchbox!
08-12
研究了好久，终于成功在jquery easyui中的datagrid中添加searchbox!
ThinkPHP与EasyUI整合之三（searchbox）：在datagrid中查询指定记录
weixin_33860147的博客
12-20 88
在datagrid中toolbar添加searchbox查询框，根据列范围查询数据，先看效果图： 1. searchbox采用easyui的Demo例子，再加以js扩展，根据datagrid中的列数据自动生成选择查询范围。 View Code 1 <div id="testa" style="display:inline;padding-top:17px;"> ...
easyui datagrid toolbar 添加搜索框
weixin_34344403的博客
11-13 384
最近用到了就研究了下，效果  把列名稍加转换放入menubtton，对于单项搜索来说还是非常方便的 var fields =  $('#tt').datagrid('getColumnFields'); for(var i=0; i&lt;fields.length; i++){ var opts = $('#tt').datagrid('getColumnOption', fie...
JQueryEasyUI学习笔记（九）datagrid查找
weixin_30794851的博客
04-06 147
欢迎大家转载，转载请注明出处！ 希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！ 今天说下基于datagrid框架的查询，后续会有删除、添加与修改： 这一系列笔记以easyui的框架使用为主，后台代码为辅，如有需要，我会尽量抽时间写后台； 无需多言，直接代码（希望不要再因为我把注释大部分写到代码中而给我踢出首页）： <head&gt...
jquery easyui datagrid纯js导出到excel
热门推荐
current_person的博客
01-21 1万+
说明:easyui本身的datagrid不支持导出excel,查了一些资料后的结合后端代码实现导出功能的都是C#, 下面的例子使用jquery前端代码导出excel 主要的方法是使用datagrid的getData方法得到json数据,然后将json数据生成excel文件下载 因为是后端分页,只能导出当前页的内容,如果要导出全部内容,可以向后台发送json请...
给easyui-datagrid的toolbar自定义一个动态查询条件的搜索框
Keep moving on.
06-01 6181
第一部分 以各列为查询条件，查询条件可切换1.在HTML部分写一个searchbox，代码如下:&lt;div id="searchOptionTb"&gt; &lt;input id="searchOptionbox" style="width:260px"&gt;&lt;/input&gt; &lt;div id="menuOption" style=&amp
easyUI实现类似搜索框关键词自动提示功能示例代码
11-27
EasyUI的SearchBox组件只提供了静态搜索框，我们可以使用ComboBox来实现动态的自动关键匹配效果，并且不需要加载远程数据。当前页面的DataGrid的数据我们可以直接在本地获取之。 代码如下： setp1、创建combobox ...
easyui datagrid添加搜索框
shan165310175的专栏
10-28 1万+
图例： 代码部分： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> standard.jsp $(function(){ $("#standardList").datagrid({
JQUERY-EASYUI添加搜索框
01-17
jquery-easyui+插件jquery-searchbox在datagrid中添加搜索框
为easyUI datagrid添加搜索框
08-04 3574
Add search functionality in DataGrid In this tutorial we will show you how to get data from database and display them to datagrid. And then demonstrate how to search through the results according t
EasyUI之搜索框searchbox
牛栏山矿泉水
10-28 414
1、实例背景 EasyUI中searchbox搜索框，输入值后点击搜索图标，可以打印出值 2、实例源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;EasyUI之搜索框searchbox&lt;/title&gt; &lt;lin
java easyui条件组合查询_easyui之 datagrid 多条件搜索、查询
weixin_39616686的博客
02-24 199
$(function () {$("#dg").datagrid({url: '',singleSelect: true,pagination: true,pageSize: 15,pageList: [5, 10, 15, 20, 30, 50, 80, 200],queryParams: form2Json("searchform"),　　//关键之处//锁定列frozenColumns: [...
easyUI_04（DataGrid数据查询）
weixin_65479202的博客
05-07 842
easyUI后台管理实现数据显示和模糊查询，看了代码就能进行操作和运行！！！简单易学！！！
easyUi之searchbox
Genius_J的博客
07-01 340
searchbox获得数据:$(‘#id’).searchbox(‘getValue’)
easyui-04（DataGrid数据查询）
m0_63579794的博客
05-07 259
easyui-04（DataGrid数据查询）
easyui datagrid 客户端搜索、分页、排序
a363722188的专栏
08-21 1535
easyui datagrid 客户端搜索、分页、排序 时间 2014-06-26 14:22:56 CSDN博客 原文  http://blog.csdn.net/junglezax/article/details/34842653 主题 HTML jQuery easyui datagrid的排序默认是服务器端排序，可以用sorter实现客户端排序
03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)
lemoncorporation的博客
05-22 8750
我们将数据展示出来，自然少不了对某条数据的搜索，所以搜索功能是必不可少的！ 效果图3-1： （1）提交参数到后台的方法 我们在datagrig的toolbar（工具栏）区定义了一个input用来输入要检索的数据，一个easyui-combobox用来设置排序，然后一个按钮用来提交参数到服务器， 那么DataGrid提交参数的方法有不少，常用的两种方法如下： 1
easyui datagrid 在toolbar添加模糊搜索
最新发布
05-27
您可以在easyui datagrid的toolbar中添加一个搜索框，然后通过监听搜索框的输入事件，在后台进行模糊搜索。 以下是一个示例代码： ```javascript $('#datagrid').datagrid({ url: 'your_data_url', toolbar: [{ text: '搜索：' },{ xtype: 'textfield', id: 'searchbox', width: 200, listeners: { change: function(value) { $('#datagrid').datagrid('load', { search: value }); } } }], queryParams: { search: '' } }); ``` 在上面的代码中，我们在toolbar中添加了一个搜索框，然后通过监听change事件，在输入框中输入内容时触发load方法重新加载datagrid的数据。在load方法中，我们通过queryParams传递了一个search参数，后台可以根据这个参数进行模糊搜索。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值