extjs实现选择多表自定义查询功能 前台部分(ext源码)


Posted in Javascript onDecember 20, 2011

主要使用的技术:
1、extjs2.0,整体框架
2、RemoteCheckboxGroup.js ,用于动态生成表字段(供查询结果使用)
3、Ext.ux.grid.RowActions.js,用于grid行扩展(上移下移删除等)
4、Datetime.js,用于时间选择
5、MetaGrid.js 用于动态生成查询结果列表(返回结果Grid)
6、ehcache 用于缓存自定表数据,比如表名称、字段描述、长度等固定信息
7、jxl.jar 用于查询结果输出,最后生成Excel文件
8、Java
extjs实现选择多表自定义查询功能 前台部分(ext源码)

EditGridPanel主要代码如下:

{header:'括号',dataIndex:'leftbrackets',width:40,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: leftBracketsComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true 
// lazyInit:false, 
// listeners: { 
// 'focus' : 
// function(){ 
// this.expand(); 
// } 
// } 
})), 
renderer: function(value, cellmeta, record){ 
if(value == null || value == ""){ 
return ""; 
} 
return leftBracketsComboData[value][1]; 
},scope:this} 
,{header:'表名称',dataIndex:'tablename',width:80,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: baseTableData 
}), 
id:'baseTableNameID', 
tpl: '<tpl for="."><div ext:qtip="{text}" class="x-combo-list-item">{text}</div></tpl>', 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
lazyInit:false, 
listeners: { 
'expand':function(combo){ 
combo.clearValue(); 
combo.store.loadData(baseTableData); 
} 
,'select':function(){ } 
,'focus' :function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return; 
} 
return record.get("tablenamestring"); 
}} 
,{header:'查询条件列',dataIndex:'fieldname',width:90,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
id:'fieldnameID' 
,store : new Ext.data.Store({ 
proxy : new Ext.data.HttpProxy({url : '../SearchTableColumns/extlistKV.do'}) 
,reader : new Ext.data.JsonReader({}, ['name','chinese']) 
,baseParams:{s_tablename:'0'} 
}) 
,tpl: '<tpl for="."><div ext:qtip="{chinese}" class="x-combo-list-item">{chinese}</div></tpl>' 
,valueField :'name' 
,displayField :'chinese' 
,mode : 'remote' 
,forceSelection : true 
,triggerAction : 'all' 
,typeAhead : false 
,selectOnFocus : true 
,resizable:true 
,width : 120 
,lazyInit:false 
,listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
} 
)), 
renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return ""; 
} 
return record.get("fieldnamestring"); 
}} 
,{header:'逻辑运算符',dataIndex:'relationsign',width:70,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: relationSignComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true, 
lazyInit:false, 
listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return; 
} 
return relationSignComboData[value][1]; 
},scope:this} 
,{header:'查询条件值',dataIndex:'expressvalue',width:125,editor:new Ext.grid.GridEditor(new Ext.form.TextField({ })) 
, renderer: function(value, cellmeta, record, row, col, store){ 
if(value == null || value == ""){ 
return ""; 
} 
return record.get("expressvaluestring"); 
} 
} 
,{header:'括号',dataIndex:'rightbrackets',width:40,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: rightBracketsComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true, 
lazyInit:false, 
listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record){ 
if(value == null || value == ""){ 
return ""; 
} 
return rightBracketsComboData[value][1]; 
},scope:this} 
,{header:'关系运算符',dataIndex:'operatorsign',width:70,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ 
store: new Ext.data.SimpleStore({ 
fields:['value','text'], 
data: operatorSignComboData 
}), 
mode: 'local', 
triggerAction: 'all', 
editable:false, 
valueField: 'value', 
displayField: 'text', 
readOnly:true, 
lazyInit:false, 
listeners: { 
'focus' : 
function(){ 
this.expand(); 
} 
} 
})), 
renderer: function(value, cellmeta, record){ 
if(value == null || value == ""){ 
return ; 
} 
return operatorSignComboData[value][1]; 
},scope:this} 
,this.rowActions 
]);

