Extjs grid工具栏中搜索的实现

Extjs grid工具栏中搜索的实现

 

1.单选框+文本框：

{
	id:"byXmmc",
	xtype:"radio",
	boxLabel:"按项目名称 ",
	name:"ftype",  //注意两个radio的name是一样的，才是一组的
	listeners:{
		"check":function(){
			Ext.getCmp("paras").setValue("");//文本框置空
		}
	}
},{
	id:"byQymc",
	xtype:"radio",
	boxLabel:"按企业名称 ",
	name:"ftype",
	checked:true  //默认选中
},{
	id:"paras",
	xtype:"textfield",
	enableKeyEvent:true,//开启文本框按键监听
	listeners:{
		"specialKey":function(f,e){  //注意这里是2个参数！
			if(e.getKey() == e.ENTER){  //或：e.getKey()==Ext.EventObject.ENTER
				var field = "qymc";
				if(Ext.getCmp("byXmmc").checked){
					field = "xmmc";
				}
				var paras = Ext.getCmp("paras").getValue();
				var status = Ext.getCmp("status").getValue();
				epStore.baseParams.pField = field;
				epStore.baseParams.pParas = paras;
				epStore.baseParams.pStatus = status;
				epStore.load({params:{start:0,limit:pageSize}});
			}
		}
	}
}

   
 

2.Combox下拉选框：

{
	xtype:"label",
	text:"状态："
},{
	id:"status",
	xtype:"combo",
	value:'', 
    width:90,
    mode : 'local', 
    triggerAction :'all', 
    forceSelection:true, //强制选择
    store : new Ext.data.SimpleStore({ 
    	fields : ["id", "name"], 
    	data : [ 
			['', '全部'],     
        	['0', '等待审核'], 
        	['1', '审核成功']
     	] 
	}),
    valueField : "id", 
    displayField : "name", 
    readOnly: true  //不可输入
}

 

3.搜索按钮：

{
	text: '搜索',
	iconCls: 'filter',
	listeners:{
		"click":function(){
			var field = "qymc";
			if(Ext.getCmp("byXmmc").checked){
				field = "xmmc";
			}
			var paras = Ext.getCmp("paras").getValue();
			var status = Ext.getCmp("status").getValue();
			epStore.baseParams.pField = field;
			epStore.baseParams.pParas = paras;
			epStore.baseParams.pStatus = status;
			epStore.load({params:{start:0,limit:pageSize}});
		}
	}
}

 

 

综合示例：

1.Extjs：

/*-----1.创建数据源-----*/
var epStore = new Ext.data.JsonStore({
	autoLoad: true,
	url:"getEProject.eva?doType=getAuditProject",
	root:"data",
	fields: ["id","xmid","project","company","etype","emode","eagency","status","advice","audit_date","other"]
});


/*-----2.创建视图渲染颜色-----*/
var epView = new Ext.grid.GridView({
	getRowClass : function(record, rowIndex){
		if(record.get('status') == 1){
			return "readOnly";
		}
	}
});


/*-----3.创建ColumnModel-----*/
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel({
	columns:[
		sm,
		{
			header:"编号",
			dataIndex:"id",
			hidden:true
		},{
			header:"项目名称",
			dataIndex:"project",
			width:150,
			sortable:true
		},
		......
		...
		...
	]
});

