基于ExtJs框架的B/S高级查询界面
把昨天做的高级查询界面完善了一下，支持动态添加多个查询条件、定义逻辑关系，支持整形、浮点、字符串、日期、布尔值、自定义选择列表的录入，通过Ext.data.JsonStore可方便的与服务器交互，具体不多说了，看下面示例，曾经做过的朋友不妨交流一下。
样图：
示例：
- <DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html><head><title>XXX系统V1.0</title>
- <metaname="Author"contect="彭国辉">
- <metaname="Keywords"content="高级查询界面"/>
- <metaname="Description"content="http://blog.csdn.net/nhconch"/>
- <metahttp-equiv="Content-Type"content="text/html;charset=utf8">
- <linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css">
- <scripttype="text/javascript"src="adapter/ext/ext-base.js"></script>
- <scripttype="text/javascript"src="ext-all.js"></script>
- <scripttype="text/javascript"src="source/locale/ext-lang-zh_CN.js"></script>
- <scripttype="text/javascript">
- Ext.BLANK_IMAGE_URL='resources/images/default/s.gif';
- Ext.onReady(function(){
- vardsPQ=newExt.data.JsonStore({
- data:[],
- fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"]
- });
- varfieldsDef=newExt.data.JsonStore({
- fields:['value','text','type','data'],
- data:[
- {value:'A.Billno',text:'字符串',type:'string'},
- {value:'A.Date',text:'日期',type:'date'},
- {value:'A.boolean',text:'布尔',type:'boolean'},
- {value:'A.int',text:'整形',type:'int'},
- {value:'A.float',text:'浮点',type:'float'},
- {value:'A.lookup',text:'Lookup',type:'lookup',data:[['AA','list1'],['BB','list2'],['CC','list3']]},
- {value:'A.datalist',text:'自定义列表',type:'lookup',data:[[10,'xxxx1'],[20,'xxxx2'],[30,'xxxx3'],[11,'xxxx11'],[21,'xxxx21'],[31,'xxxx31'],[12,'xxxx22'],[22,'xxxx22'],[32,'xxxx32'],[13,'xxxx13'],[23,'xxxx23'],[33,'xxxx33'],[14,'xxxx14'],[24,'xxxx24'],[34,'xxxx3'],[15,'xxxx15'],[25,'xxxx25'],[35,'xxxx35'],[16,'xxxx16'],[26,'xxxx26'],[36,'xxxx36']]}
- ]
- });
- /*
- 作者:彭国辉2008-8-30
- 网站:http://kacarton.yeah.net/
- 博客:http://blog.csdn.net/nhconch
- 邮箱:kacarton(a)sohu.com
- 文章为作者原创，转载前请先与本人联系，转载请注明文章出处、保留作者信息，谢谢支持！
- */
- varnumericOp=datetimeOp=newExt.data.SimpleStore({
- fields:['value','text'],
- data:[['=','='],['<>','<>'],['<','<'],['<=','<='],['<','>'],['>=','>='],['isnull','空白'],['isnotnull','非空白']]
- });
- varstringOp=newExt.data.SimpleStore({
- fields:['value','text'],
- data:[['=','='],['<>','<>'],['<','<'],['<','>'],
- ["like'|%'",'以...开头'],["like'%|'",'以...结尾'],["like'%|%'",'包含字符'],["notlike'%|%'",'不包含字符'],
- ['isnull','空白'],['isnotnull','非空白']]
- });
- varlookupOp=booleanOp=newExt.data.SimpleStore({
- fields:['value','text'],
- data:[['=','='],['<>','<>'],['isnull','空白'],['isnotnull','非空白']]
- });
- varobjGridTextEditor=newExt.grid.GridEditor(newExt.form.TextField());
- //varobjGridMemoEditor=newExt.grid.GridEditor(newExt.form.TextArea());
- varobjGridDateEditor=newExt.grid.GridEditor(newExt.form.DateField({format:'Y-m-d'}));
- varobjGridIntegerEditor=newExt.grid.GridEditor(newExt.form.NumberField({allowBlank:false,allowNegative:false,allowDecimals:false}));
- varobjGridFloatEditor=newExt.grid.GridEditor(newExt.form.NumberField({allowBlank:false,allowNegative:false}));
- varobjGridBooleanEditor=newExt.grid.GridEditor(newExt.form.ComboBox({
- store:[[true,'是'],[false,'否']],
- mode:'local',
- readOnly:true,
- triggerAction:'all',
- allowBlank:false,
- editable:false,
- forceSelection:true,
- blankText:'请选择...'
- }));
- varobjGridLookupEditor;
- functionfileListChange(field,newValue,oldValue){
- //alert(field);
- }
- functionfindRecordValue(store,prop,propValue,field){
- varrecord;
- if(store.getCount()>0){
- store.each(function(r){
- if(r.data[prop]==propValue){
- rrecord=r;
- returnfalse;
- }
- });
- }
- returnrecord?record.data[field]:'';
- }
- functiondisplayOperator(v){
- switch(v){
- case'isnull':return'空白';
- case'isnotnull':return'非空白';
- case"like'|%'":return'以...开头';
- case"like'%|'":return'以...结尾';
- case"like'%|%'":return'包含字符';
- case"notlike'%|%'":return'不包含字符';
- default:returnv;
- }
- }
- functiondisplayValue(v,params,record){
- vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
- varoperator=record.get('operator');
- if(operator=='isnull'||operator=='isnotnull')return'';
- switch(dataType){
- case'date':returnv?v.dateFormat('Y-m-d'):'';
- case'boolean':return(v?'是':'否');
- case'lookup':vardata=findRecordValue(fieldsDef,'value',record.get('fieldname'),'data');
- for(vari=0;i<data.length;i++)
- if(v==data[i][0])returndata[i][1];
- //returndata[v]+','+data[v,0]+','+data[0,0];
- //returndata[v,0]+','+data[0,0];
- /*case'string':
- case'int':
- case'float':*/
- default:returnv;
- }
- }
- varqRowData=Ext.data.Record.create([
- {name:'idx',type:'int'},
- {name:'relation',type:'string'},
- {name:'leftParenthesis',type:'string'},
- {name:'fieldname',type:'string'},
- {name:'operator',type:'string'},
- {name:'value',type:'string'},
- {name:'rightParenthesis',type:'string'}
- ]);
- varcolM=newExt.grid.ColumnModel([
- {
- header:"关系",
- dataIndex:"relation",
- width:50,
- renderer:function(v){return(v=='and'?'并且':'或者')},
- editor:newExt.form.ComboBox({
- store:[['and','并且'],['or','或者']],
- mode:'local',
- readOnly:true,
- triggerAction:'all',
- allowBlank:false,
- //valueField:'value',
- //displayField:'text',
- editable:false,
- forceSelection:true,
- blankText:'请选择'
- })
- },{
- header:"括号",
- dataIndex:"leftParenthesis",
- width:40,
- editor:newExt.form.ComboBox({
- store:['(','((','((','(((','(((('],
- mode:'local',
- triggerAction:'all',
- valueField:'value',
- displayField:'text',
- editable:false
- })
- },{
- header:"字段名",
- dataIndex:"fieldname",
- width:130,
- //renderer:function(v,params,record){returnrecord.data['fieldname']},
- renderer:function(v){returnfindRecordValue(fieldsDef,'value',v,'text');},
- editor:newExt.form.ComboBox({
- store:fieldsDef,
- mode:'local',
- triggerAction:'all',
- valueField:'value',
- displayField:'text',
- editable:false,
- listeners:{change:fileListChange}
- })
- },{
- header:"运算符",
- width:80,
- dataIndex:"operator",
- renderer:displayOperator
- },{
- header:"内容",
- dataIndex:"value",
- width:130,
- renderer:displayValue
- },{
- header:"括号",
- width:40,
- dataIndex:"rightParenthesis",
- editor:newExt.form.ComboBox({
- store:[')','))',')))','))))'],
- mode:'local',
- triggerAction:'all',
- valueField:'value',
- displayField:'text',
- editable:false
- })
- }
- ]);
- vargrdDPQuery=newExt.grid.EditorGridPanel({
- height:500,
- width:490,
- renderTo:"hello",
- cm:colM,
- sm:newExt.grid.RowSelectionModel({singleSelect:false}),
- store:dsPQ,
- region:'center',
- border:false,
- enableColumnMove:false,
- enableHdMenu:false,
- loadMask:{msg:'加载数据...'},
- clicksToEdit:1,
- tbar:[
- {text:'添加',handler:function(){
- varcount=dsPQ.getCount();
- varr=newqRowData({idx:dsPQ.getCount(),relation:'and',leftParenthesis:'',fieldname:'',operator:'=',value:'',rightParenthesis:''});
- dsPQ.commitChanges();
- dsPQ.insert(count,r);
- }
- },
- {text:'删除',handler:function(){
- //store=grid.getStore();
- varselections=grdDPQuery.getSelectionModel().getSelections();
- for(vari=0;i<selections.length;i++){
- dsPQ.remove(selections[i]);
- }
- }
- },
- {text:'全部清除',handler:function(){dsPQ.removeAll();}},
- {text:'检查',handler:function(){if(checkFilter(grdDPQuery))alert('检查通过！');}},
- {text:'显示内容',handler:function(){varpv=document.getElementById('preview');pv.value=getFilter(grdDPQuery)}},
- {text:'显示文本',handler:function(){varpv=document.getElementById('preview');pv.value=getFilterText(grdDPQuery)}}
- ],
- listeners:{
- afteredit:function(e){
- if(e.column==2/*e.field=='fieldname'*/){
- varoldDataType=findRecordValue(fieldsDef,'value',e.originalValue,'type');
- varnewDataType=findRecordValue(fieldsDef,'value',e.value,'type');
- if(oldDataType!=newDataType){
- e.record.set('operator','=');
- e.record.set('value','');
- }
- //e.grid.colModel.setEditor(1,newExt.grid.GridEditor(newExt.form.DateField({format:'Y年m月d日'})));
- }
- },
- cellclick:function(grid,rowIndex,columnIndex,e){
- if(columnIndex!=3&&columnIndex!=4)return;
- varrecord=grid.getStore().getAt(rowIndex);//GettheRecord
- vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
- if(dataType=='')return;//未选定字段，退出
- if(columnIndex==3){//绑定运算符
- vargrdEditor=grid.colModel.getCellEditor(columnIndex,rowIndex);
- if(grdEditor)grdEditor.destroy();
- var_store;
- switch(dataType){
- case'string':_store=stringOp;break;
- case'date':_store=datetimeOp;break;
- case'boolean':_store=booleanOp;break;
- case'int':
- case'float':_store=numericOp;break;
- case'lookup':_store=lookupOp;break;
- }
- grdEditor=newExt.form.ComboBox({
- store:_store,
- mode:'local',
- triggerAction:'all',
- valueField:'value',
- displayField:'text',
- editable:false
- })
- grid.colModel.setEditor(columnIndex,newExt.grid.GridEditor(grdEditor));
- }
- elseif(columnIndex==4){//绑定编辑器
- varoperator=record.get('operator');
- if(operator=='isnull'||operator=='isnotnull'){
- grid.colModel.setEditor(columnIndex,null);
- return;
- }
- vargrdEditor;
- switch(dataType){
- case'string':grdEditor=objGridTextEditor;break;
- case'date':grdEditor=objGridDateEditor;break;
- case'boolean':grdEditor=objGridBooleanEditor;break;
- case'int':grdEditor=objGridIntegerEditor;break;
- case'float':grdEditor=objGridFloatEditor;break;
- case'lookup':
- if(objGridLookupEditor)objGridLookupEditor.destroy();
- objGridLookupEditor=newExt.grid.GridEditor(newExt.form.ComboBox({
- store:findRecordValue(fieldsDef,'value',record.get('fieldname'),'data'),
- mode:'local',
- readOnly:true,
- triggerAction:'all',
- allowBlank:false,
- editable:false,
- forceSelection:true,
- blankText:'请选择...'
- }));
- grdEditor=objGridLookupEditor;
- break;
- }
- if(grid.colModel.getCellEditor(columnIndex,rowIndex)!=grdEditor){
- grid.colModel.setEditor(columnIndex,grdEditor);
- }
- }
- }
- }
- });
- functioncheckFilter(grid){
- varn=grid.store.getCount();
- varleftPLen=0;
- varrightPLen=0;
- for(vari=0;i<n;i++){
- varrecord=grid.store.getAt(i);
- if(record.get('fieldname')==''){
- grid.getSelectionModel().selectRow(i);
- Ext.Msg.alert("错误","请选择查询字段。");
- returnfalse;
- }
- leftPLen+=record.get('leftParenthesis').length;
- rightPLen+=record.get('rightParenthesis').length;
- switch(record.get('operator')){
- case"like'|%'":
- case"like'%|'":
- case"like'%|%'":
- case"notlike'%|%'":
- if(record.get('value')==''){
- grid.getSelectionModel().selectRow(i);
- Ext.Msg.alert("错误","请输入内容。");
- returnfalse;
- }
- case'=':
- case'<>':
- case'<':
- case'>':
- case'<=':
- case'>=':
- vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
- if((dataType=='lookup'||dataType=='date')&&record.get('value')==''){
- grid.getSelectionModel().selectRow(i);
- Ext.Msg.alert("错误","请输入内容。");
- returnfalse;
- }
- }
- }
- if(leftPLen!=rightPLen){
- Ext.Msg.alert("错误","左括号与右括号数量不匹配，请检查。");
- returnfalse;
- }
- returntrue;
- }
- functiongetFilter(grid){
- if(!checkFilter(grid))return"";
- vars=[];
- varn=grid.store.getCount();
- for(vari=0;i<n;i++){
- varrecord=grid.store.getAt(i);
- if(i>0)s.push(record.get('relation'));
- s.push(record.get('leftParenthesis'));
- s.push(record.get('fieldname'));
- varoperator=record.get('operator');
- switch(operator){
- case"like'|%'":
- case"like'%|'":
- case"like'%|%'":
- case"notlike'%|%'":
- s.push(operator.replace(/\|/g,record.get('value').replace(/\'/g,"''").replace(/\%/g,"!%")));//forsqlserver
- break;
- case"isnull":
- case"isnotnull":
- s.push(operator);
- break;
- default:
- s.push(operator);
- vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
- switch(dataType){
- case'lookup':
- vard=findRecordValue(fieldsDef,'value',record.get('fieldname'),'data');
- if(typeofd[0][0]!='string'){
- s.push(record.get('value'));
- break;
- }
- case'string':
- s.push("'"+record.get('value').replace(/\'/g,"''")+"'");
- break;
- case'date':
- s.push("'"+record.get('value').dateFormat('Y-m-d')+"'");
- break;
- case'boolean':
- s.push(record.get('value')?"1":"0");//forsqlserver
- break;
- default:
- s.push(record.get('value'));
- break;
- }
- break;
- }
- s.push(record.get('rightParenthesis'));
- }
- returns.join('');
- }
- functiongetFilterText(grid){
- if(!checkFilter(grid))return"";
- vars=[];
- varn=grid.store.getCount();
- for(vari=0;i<n;i++){
- varrecord=grid.store.getAt(i);
- if(i>0)s.push(record.get('relation')=='and'?'并且':'或者');
- s.push(record.get('leftParenthesis'));
- s.push(findRecordValue(fieldsDef,'value',record.get('fieldname'),'text'));
- varoperator=record.get('operator');
- switch(operator){
- case"like'|%'":
- s.push("以");
- s.push('"'+record.get('value')+'"');
- s.push("开头");
- break;
- case"like'%|'":
- s.push("以");
- s.push('"'+record.get('value')+'"');
- s.push("结尾");
- break;
- case"like'%|%'":
- s.push("包含字符");
- s.push('"'+record.get('value')+'"');
- break;
- case"notlike'%|%'":
- s.push("不包含字符");
- s.push('"'+record.get('value')+'"');
- break;
- case"isnull":
- s.push("等于空白");
- break;
- case"isnotnull":
- s.push("等于非空白");
- break;
- default:
- s.push(operator);
- vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
- switch(dataType){
- case'lookup':
- vard=findRecordValue(fieldsDef,'value',record.get('fieldname'),'data');
- for(varj=0;j<d.length;j++)
- if(record.get('value')==d[j][0]){
- s.push('"'+d[j][1]+'"');
- break;
- }
- break;
- case'string':
- s.push('"'+record.get('value')+'"');
- break;
- case'date':
- s.push(record.get('value').dateFormat('Y-m-d'));
- break;
- case'boolean':
- s.push(record.get('value')?"是":"否");
- break;
- default:
- s.push(record.get('value'));
- break;
- }
- break;
- }
- s.push(record.get('rightParenthesis'));
- }
- returns.join('');
- }
- });
- </script>
- </head><body><divid="hello"></div>
- <textareaid=previewrows=5cols=70></textarea>
- </body></html>
<!-- google_ad_client = "pub-5395599807454886"; /* 468x15文字连接广告, 创建于 08-11-21 */ google_ad_slot = "5196248270"; google_ad_width = 468; google_ad_height = 15; //-->