extjs实现选择多表自定义查询功能 前台部分(ext源码)
Ext.namespace('com.awd'); 
Ext.namespace('com.awd.advancedSearch'); 
com.awd.advancedSearch.tableGroup = Ext.extend(Ext.form.FormPanel, { 
initComponent : function() { 
Ext.apply(this, { 
border : true, 
buttonAlign:'right', 
bodyStyle : 'padding:5px;overflow-y:scroll;border-left:1px solid #8DB2E3' 
}); 
com.awd.advancedSearch.tableGroup.superclass.initComponent.apply(this,arguments); 
} 
,loadTableField:function(selectedTableColumns){ 
Ext.Ajax.request({ 
url : '../AdvancedSearch/getDisplayTables.do', 
method:'post', 
params:{tableNames:baseTableData.toString()}, 
success : function(request) { 
var tables = Ext.decode(request.responseText); 
var myfieldset = null; 
if (this.items.length == 0) { 
for (var i = 0; i < tables.length; i++) { 
myfieldset = new Ext.form.FieldSet({ 
title : tables[i].tableString 
,collapsible : true 
,autoHeight : true 
,layout : 'column' 
,items : [ 
{xtype : 'remotecheckboxgroup', 
columns : 5, 
url : '../SearchTableColumns/extListAsFieldDisplay.do', 
baseParams : { 
dir : 'ASC', 
limit : '150', 
s_tablename : tables[i].tableName, 
selectedTableColumns:selectedTableColumns 
}, 
reader : new Ext.data.JsonReader({ 
totalProperty : 'totalProperty', 
root : 'list', 
fields : [{name : 'fieldId'},{name : 'fieldName'},{name : 'fieldLabel'},{name : 'fieldValue'},{name : 'fieldChecked'}] 
}), 
fieldId : 'fieldId', 
fieldName : 'fieldName', 
fieldLabel : 'fieldLabel', 
fieldValue : 'fieldValue', 
fieldChecked : 'fieldChecked' 
}] 
}); 
this.items.add(myfieldset); 
} 
}else{ 
for (var j = 0; j < tables.length; j++) { 
this.remove(0); 
} 
for (var i = 0; i < tables.length; i++) { 
myfieldset = new Ext.form.FieldSet({ 
title : tables[i].tableString 
,collapsible : true 
,autoHeight : true 
,layout : 'column' 
,items : [ 
{xtype : 'remotecheckboxgroup', 
columns : 5, 
url : '../SearchTableColumns/extListAsFieldDisplay.do', 
baseParams : { 
dir : 'ASC', 
limit : '150', 
s_tablename : tables[i].tableName, 
selectedTableColumns:selectedTableColumns 
}, 
reader : new Ext.data.JsonReader({ 
totalProperty : 'totalProperty', 
root : 'list', 
fields : [{name : 'fieldId'},{name : 'fieldName'},{name : 'fieldLabel'},{name : 'fieldValue'},{name : 'fieldChecked'}] 
}), 
fieldId : 'fieldId', 
fieldName : 'fieldName', 
fieldLabel : 'fieldLabel', 
fieldValue : 'fieldValue', 
fieldChecked : 'fieldChecked' 
}] 
}); 
this.items.add(myfieldset); 
} 
} 
this.doLayout(true); 
} 
,scope : this 
,failure : function() { 
alert('加载错误,请确认网络连接正常!'); 
} 
}); 
} 
});

