Extjs grid工具栏中搜寻的实现
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;
}
图示：