刚写的B/S高级查询界面（基于ExtJs框架）

这几天赶着做一个B/S系统，基于ExtJs框架，从中学了不少东西，今天写的高级查询界面感觉比较有意义，很多人应该也用得着，特拿出来共享一下。当然没正式完工，余下与服务器交互、Lookup列表、取生成查询条件一部分没有完成，做得有点腻了，先放出来，曾经做过的不妨交流一下。

界面：

查询界面

代码：

  1. <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html><head><title>XXXX系统V1.0</title>
  3. <meta name="Author" contect="彭国辉">
  4. <meta. name="Keywords" content="blog:http://blog.csdn.net/nhconch" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8">
  6. <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
  7. <link rel="stylesheet" type="text/css" href="resources/css/hndc.css">
  8. <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
  9. <script type="text/javascript" src="ext-all.js"></script>
  10. <script type="text/javascript" src="source/locale/ext-lang-zh_CN.js"></script>
  11. <script type="text/javascript">
  12. Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
  13. Ext.onReady(function () {
  15. var dsPQ=new Ext.data.JsonStore({
  16.    fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"] 
  17. });
  18. var fieldsDef = new Ext.data.JsonStore({
  19.     fields: ['value','text','type'],
  20.     data:[
  21.         {value:'A.Billno',text:'预约单号',type:'string'},
  22.         {value:'A.Date',text:'时间',type:'date'},
  23.         {value:'A.boolean',text:'布尔',type:'boolean'},
  24.         {value:'A.int',text:'整形',type:'int'},
  25.         {value:'A.float',text:'浮点',type:'float'},
  26.         {value:'A.lookup',text:'Lookup',type:'lookup',data:[[1,'list1'],[2,'list2'],[3,'list3']]}
  27.     ]
  28. });
  30. var numericOp = datetimeOp = new Ext.data.SimpleStore({
  31.     fields: ['value','text'],
  32.     data : [['=','='],['<>','<>'],['<','<'],['<=','<='],['<','>'],['>=','>='],['is null','空白'],['is not null','非空白']]
  33. });
  34. var stringOp = new Ext.data.SimpleStore({
  35.     fields: ['value','text'],
  36.     data : [['=','='],['<>','<>'],['<','<'],['<','>'],
  37.     ['like |%','以...开头'],['like %|','以...结尾'],['like %|%','包含字符'],['not like %|%','不包含字符'],
  38.     ['is null','空白'],['is not null','非空白']]
  39. });
  40. var lookupOp = booleanOp = new Ext.data.SimpleStore({
  41.     fields: ['value','text'],
  42.     data : [['=','='],['<>','<>'],['is null','空白'],['is not null','非空白']]
  43. });
  45. var objGridTextEditor = new Ext.grid.GridEditor(new Ext.form.TextField());
  46. //var objGridMemoEditor = new Ext.grid.GridEditor(new Ext.form.TextArea());
  47. var objGridDateEditor = new Ext.grid.GridEditor(new Ext.form.DateField({format:'Y-m-d'}));
  48. var objGridIntegerEditor = new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false,allowNegative:false,allowDecimals:false}));
  49. var objGridFloatEditor = new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false,allowNegative:false}));
  50. var objGridBooleanEditor = new Ext.grid.GridEditor(new Ext.form.ComboBox({
  51.     store: [[true,'是'],[false,'否']],
  52.     mode: 'local',
  53.     readOnly: true,
  54.     triggerAction: 'all',
  55.     allowBlank: false,
  56.     editable: false,
  57.     forceSelection: true,
  58.     blankText:'请选择...'
  59. }));
  60. var objGridLookupEditor = new Ext.grid.GridEditor(new Ext.form.ComboBox({
  61.     //store: [],
  62.     mode: 'local',
  63.     readOnly: true,
  64.     triggerAction: 'all',
  65.     allowBlank: false,
  66.     editable: false,
  67.     forceSelection: true,
  68.     blankText:'请选择...'
  69. }));
  71. function fileListChange(field,newValue,oldValue){
  72.     //alert(field);
  73. }
  74. function findRecordValue(store,prop, propValue,field){
  75.     var record;
  76.     if(store.getCount() > 0){
  77.         store.each(function(r){
  78.             if(r.data[prop] == propValue){
  79.                 rrecord = r;
  80.                 return false;
  81.             }
  82.         });
  83.     }
  84.     return record ? record.data[field] : '';
  85. }
  86. function displayOperator(v){
  87.     switch(v){
  88.         case 'is null': return '空白';
  89.         case 'is not null': return '非空白';
  90.         case 'like |%': return '以...开头';
  91.         case 'like %|': return '以...结尾';
  92.         case 'like %|%': return '包含字符';
  93.         case 'not like %|%': return '不包含字符';
  94.         default: return v;
  95.     }
  96. }
  97. function displayValue(v, params, record){
  98.     var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
  99.     var operator = record.get('operator');
  100.     if (operator=='is null'||operator=='is not null') return '';
  101.     switch(dataType){
  102.         case 'date': return v ? v.dateFormat('Y-m-d'): '';
  103.         case 'boolean': return (v?'是':'否');
  104.         default: return v;
  105.     }
  106. }
  108. var qRowData = Ext.data.Record.create([
  109.     {name:'idx',type:'int'},
  110.     {name:'relation',type:'string'},
  111.     {name:'leftParenthesis',type:'string'},
  112.     {name:'fieldname',type:'string'},
  113.     {name:'operator',type:'string'},
  114.     {name:'value',type:'string'},
  115.     {name:'rightParenthesis',type:'string'}
  116. ]);
  118. var dsPQ=new Ext.data.JsonStore({
  119.    data:[],
  120.    fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"] 
  121. });
  123. var colM=new Ext.grid.ColumnModel([
  124.     {
  125.         header:"关系",
  126.         dataIndex:"relation",
  127.         50,
  128.         renderer: function(v){return (v=='and'?'并且':'或者')},
  129.         editor:new Ext.form.ComboBox({ 
  130.             store: [['and','并且'],['or','或者']],
  131.             mode: 'local',
  132.             readOnly: true,
  133.             triggerAction: 'all',
  134.             allowBlank: false,
  135.             editable: false,
  136.             forceSelection: true,
  137.             blankText:'请选择'
  138.         })
  139.     },{
  140.         header:"括号",
  141.         dataIndex:"leftParenthesis",
  142.         40,
  143.         editor:new Ext.form.ComboBox({
  144.             store: ['(','((','((','(((','(((('],
  145.             mode: 'local',
  146.             triggerAction: 'all',
  147.             valueField: 'value',
  148.             displayField: 'text',
  149.             editable: false
  150.         })
  151.     },{
  152.         header:"字段名",
  153.         dataIndex:"fieldname",
  154.         130,
  155.         renderer: function(v){return findRecordValue(fieldsDef,'value',v,'text');},
  156.         editor:new Ext.form.ComboBox({
  157.             store: fieldsDef,
  158.             mode: 'local',
  159.             triggerAction: 'all',
  160.             valueField: 'value',
  161.             displayField: 'text',
  162.             editable: false,
  163.             listeners:{change:fileListChange}
  164.         })
  165.     },{
  166.         header:"运算符",
  167.         80,
  168.         dataIndex:"operator",
  169.         renderer: displayOperator
  170.     },{
  171.         header:"内容",
  172.         dataIndex:"value",
  173.         130,
  174.         renderer: displayValue
  175.     },{
  176.         header:"括号",
  177.         40,
  178.         dataIndex:"rightParenthesis",
  179.         editor:new Ext.form.ComboBox({
  180.             store: [')','))',')))','))))'],
  181.             mode: 'local',
  182.             triggerAction: 'all',
  183.             valueField: 'value',
  184.             displayField: 'text',
  185.             editable: false
  186.         })
  187.     }
  188. ]);
  190. var grdDPQuery = new Ext.grid.EditorGridPanel({
  191.     height:500,
  192.     490,
  193.     renderTo:"hello",   
  194.     cm:colM,
  195.     sm:new Ext.grid.RowSelectionModel({singleSelect.:false}),
  196.     store:dsPQ,
  197.     region:'center',
  198.     border: false,
  199.     enableColumnMove: false,
  200.     enableHdMenu: false,
  201.     loadMask: {msg:'加载数据...'},
  202.     clicksToEdit:1,
  203.     tbar:[
  204.         {text:'添加',handler:function(){
  205.                 var count = dsPQ.getCount();
  206.                 var r = new qRowData({idx:dsPQ.getCount(),relation:'and',leftParenthesis:'',fieldname:'',operator:'=',value:'',rightParenthesis:''});
  207.                 dsPQ.commitChanges();
  208.                 dsPQ.insert(count,r);
  209.             }
  210.         },
  211.         {text:'删除',handler:function(){
  212.                 //store = grid.getStore();
  213.                 var selections = grdDPQuery.getSelectionModel().getSelections();
  214.                 for(var i = 0; i < selections.length; i++){ 
  215.                     dsPQ.remove(selections[i]); 
  216.                 }
  217.             }
  218.         },
  219.         {text:'全部清除',handler:function(){dsPQ.removeAll();}}
  220.     ],
  221.     listeners: {
  222.         afteredit: function(e){
  223.             if (e.column==2/*e.field=='fieldname'*/){
  224.                 var oldDataType = findRecordValue(fieldsDef,'value',e.originalValue,'type');
  225.                 var newDataType = findRecordValue(fieldsDef,'value',e.value,'type');
  226.                 if (oldDataType!=newDataType){
  227.                     e.record.set('operator', '=');
  228.                     e.record.set('value', '');
  229.                 }
  230.             }
  231.         },
  232.         cellclick: function(grid, rowIndex, columnIndex, e){
  233.             if (columnIndex!=3&&columnIndex!=4) return;
  234.             var record = grid.getStore().getAt(rowIndex);  // Get the Record
  235.             //var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
  236.             //var data = record.get(fieldName);
  237.             var dataType = findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
  238.             if (dataType=='') return;//未选定字段，退出
  239.             if (columnIndex==3){//绑定运算符
  240.                 var grdEditor = grid.colModel.getCellEditor(columnIndex,rowIndex);
  241.                 if (grdEditor) grdEditor.destroy();
  242.                 var _store;
  243.                 switch(dataType){
  244.                     case 'string': _store = stringOp; break;
  245.                     case 'date': _store = datetimeOp; break;
  246.                     case 'boolean': _store = booleanOp; break;
  247.                     case 'int':
  248.                     case 'float': _store = numericOp; break;
  249.                     case 'lookup': _store = lookupOp; break;
  250.                 }
  251.                 grdEditor = new Ext.form.ComboBox({
  252.                     store: _store,
  253.                     mode: 'local',
  254.                     triggerAction: 'all',
  255.                     valueField: 'value',
  256.                     displayField: 'text',
  257.                     editable: false
  258.                 })
  259.                 grid.colModel.setEditor(columnIndex, new Ext.grid.GridEditor(grdEditor));
  260.             }
  261.             else if (columnIndex==4){//绑定编辑器
  262.                 var operator = record.get('operator');
  263.                 if (operator=='is null'||operator=='is not null'){
  264.                     grid.colModel.setEditor(columnIndex, null);
  265.                     return;
  266.                 }
  267.                 var grdEditor;
  268.                 switch(dataType){
  269.                     case 'string': grdEditor = objGridTextEditor; break;
  270.                     case 'date': grdEditor = objGridDateEditor; break;
  271.                     case 'boolean': grdEditor = objGridBooleanEditor; break;
  272.                     case 'int': grdEditor = objGridIntegerEditor; break;
  273.                     case 'float': grdEditor = objGridFloatEditor; break;
  274.                     case 'lookup': grdEditor = objGridLookupEditor; break;
  275.                 }
  276.                 if (grid.colModel.getCellEditor(columnIndex,rowIndex)!=grdEditor){
  277.                     grid.colModel.setEditor(columnIndex, grdEditor);
  278.                 }
  279.             }
  280.         }
  281.     }
  282. });
  284. });
  285. </script>
  286. </head><div id="hello"></div><body>
  287. </body></html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hannover/p/1846269.html