/*-----4.创建表格面板-----*/
var grid = new Ext.grid.GridPanel({
	store:epStore,
	cm:cm,
	sm:sm,
	view: epView,
	loadMask:{msg:'正在加载数据，请稍侯……'},  
	height:80,
	tbar:[
		{
			id:"byXmmc",
			xtype:"radio",
			boxLabel:"按项目名称 ",
			name:"ftype",
			listeners:{
				"check":function(){
					Ext.getCmp("paras").setValue("");
				}
			}
		},{
			id:"byQymc",
			xtype:"radio",
			boxLabel:"按企业名称 ",
			name:"ftype",
			checked:true
		},{
			id:"paras",
			xtype:"textfield",
			enableKeyEvent:true,
			listeners:{
				"specialKey":function(f,e){
					if(e.getKey() == e.ENTER){
						var field = "qymc";
						if(Ext.getCmp("byXmmc").checked){
							field = "xmmc";
						}
						var paras = Ext.getCmp("paras").getValue();
						var status = Ext.getCmp("status").getValue();
						epStore.baseParams.pField = field;
						epStore.baseParams.pParas = paras;
						epStore.baseParams.pStatus = status;
						epStore.load({params:{start:0,limit:pageSize}});
					}
				}
			}
		},"-",{
			xtype:"label",
			text:"状态："
		},{
			id:"status",
			xtype:"combo",
			value:'', 
	        width:90,
	        mode : 'local', 
	        triggerAction :'all', 
	        forceSelection:true,
	        store : new Ext.data.SimpleStore({ 
	        	fields : ["id", "name"], 
	        	data : [ 
					['', '全部'],     
		        	['0', '等待审核'], 
		        	['1', '审核成功']
	         	] 
        	}),
	        valueField : "id", 
	        displayField : "name", 
	        readOnly: true
		},"-",{
			text: '搜索',
        	iconCls: 'filter',
        	listeners:{
        		"click":function(){
        			var field = "qymc";
					if(Ext.getCmp("byXmmc").checked){
						field = "xmmc";
					}
					var paras = Ext.getCmp("paras").getValue();
					var status = Ext.getCmp("status").getValue();
					epStore.baseParams.pField = field;
					epStore.baseParams.pParas = paras;
					epStore.baseParams.pStatus = status;
					epStore.load({params:{start:0,limit:pageSize}});
        		}
        	}
		},{
			text:"审核项目",
			iconCls: 'audit',
			handler:showAuditWin
		},{
			text:"查看审核详情",
			iconCls:"apply",
			icon: '../images/apply.gif',
			handler:showAuditDetailWin
		}
	],
	bbar: new Ext.PagingToolbar({
        pageSize: pageSize,
        store: epStore,
        displayInfo: true,
        displayMsg: '当前显示 {0} - {1} ，共{2}条记录',
        emptyMsg: "没有数据",
        items: ['-']
    })
});

 

2.Servlet：

if ("getAuditProject".equals(action)) {
	String pField = request.getParameter("pField");
	String pParas = request.getParameter("pParas");
	String pStatus = request.getParameter("pStatus");
	EvaluationDao evaluationDao = new EvaluationDao();
	JSONObject jObject = new JSONObject();
	jObject.put("data", evaluationDao.getAuditProject(user,pField,pParas,pStatus));
	response.setContentType("text/json;charset=UTF-8");
	out = response.getWriter();
	out.print(jObject);
	out.close();
	return;
}

 

3.Dao：

public JSONArray getAuditProject(User user, String field, String paras, String status) {
	Session s = null;
	List list = null;
	JSONArray jArray = new JSONArray();
	long did = Long.valueOf(user.getDepartment().getDid());
	try {
		s = HibernateUtil.getSession();
		s.beginTransaction();
		StringBuffer sb = new StringBuffer();
		if (user.getUserid().equals("admin")) {
			sb.append("select au.id,p.xmid,p.xmmc,"
					+ "e.qymc,ev.etype,ev.emode,ev.eagency,au.status,au.advice,au.audit_date from "
					+ "enterprise e,en_project p,project_evaluate ev,"
					+ "project_audit au where e.swdjzh = p.swdjzh and "
					+ "p.xmid in ev.xmid and au.jid = ev.id");
		}
		else {
			sb.append("select au.id,p.xmid,p.xmmc,"
					+ "e.qymc,ev.etype,ev.emode,ev.eagency,au.status,au.advice,au.audit_date from "
					+ "enterprise e,en_project p,project_evaluate ev,"
					+ "project_audit au where e.swdjzh = p.swdjzh and "
					+ "p.xmid in ev.xmid and au.jid = ev.id and au.did =" + did);
		}
		if (paras != null && !"".equals(paras)) {
			if ("xmmc".equals(field)) {
				sb.append(" and p.xmmc like '%"+paras+"%' ");
			}else if ("qymc".equals(field)) {
				sb.append(" and e.qymc like '%"+paras+"%' ");
			}
		}
		if(status != null && !"".equals(status)){
			sb.append(" and au.status = " + status);
		}
		Query query = s.createSQLQuery(sb.toString());
		list = query.list();
		if (list != null && list.size() > 0) {
			for (int i = 0; i < list.size(); i++) {
				Object[] obj = (Object[]) list.get(i);
				JSONObject jObject = new JSONObject();
				jObject.put("id", obj[0]);
				jObject.put("xmid", obj[1]);
				jObject.put("project", obj[2]);
				jObject.put("company", obj[3]);
				jObject.put("etype", obj[4]);
				jObject.put("emode", obj[5]);
				jObject.put("eagency", obj[6]);
				jObject.put("status", obj[7]);
				jObject.put("advice", obj[8]);
				jObject.put("audit_date", obj[9]);
				jArray.put(jObject);
			}
		}
	} catch (Throwable e) {
		logger.error(e);
		HibernateUtil.endSession(s);
	} finally {
		HibernateUtil.endSession(s);
	}
	return jArray;
}

 

图示：