zoukankan      html  css  js  c++  java

  • 刚写的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>
  • 相关阅读:
    【NodeJS】---express配置ejs mongoose route等
    【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
    【CSS3】---:before :after生成内容
    px转rem的填坑之路
    markdown编写文件目录结构
    js reduce数组转对象
    处理Promise.reject()
    js事件循环
    为什么[] == false 为true
    为什么不建议用var
  • 原文地址：https://www.cnblogs.com/hannover/p/1846269.html
Copyright © 2011-2022 走看看