位置：首页>> 网络编程>> JavaScript>> 基于ExtJs框架的B/S高级查询界面

基于ExtJs框架的B/S高级查询界面

作者：nhconch　来源：编程手札　发布时间：2008-10-07 18:05:00　

标签：查询,界面,ExtJs,框架

把昨天做的高级查询界面完善了一下，支持动态添加多个查询条件、定义逻辑关系，支持整形、浮点、字符串、日期、布尔值、自定义选择列表的录入，通过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", width: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", width:40, editor:new Ext.form.ComboBox({ store: ['(','((','((','(((','(((('], mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', editable: false }) },{ header:"字段名", dataIndex:"fieldname", width: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:"运算符", width:80, dataIndex:"operator", renderer: displayOperator },{ header:"内容", dataIndex:"value", width:130, renderer: displayValue },{ header:"括号", width:40, dataIndex:"rightParenthesis", editor:new Ext.form.ComboBox({ store: [')','))',')))','))))'], mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', editable: false }) } ]); var grdDPQuery = new Ext.grid.EditorGridPanel({ height:500, width:490, renderTo:"hello", cm:colM, sm:new Ext.grid.RowSelectionModel({singleSelect:false}), store:dsPQ, region:'center', border: false, enableColumnMove: false, enableHdMenu: false, loadMask: {msg:'加载数据...'}, clicksToEdit:1, tbar:[ {text:'添加',handler:function(){ var count = dsPQ.getCount(); var r = new qRowData({idx:dsPQ.getCount(),relation:'and',leftParenthesis:'',fieldname:'',operator:'=',value:'',rightParenthesis:''}); dsPQ.commitChanges(); dsPQ.insert(count,r); } }, {text:'删除',handler:function(){ //store = grid.getStore(); var selections = grdDPQuery.getSelectionModel().getSelections(); for(var i = 0; i < selections.length; i++){ dsPQ.remove(selections[i]); } } }, {text:'全部清除',handler:function(){dsPQ.removeAll();}}, {text:'检查',handler:function(){if(checkFilter(grdDPQuery)) alert('检查通过！');}}, {text:'显示内容',handler:function(){var pv = document.getElementById('preview'); pv.value=getFilter(grdDPQuery)}}, {text:'显示文本',handler:function(){var pv = document.getElementById('preview'); pv.value=getFilterText(grdDPQuery)}} ], listeners: { afteredit: function(e){ if (e.column==2/*e.field=='fieldname'*/){ var oldDataType = findRecordValue(fieldsDef,'value',e.originalValue,'type'); var newDataType = findRecordValue(fieldsDef,'value',e.value,'type'); if (oldDataType!=newDataType){ e.record.set('operator', '='); e.record.set('value', ''); } //e.grid.colModel.setEditor(1, new Ext.grid.GridEditor(new Ext.form.DateField({format:'Y年m月d日'}))); } }, cellclick: function(grid, rowIndex, columnIndex, e){ if (columnIndex!=3&&columnIndex!=4) return; var record = grid.getStore().getAt(rowIndex); // Get the Record var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type'); if (dataType=='') return;//未选定字段，退出 if (columnIndex==3){//绑定运算符 var grdEditor = 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 = new Ext.form.ComboBox({ store: _store, mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', editable: false }) grid.colModel.setEditor(columnIndex, new Ext.grid.GridEditor(grdEditor)); } else if (columnIndex==4){//绑定编辑器 var operator = record.get('operator'); if (operator=='is null'||operator=='is not null'){ grid.colModel.setEditor(columnIndex, null); return; } var grdEditor; 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 = new Ext.grid.GridEditor(new Ext.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); } } } } }); function checkFilter(grid){ var n = grid.store.getCount(); var leftPLen = 0; var rightPLen = 0; for (var i=0; i<n; i++){ var record = grid.store.getAt(i); if (record.get('fieldname')==''){ grid.getSelectionModel().selectRow(i); Ext.Msg.alert("错误", "请选择查询字段。"); return false; } leftPLen += record.get('leftParenthesis').length; rightPLen += record.get('rightParenthesis').length; switch(record.get('operator')){ case "like '|％'": case "like '％|'": case "like '％|％'": case "not like '％|％'": if (record.get('value')==''){ grid.getSelectionModel().selectRow(i); Ext.Msg.alert("错误", "请输入内容。"); return false; } case '=': case '<>': case '<': case '>': case '<=': case '>=': var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type'); if ((dataType=='lookup'||dataType=='date')&&record.get('value')==''){ grid.getSelectionModel().selectRow(i); Ext.Msg.alert("错误", "请输入内容。"); return false; } } } if (leftPLen!=rightPLen){ Ext.Msg.alert("错误", "左括号与右括号数量不匹配，请检查。"); return false; } return true; } function getFilter(grid){ if (!checkFilter(grid)) return ""; var s = []; var n = grid.store.getCount(); for (var i=0; i<n; i++){ var record = grid.store.getAt(i); if (i>0) s.push(record.get('relation')); s.push(record.get('leftParenthesis')); s.push(record.get('fieldname')); var operator = record.get('operator'); switch(operator){ case "like '|％'": case "like '％|'": case "like '％|％'": case "not like '％|％'": s.push(operator.replace(/\|/g, record.get('value').replace(/\'/g,"''").replace(/\％/g,"!％")));//for sql server break; case "is null": case "is not null": s.push(operator); break; default: s.push(operator); var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type'); switch(dataType){ case 'lookup': var d = findRecordValue(fieldsDef,'value',record.get('fieldname'),'data'); if (typeof d[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");//for sql server break; default: s.push(record.get('value')); break; } break; } s.push(record.get('rightParenthesis')); } return s.join(' '); } function getFilterText(grid){ if (!checkFilter(grid)) return ""; var s = []; var n = grid.store.getCount(); for (var i=0; i<n; i++){ var record = 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')); var operator = 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 "not like '％|％'": s.push("不包含字符"); s.push('"' + record.get('value') + '"'); break; case "is null": s.push("等于空白"); break; case "is not null": s.push("等于非空白"); break; default: s.push(operator); var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type'); switch(dataType){ case 'lookup': var d = findRecordValue(fieldsDef,'value',record.get('fieldname'),'data'); for (var j=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')); } return s.join(' '); } }); </script> </head><body><div id="hello"></div> <textarea id=preview rows=5 cols=70></textarea> </body></html>

以后会考虑再封装成类。

投稿

基于ExtJs框架的B/S高级查询界面

猜你喜欢