您的位置: 首页  >  文章  >  基于ExtJs框架的B/S高级查询界面

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

分类: 文章 • 2023-03-09 23:46:28

把昨天做的高级查询界面完善了一下，支持动态添加多个查询条件、定义逻辑关系，支持整形、浮点、字符串、日期、布尔值、自定义选择列表的录入，通过Ext.data.JsonStore可方便的与服务器交互，具体不多说了，看下面示例，曾经做过的朋友不妨交流一下。

样图：

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

示例：

  1. <DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html><head><title>XXX系统V1.0</title>
  3. <metaname="Author"contect="彭国辉">
  4. <metaname="Keywords"content="高级查询界面"/>
  5. <metaname="Description"content="http://blog.****.net/nhconch"/>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=utf8">
  7. <linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css">
  8. <scripttype="text/javascript"src="adapter/ext/ext-base.js"></script>
  9. <scripttype="text/javascript"src="ext-all.js"></script>
  10. <scripttype="text/javascript"src="source/locale/ext-lang-zh_CN.js"></script>
  11. <scripttype="text/javascript">
  12. Ext.BLANK_IMAGE_URL='resources/images/default/s.gif';
  13. Ext.onReady(function(){
  15. vardsPQ=newExt.data.JsonStore({
  16. data:[],
  17. fields:["idx","relation","leftParenthesis","fieldname","operator","value","rightParenthesis"]
  18. });
  19. varfieldsDef=newExt.data.JsonStore({
  20. fields:['value','text','type','data'],
  21. data:[
  22. {value:'A.Billno',text:'字符串',type:'string'},
  23. {value:'A.Date',text:'日期',type:'date'},
  24. {value:'A.boolean',text:'布尔',type:'boolean'},
  25. {value:'A.int',text:'整形',type:'int'},
  26. {value:'A.float',text:'浮点',type:'float'},
  27. {value:'A.lookup',text:'Lookup',type:'lookup',data:[['AA','list1'],['BB','list2'],['CC','list3']]},
  28. {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']]}
  29. ]
  30. });
  32. /*
  33. 作者:彭国辉2008-8-30
  34. 网站:http://kacarton.yeah.net/
  35. 博客:http://blog.****.net/nhconch
  36. 邮箱:kacarton(a)sohu.com
  37. 文章为作者原创，转载前请先与本人联系，转载请注明文章出处、保留作者信息，谢谢支持！
  38. */
  39. varnumericOp=datetimeOp=newExt.data.SimpleStore({
  40. fields:['value','text'],
  41. data:[['=','='],['<>','<>'],['<','<'],['<=','<='],['<','>'],['>=','>='],['isnull','空白'],['isnotnull','非空白']]
  42. });
  43. varstringOp=newExt.data.SimpleStore({
  44. fields:['value','text'],
  45. data:[['=','='],['<>','<>'],['<','<'],['<','>'],
  46. ["like'|%'",'以...开头'],["like'%|'",'以...结尾'],["like'%|%'",'包含字符'],["notlike'%|%'",'不包含字符'],
  47. ['isnull','空白'],['isnotnull','非空白']]
  48. });
  49. varlookupOp=booleanOp=newExt.data.SimpleStore({
  50. fields:['value','text'],
  51. data:[['=','='],['<>','<>'],['isnull','空白'],['isnotnull','非空白']]
  52. });
  54. varobjGridTextEditor=newExt.grid.GridEditor(newExt.form.TextField());
  55. //varobjGridMemoEditor=newExt.grid.GridEditor(newExt.form.TextArea());
  56. varobjGridDateEditor=newExt.grid.GridEditor(newExt.form.DateField({format:'Y-m-d'}));
  57. varobjGridIntegerEditor=newExt.grid.GridEditor(newExt.form.NumberField({allowBlank:false,allowNegative:false,allowDecimals:false}));
  58. varobjGridFloatEditor=newExt.grid.GridEditor(newExt.form.NumberField({allowBlank:false,allowNegative:false}));
  59. varobjGridBooleanEditor=newExt.grid.GridEditor(newExt.form.ComboBox({
  60. store:[[true,'是'],[false,'否']],
  61. mode:'local',
  62. readOnly:true,
  63. triggerAction:'all',
  64. allowBlank:false,
  65. editable:false,
  66. forceSelection:true,
  67. blankText:'请选择...'
  68. }));
  69. varobjGridLookupEditor;
  71. functionfileListChange(field,newValue,oldValue){
  72. //alert(field);
  73. }
  74. functionfindRecordValue(store,prop,propValue,field){
  75. varrecord;
  76. if(store.getCount()>0){
  77. store.each(function(r){
  78. if(r.data[prop]==propValue){
  79. rrecord=r;
  80. returnfalse;
  81. }
  82. });
  83. }
  84. returnrecord?record.data[field]:'';
  85. }
  86. functiondisplayOperator(v){
  87. switch(v){
  88. case'isnull':return'空白';
  89. case'isnotnull':return'非空白';
  90. case"like'|%'":return'以...开头';
  91. case"like'%|'":return'以...结尾';
  92. case"like'%|%'":return'包含字符';
  93. case"notlike'%|%'":return'不包含字符';
  94. default:returnv;
  95. }
  96. }
  97. functiondisplayValue(v,params,record){
  98. vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
  99. varoperator=record.get('operator');
  100. if(operator=='isnull'||operator=='isnotnull')return'';
  101. switch(dataType){
  102. case'date':returnv?v.dateFormat('Y-m-d'):'';
  103. case'boolean':return(v?'是':'否');
  104. case'lookup':vardata=findRecordValue(fieldsDef,'value',record.get('fieldname'),'data');
  105. for(vari=0;i<data.length;i++)
  106. if(v==data[i][0])returndata[i][1];
  107. //returndata[v]+','+data[v,0]+','+data[0,0];
  108. //returndata[v,0]+','+data[0,0];
  109. /*case'string':
  110. case'int':
  111. case'float':*/
  112. default:returnv;
  113. }
  114. }
  116. varqRowData=Ext.data.Record.create([
  117. {name:'idx',type:'int'},
  118. {name:'relation',type:'string'},
  119. {name:'leftParenthesis',type:'string'},
  120. {name:'fieldname',type:'string'},
  121. {name:'operator',type:'string'},
  122. {name:'value',type:'string'},
  123. {name:'rightParenthesis',type:'string'}
  124. ]);
  126. varcolM=newExt.grid.ColumnModel([
  127. {
  128. header:"关系",
  129. dataIndex:"relation",
  130. width:50,
  131. renderer:function(v){return(v=='and'?'并且':'或者')},
  132. editor:newExt.form.ComboBox({
  133. store:[['and','并且'],['or','或者']],
  134. mode:'local',
  135. readOnly:true,
  136. triggerAction:'all',
  137. allowBlank:false,
  138. //valueField:'value',
  139. //displayField:'text',
  140. editable:false,
  141. forceSelection:true,
  142. blankText:'请选择'
  143. })
  144. },{
  145. header:"括号",
  146. dataIndex:"leftParenthesis",
  147. width:40,
  148. editor:newExt.form.ComboBox({
  149. store:['(','((','((','(((','(((('],
  150. mode:'local',
  151. triggerAction:'all',
  152. valueField:'value',
  153. displayField:'text',
  154. editable:false
  155. })
  156. },{
  157. header:"字段名",
  158. dataIndex:"fieldname",
  159. width:130,
  160. //renderer:function(v,params,record){returnrecord.data['fieldname']},
  161. renderer:function(v){returnfindRecordValue(fieldsDef,'value',v,'text');},
  162. editor:newExt.form.ComboBox({
  163. store:fieldsDef,
  164. mode:'local',
  165. triggerAction:'all',
  166. valueField:'value',
  167. displayField:'text',
  168. editable:false,
  169. listeners:{change:fileListChange}
  170. })
  171. },{
  172. header:"运算符",
  173. width:80,
  174. dataIndex:"operator",
  175. renderer:displayOperator
  176. },{
  177. header:"内容",
  178. dataIndex:"value",
  179. width:130,
  180. renderer:displayValue
  181. },{
  182. header:"括号",
  183. width:40,
  184. dataIndex:"rightParenthesis",
  185. editor:newExt.form.ComboBox({
  186. store:[')','))',')))','))))'],
  187. mode:'local',
  188. triggerAction:'all',
  189. valueField:'value',
  190. displayField:'text',
  191. editable:false
  192. })
  193. }
  194. ]);
  196. vargrdDPQuery=newExt.grid.EditorGridPanel({
  197. height:500,
  198. width:490,
  199. renderTo:"hello",
  200. cm:colM,
  201. sm:newExt.grid.RowSelectionModel({singleSelect:false}),
  202. store:dsPQ,
  203. region:'center',
  204. border:false,
  205. enableColumnMove:false,
  206. enableHdMenu:false,
  207. loadMask:{msg:'加载数据...'},
  208. clicksToEdit:1,
  209. tbar:[
  210. {text:'添加',handler:function(){
  211. varcount=dsPQ.getCount();
  212. varr=newqRowData({idx:dsPQ.getCount(),relation:'and',leftParenthesis:'',fieldname:'',operator:'=',value:'',rightParenthesis:''});
  213. dsPQ.commitChanges();
  214. dsPQ.insert(count,r);
  215. }
  216. },
  217. {text:'删除',handler:function(){
  218. //store=grid.getStore();
  219. varselections=grdDPQuery.getSelectionModel().getSelections();
  220. for(vari=0;i<selections.length;i++){
  221. dsPQ.remove(selections[i]);
  222. }
  223. }
  224. },
  225. {text:'全部清除',handler:function(){dsPQ.removeAll();}},
  226. {text:'检查',handler:function(){if(checkFilter(grdDPQuery))alert('检查通过！');}},
  227. {text:'显示内容',handler:function(){varpv=document.getElementById('preview');pv.value=getFilter(grdDPQuery)}},
  228. {text:'显示文本',handler:function(){varpv=document.getElementById('preview');pv.value=getFilterText(grdDPQuery)}}
  229. ],
  230. listeners:{
  231. afteredit:function(e){
  232. if(e.column==2/*e.field=='fieldname'*/){
  233. varoldDataType=findRecordValue(fieldsDef,'value',e.originalValue,'type');
  234. varnewDataType=findRecordValue(fieldsDef,'value',e.value,'type');
  235. if(oldDataType!=newDataType){
  236. e.record.set('operator','=');
  237. e.record.set('value','');
  238. }
  239. //e.grid.colModel.setEditor(1,newExt.grid.GridEditor(newExt.form.DateField({format:'Y年m月d日'})));
  240. }
  241. },
  242. cellclick:function(grid,rowIndex,columnIndex,e){
  243. if(columnIndex!=3&&columnIndex!=4)return;
  244. varrecord=grid.getStore().getAt(rowIndex);//GettheRecord
  245. vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
  246. if(dataType=='')return;//未选定字段，退出
  247. if(columnIndex==3){//绑定运算符
  248. vargrdEditor=grid.colModel.getCellEditor(columnIndex,rowIndex);
  249. if(grdEditor)grdEditor.destroy();
  250. var_store;
  251. switch(dataType){
  252. case'string':_store=stringOp;break;
  253. case'date':_store=datetimeOp;break;
  254. case'boolean':_store=booleanOp;break;
  255. case'int':
  256. case'float':_store=numericOp;break;
  257. case'lookup':_store=lookupOp;break;
  258. }
  259. grdEditor=newExt.form.ComboBox({
  260. store:_store,
  261. mode:'local',
  262. triggerAction:'all',
  263. valueField:'value',
  264. displayField:'text',
  265. editable:false
  266. })
  267. grid.colModel.setEditor(columnIndex,newExt.grid.GridEditor(grdEditor));
  268. }
  269. elseif(columnIndex==4){//绑定编辑器
  270. varoperator=record.get('operator');
  271. if(operator=='isnull'||operator=='isnotnull'){
  272. grid.colModel.setEditor(columnIndex,null);
  273. return;
  274. }
  275. vargrdEditor;
  276. switch(dataType){
  277. case'string':grdEditor=objGridTextEditor;break;
  278. case'date':grdEditor=objGridDateEditor;break;
  279. case'boolean':grdEditor=objGridBooleanEditor;break;
  280. case'int':grdEditor=objGridIntegerEditor;break;
  281. case'float':grdEditor=objGridFloatEditor;break;
  282. case'lookup':
  283. if(objGridLookupEditor)objGridLookupEditor.destroy();
  284. objGridLookupEditor=newExt.grid.GridEditor(newExt.form.ComboBox({
  285. store:findRecordValue(fieldsDef,'value',record.get('fieldname'),'data'),
  286. mode:'local',
  287. readOnly:true,
  288. triggerAction:'all',
  289. allowBlank:false,
  290. editable:false,
  291. forceSelection:true,
  292. blankText:'请选择...'
  293. }));
  294. grdEditor=objGridLookupEditor;
  295. break;
  296. }
  297. if(grid.colModel.getCellEditor(columnIndex,rowIndex)!=grdEditor){
  298. grid.colModel.setEditor(columnIndex,grdEditor);
  299. }
  300. }
  301. }
  302. }
  303. });
  305. functioncheckFilter(grid){
  306. varn=grid.store.getCount();
  307. varleftPLen=0;
  308. varrightPLen=0;
  309. for(vari=0;i<n;i++){
  310. varrecord=grid.store.getAt(i);
  311. if(record.get('fieldname')==''){
  312. grid.getSelectionModel().selectRow(i);
  313. Ext.Msg.alert("错误","请选择查询字段。");
  314. returnfalse;
  315. }
  316. leftPLen+=record.get('leftParenthesis').length;
  317. rightPLen+=record.get('rightParenthesis').length;
  318. switch(record.get('operator')){
  319. case"like'|%'":
  320. case"like'%|'":
  321. case"like'%|%'":
  322. case"notlike'%|%'":
  323. if(record.get('value')==''){
  324. grid.getSelectionModel().selectRow(i);
  325. Ext.Msg.alert("错误","请输入内容。");
  326. returnfalse;
  327. }
  328. case'=':
  329. case'<>':
  330. case'<':
  331. case'>':
  332. case'<=':
  333. case'>=':
  334. vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
  335. if((dataType=='lookup'||dataType=='date')&&record.get('value')==''){
  336. grid.getSelectionModel().selectRow(i);
  337. Ext.Msg.alert("错误","请输入内容。");
  338. returnfalse;
  339. }
  340. }
  341. }
  342. if(leftPLen!=rightPLen){
  343. Ext.Msg.alert("错误","左括号与右括号数量不匹配，请检查。");
  344. returnfalse;
  345. }
  346. returntrue;
  347. }
  348. functiongetFilter(grid){
  349. if(!checkFilter(grid))return"";
  350. vars=[];
  351. varn=grid.store.getCount();
  352. for(vari=0;i<n;i++){
  353. varrecord=grid.store.getAt(i);
  354. if(i>0)s.push(record.get('relation'));
  355. s.push(record.get('leftParenthesis'));
  356. s.push(record.get('fieldname'));
  357. varoperator=record.get('operator');
  358. switch(operator){
  359. case"like'|%'":
  360. case"like'%|'":
  361. case"like'%|%'":
  362. case"notlike'%|%'":
  363. s.push(operator.replace(/\|/g,record.get('value').replace(/\'/g,"''").replace(/\%/g,"!%")));//forsqlserver
  364. break;
  365. case"isnull":
  366. case"isnotnull":
  367. s.push(operator);
  368. break;
  369. default:
  370. s.push(operator);
  371. vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
  372. switch(dataType){
  373. case'lookup':
  374. vard=findRecordValue(fieldsDef,'value',record.get('fieldname'),'data');
  375. if(typeofd[0][0]!='string'){
  376. s.push(record.get('value'));
  377. break;
  378. }
  379. case'string':
  380. s.push("'"+record.get('value').replace(/\'/g,"''")+"'");
  381. break;
  382. case'date':
  383. s.push("'"+record.get('value').dateFormat('Y-m-d')+"'");
  384. break;
  385. case'boolean':
  386. s.push(record.get('value')?"1":"0");//forsqlserver
  387. break;
  388. default:
  389. s.push(record.get('value'));
  390. break;
  391. }
  392. break;
  393. }
  394. s.push(record.get('rightParenthesis'));
  395. }
  396. returns.join('');
  397. }
  398. functiongetFilterText(grid){
  399. if(!checkFilter(grid))return"";
  400. vars=[];
  401. varn=grid.store.getCount();
  402. for(vari=0;i<n;i++){
  403. varrecord=grid.store.getAt(i);
  404. if(i>0)s.push(record.get('relation')=='and'?'并且':'或者');
  405. s.push(record.get('leftParenthesis'));
  406. s.push(findRecordValue(fieldsDef,'value',record.get('fieldname'),'text'));
  407. varoperator=record.get('operator');
  408. switch(operator){
  409. case"like'|%'":
  410. s.push("以");
  411. s.push('"'+record.get('value')+'"');
  412. s.push("开头");
  413. break;
  414. case"like'%|'":
  415. s.push("以");
  416. s.push('"'+record.get('value')+'"');
  417. s.push("结尾");
  418. break;
  419. case"like'%|%'":
  420. s.push("包含字符");
  421. s.push('"'+record.get('value')+'"');
  422. break;
  423. case"notlike'%|%'":
  424. s.push("不包含字符");
  425. s.push('"'+record.get('value')+'"');
  426. break;
  427. case"isnull":
  428. s.push("等于空白");
  429. break;
  430. case"isnotnull":
  431. s.push("等于非空白");
  432. break;
  433. default:
  434. s.push(operator);
  435. vardataType=findRecordValue(fieldsDef,'value',record.get('fieldname'),'type');
  436. switch(dataType){
  437. case'lookup':
  438. vard=findRecordValue(fieldsDef,'value',record.get('fieldname'),'data');
  439. for(varj=0;j<d.length;j++)
  440. if(record.get('value')==d[j][0]){
  441. s.push('"'+d[j][1]+'"');
  442. break;
  443. }
  444. break;
  445. case'string':
  446. s.push('"'+record.get('value')+'"');
  447. break;
  448. case'date':
  449. s.push(record.get('value').dateFormat('Y-m-d'));
  450. break;
  451. case'boolean':
  452. s.push(record.get('value')?"是":"否");
  453. break;
  454. default:
  455. s.push(record.get('value'));
  456. break;
  457. }
  458. break;
  459. }
  460. s.push(record.get('rightParenthesis'));
  461. }
  462. returns.join('');
  463. }
  465. });
  466. </script>
  467. </head><body><divid="hello"></div>
  468. <textareaid=previewrows=5cols=70></textarea>
  469. </body></html>
以后会考虑再封装成类。
<!-- google_ad_client = "pub-5395599807454886"; /* 468x15文字连接广告, 创建于 08-11-21 */ google_ad_slot = "5196248270"; google_ad_width = 468; google_ad_height = 15; //-->

相关推荐