extjs实现选择多表自定义查询功能 前台部分(ext源码)
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Ext.apply(Ext, { 
isFirebug: (window.console && window.console.firebug) 
}); 
Ext.ns('app'); 
app.getMetaGrid = function(config){ 
return new Ext.ux.grid.MetaGrid(Ext.apply({ 
baseParams: null, 
/** 
* @cfg {String} url Specify the url to the data object (server side 
* script) from which to load data through the HttpProxy. 
*/ 
url: '../AdvancedSearch/extSearchResultList.do?ssid='+globalQueryString("ssid"), 
// url: 'meta-data.js', 
renderChange: function(val){ 
if (val > 0) { 
return '<span style="color:green;">' + val + '</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '</span>'; 
} 
return val; 
}, 
renderCombo: function(val, metadata, record, rowIndex, colIndex, store){ 
var data; 
/* 
// the field name: 
//var field = record.fields.items[colIndex].name; // unreliable since colIndex may be wrong 
var field = this.colModel.getDataIndex(colIndex); 
// Use the Store Manager to get a reference to the ComboBox store. 
// The store that is passed as one of arguments to this renderer 
// function is the grid store. We need to cross reference the data 
// with the ComboBox store, not the grid store. 
//Get a registered Store using the id of the Store 
var storeId = field; 
var comboStore = Ext.StoreMgr.lookup(storeId); 
if (!comboStore) { 
comboStore = new App.ComboStore(storeId); 
} 
var comboRecord = comboStore.getById(val); 
if (comboRecord) { 
data = comboRecord.data.displayField; 
} 
else { 
data = data;//'missing data'; 
} 
*/ 
// return the value that should be rendered into the grid cell 
return data; 
}, 
/** 
* Date renderer function 
* Renders a date 
*/ 
renderDate: function(date){ 
return date ? date.dateFormat('M d, Y') : ''; 
}, 
renderDateTime: function(date){ 
if (!date) { 
return ''; 
} 
var now = new Date(); 
var d = now.clearTime(true); 
var notime = date.clearTime(true).getTime(); 
if (notime == d.getTime()) { 
return 'Today ' + date.dateFormat('g:i a'); 
} 
d = d.add('d', -6); 
if (d.getTime() <= notime) { 
return date.dateFormat('D g:i a'); 
} 
return date.dateFormat('n/j g:i a'); 
}, 
/** 
* Italic Custom renderer function 
* takes val and renders it in italics 
* @param {Object} val 
*/ 
renderItalic: function(data, metadata, record, rowIndex, columnIndex, store){ 
return '<i>' + data + '</i>'; 
}, 
/** 
* Percent Custom renderer function 
* takes 'data' and renders it red or green with % 
*/ 
renderPctChange: function(data, metadata, record, rowIndex, columnIndex, store){ 
var p = (parseFloat(data) * 100.0).toFixed(1); 
var qtip = '>'; 
if (data >= 0) { 
//meta.css = 'green-cls'; 
qtip = " qtip='yeah'/>"; 
return '<span style="color:green;"' + qtip + data + '%</span>'; 
} else if (data < 0) { 
//meta.css = 'red-cls'; 
qtip = " qtip='woops'/>"; 
return '<span style="color:red;"' + qtip + data + '%</span>'; 
} 
//css: 
//.red-cls {color: red;} 
//.green-cls {color: green;} 
return data; 
}, 
/** 
* Red/Green Custom renderer function 
* takes val and renders it red if <0 otherwise renders it green 
* @param {Object} val 
*/ 
renderPosNeg: function(data, metadata, record, rowIndex, columnIndex, store){ 
if (data >= 0) { 
return '<span style="color:green;">' + data + '</span>'; 
} else if (data < 0) { 
return '<span style="color:red;">' + data + '</span>'; 
} 
return data; 
}, 
/** 
* Risk Custom renderer function 
* Renders according to risk level 
* @param {Object} val 
*/ 
renderRisk: function(data, metadata, record, rowIndex, columnIndex, store){ 
switch (data) { 
case "high": 
metadata.css = "redcell"; 
return "high";//display 'high' in the cell (could be 
//we could display anything here 
//"High","Hi","yup"...anything 
case "medium": 
return "medium"; 
case "low": 
return "low"; 
default: 
return data; 
} 
}, 
/** 
* Star Custom renderer function 
* Renders a picture according to value 
* @param {Object} val 
*/ 
renderStars: function(data, metadata, record, rowIndex, columnIndex, store){ 
switch (data) { 
case "1": 
metadata.css = "stars1"; 
return 1;//returns text over the background image 
case "2": 
metadata.css = "stars2"; 
return;//just shows the background image 
case "3": 
metadata.css = "stars3"; 
return; 
case "4": 
metadata.css = "stars4"; 
return; 
case "5": 
metadata.css = "stars5"; 
return; 
default: 
return data; 
} 
} 
,renderQtip: function(data, metadata, record, rowIndex, columnIndex, store){ 
metadata.attr = 'ext:qtip="' + data + '"'; 
return data; 
} 
}, config)); 
}; 
Ext.onReady(function(){ 
var vp = new Ext.Viewport({ 
layout:'fit', 
items: [app.getMetaGrid({ 
border: false 
})] 
}); 
});

所有JS打包下载共享 advancedSearch.rar

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 #Javascript
javascript面向对象编程代码
Dec 19 #Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 #Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
JS获取整个页面文档的实现代码
Dec 15 #Javascript
jQuery版仿Path菜单效果
Dec 15 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
loading动画特效小结
2017/01/22 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python opencv之SIFT算法示例
2018/02/24 Python
python实现猜单词小游戏
2020/05/22 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
关于工资低的辞职信
2014/01/14 职场文书
进步之星获奖感言
2014/02/22 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
爱心募捐通知范文
2015/04/27 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Python使用scapy模块发包收包
2021/05/07 Python
小程序实现侧滑删除功能
2022/06/25 Javascript