今天在CSDN博客上看了有关一篇 基于ExtJs框架的B/S高级查询界面的文章，感觉做的效果不错，特来转发上来，希望对有需要的朋友们一点帮助。
支持动态添加多个查询条件、定义逻辑关系，支持整形、浮点、字符串、日期、布尔值、自定义选择列表的录入，通过Ext.data.JsonStore可方便的与服务器交互。
样图：
示例：
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>XXX系统V1.0</title>
<meta name="Author" contect="彭国辉">
<meta name="Keywords" content="高级查询界面" />
<meta name="Description" content="http://blog.csdn.net/nhconch" />
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function () {
var dsPQ=new Ext.data.JsonStore({
data:[],
fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"]
});
var fieldsDef = new Ext.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
文章为作者原创，转载前请先与本人联系，转载请注明文章出处、保留作者信息，谢谢支持！
*/
var numericOp = datetimeOp = new Ext.data.SimpleStore({
fields: ['value','text'],
data : [['=','='],['<>','<>'],['<','<'],['<=','<='],['<','>'],['>=','>='],['is null','空白'],['is not null','非空白']]
});
var stringOp = new Ext.data.SimpleStore({
fields: ['value','text'],
data : [['=','='],['<>','<>'],['<','<'],['<','>'],
["like '|%'",'以...开头'],["like '%|'",'以...结尾'],["like '%|%'",'包含字符'],["not like '%|%'",'不包含字符'],
['is null','空白'],['is not null','非空白']]
});
var lookupOp = booleanOp = new Ext.data.SimpleStore({
fields: ['value','text'],
data : [['=','='],['<>','<>'],['is null','空白'],['is not null','非空白']]
});
var objGridTextEditor = new Ext.grid.GridEditor(new Ext.form.TextField());
//var objGridMemoEditor = new Ext.grid.GridEditor(new Ext.form.TextArea());
var objGridDateEditor = new Ext.grid.GridEditor(new Ext.form.DateField({format:'Y-m-d'}));
var objGridIntegerEditor = new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false,allowNegative:false,allowDecimals:false}));
var objGridFloatEditor = new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false,allowNegative:false}));
var objGridBooleanEditor = new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: [[true,'是'],[false,'否']],
mode: 'local',
readOnly: true,
triggerAction: 'all',
allowBlank: false,
editable: false,
forceSelection: true,
blankText:'请选择...'
}));
var objGridLookupEditor;
function fileListChange(field,newValue,oldValue){
//alert(field);
}
function findRecordValue(store,prop, propValue,field){
var record;
if(store.getCount() > 0){
store.each(function(r){
if(r.data[prop] == propValue){
rrecord = r;
return false;
}
});
}
return record ? record.data[field] : '';
}
function displayOperator(v){
switch(v){
case 'is null': return '空白';
case 'is not null': return '非空白';
case "like '|%'": return '以...开头';
case "like '%|'": return '以...结尾';
case "like '%|%'": return '包含字符';
case "not like '%|%'": return '不包含字符';
default: return v;
}
}
function displayValue(v, params, record){
var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
var operator = record.get('operator');
if (operator=='is null'||operator=='is not null') return '';
switch(dataType){
case 'date': return v ? v.dateFormat('Y-m-d'): '';
case 'boolean': return (v?'是':'否');
case 'lookup': var data = findRecordValue(fieldsDef,'value',record.get('fieldname'),'data');
for (var i=0; i<data.length; i++)
if (v==data[i][0]) return data[i][1];
//return data[v] + ','+data[v,0]+','+data[0,0];
//return data[v,0]+','+data[0,0];
/*case 'string':
case 'int':
case 'float':*/
default: return v;
}
}
var qRowData = 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'}
]);
var colM=new Ext.grid.ColumnModel([
{
header:"关系",
dataIndex:"relation",
50,
renderer: function(v){return (v=='and'?'并且':'或者')},
editor:new Ext.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",
40,
editor:new Ext.form.ComboBox({
store: ['(','((','((','(((','(((('],
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false
})
},{
header:"字段名",
dataIndex:"fieldname",
130,
//renderer: function(v, params, record){return record.data['fieldname']},
renderer: function(v){return findRecordValue(fieldsDef,'value',v,'text');},
editor:new Ext.form.ComboBox({
store: fieldsDef,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false,
listeners:{change:fileListChange}
})
},{
header:"运算符",
80,
dataIndex:"operator",
renderer: displayOperator
},{
header:"内容",
dataIndex:"value",
130,
renderer: displayValue
},{
header:"括号",
40,
dataIndex:"rightParenthesis",
editor:new Ext.form.ComboBox({
store: [')','))',')))','))))'],
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
editable: false
})
}
]);