在ExtJs项目开发过程中少不了筛选查询功能，而对于这部分功能又基本是大同小异，无非就是对相应条件数据进行筛选查看了，所以我们针对这部分专门去实现了一个控件，用于对所有的数据列表进行查询的通用筛选！
先看下示例图：
控件核心代码如下：
这部分代码比较多，可能再打开浏览器的时候看不到，请大家在附件中下载即可。
function createFilter(store,moduleCode,callback)
{
Ext.form.Field.prototype.msgTarget = "side";
////////////////////变量、常量区////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* 当前筛选条件节点
* @type TreeNode
*/
var currentFilter={attributes:{}};
var allOperator={EQ:"0",NE:"1",LIKE:"2",NLIKE:"3",GT:"4",LT:"5",GE:"6",LE:"7",NULL:"8",NOTNULL:"9",ASC:"10",DESC:"11"};
/**
* 数字操作运算符集合
* @type Array
*/
var numericOp = datetimeOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"], [allOperator.GT, "大于"]
, [allOperator.LT, "小于"], [allOperator.GE, "大于等于"],[allOperator.LE, "小于等于"],[allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"]];
/**
* 所有的运算符
* @type Array
*/
var allOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"],[allOperator.LIKE, "包含字符"], [allOperator.NLIKE, "不包含字符"], [allOperator.GT, "大于"]
, [allOperator.LT, "小于"], [allOperator.GE, "大于等于"],[allOperator.LE, "小于等于"],[allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"], [allOperator.ASC, "升序"], [allOperator.DESC, "降序"]];
/**
* 字符操作运算符
* @type Array
*/
var stringOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"],[allOperator.LIKE, "包含字符"], [allOperator.NLIKE, "不包含字符"],[allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"]];
/**
* 自定义，下拉框，boolean操作运算符
* @type
*/
var lookupOp = booleanOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"], [allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"]];
/**
* 最后一行下标
* @type Number
*/
var lineIndex = 0;// 新增行下标
/**
* 当前编辑行
* @type int
*/
var currentIndex=0;// 当前编辑行号
/**
* 左边树面板折叠状态，默认为打开
* @type Boolean
*/
var treeColFlag=false;
/**
* 第一行下标,默认为0
*/
var firstIndex=0;
/**
* 存放排序字段的下标, 避免重复
*/
var sortInfo={};
/**
* 筛选结果数据源
*/
var filterStore = new Ext.data.Store({//模块列数据源
id:moduleCode+"_filterStore",
proxy : new Ext.data.HttpProxy({
url : "filterAction!getFilterInfo.action"
}),
reader : new Ext.data.JsonReader({
root : "root",
totalProperty : "total",
fields : ["fieldName", "fieldId", "fieldLabel", "operator",
"setValue", "inputType", "fieldType", "inputSql",
"method", "relation", "rightBr", "leftBr", "sort",
"displayValue", "delFlag", "idRender","userQueryId","custom"]
})
});
////////////////////初始化方法区////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//初始化store，如果不是公用Grid 来的，要把fieldType转成相对应的数字
if(store.getCount()>0)
store.each(function(rec){
switch(rec.get("fieldType"))
{
case "string":rec.set("fieldType",1);break;
case "int":rec.set("fieldType",2);break;
case "float":rec.set("fieldType",3);break;
case "boolean":rec.set("fieldType",4);break;
case "date":rec.set("fieldType",5);break;
case "gender":rec.set("fieldType",6);break;
}
})
else
store.load();
/**
* 文本输入框
* @param {int} index 行索引
*/
var objGridTextEditor = function(index) {
return new Ext.form.TextField({
id : moduleCode+"_setValue" + index,
emptyText : "请输入..."
});
}
/**
* 整型输入框
* @param {int} index 行索引
*/
var objGridIntegerEditor = function(index) {
return new Ext.form.NumberField({
id : moduleCode+"_setValue" + index,
allowNegative : false,
allowDecimals : false,
emptyText : "请输入整数..."
});
}
/**
* 浮点型输入框
* @param {int} index 行索引
*/
var objGridFloatEditor = function(index) {
return new Ext.form.NumberField({
id : moduleCode+"_setValue" + index,
allowNegative : false,
emptyText : "请输入数字..."
});
}
/**
* boolean选择器
* @param {int} index 行索引
*/
var objGridBooleanEditor = function(index) {
return new Ext.form.ComboBox({
store : [["1", "是"], ["0", "否"]],
mode : "local",
triggerAction : "all",
id : moduleCode+"_setValue" + index,
editable : false,
emptyText : "请选择..."
});
}
/**
* 性别选择器
* @param {int} index 行索引
*/
var objGridGenderEditor = function(index) {
return new Ext.form.ComboBox({
store : [[1, "男"], [0, "女"]],
mode : "local",
id : moduleCode+"_setValue" + index,
triggerAction : "all",
editable : false,
emptyText : "请选择..."
});
}
////////////////////公用方法区////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* 从store中根据prop的propValue取field值
* @param {Ext.data.Store} store
* @param {String} prop 字段
* @param {String} propValue 字段值
* @param {String} field 结果字段
* @return {Object}
*/
function findRecordValue(store, prop, propValue, field) {
var record;
if (store.getCount() > 0) {
var _i=0;
store.each(function(r) {
if (r.data[prop] == propValue) {
record = r.data[field];
if(field=="refData")
record=store.reader.jsonData[_i].refData;
return false;
}
_i++;
});
}
return record;
}
/**
* 删除当前行
*/
var deleteLine = function() {
panel.remove(moduleCode+"_line"+currentIndex);
var record = filterStore.getAt(currentIndex);
var fieldName=record.data.fieldName;
if(sortInfo[fieldName]+1==currentIndex+1)
sortInfo[fieldName]=null;
if(win.customFilter[fieldName]+1==currentIndex+1)
win.customFilter[fieldName]=null;
record.set("delFlag", "1");
}
/**
* 删除所有行
*/
function delAllLine()
{
var count=lineIndex||0;
for(var j=0;j<=count;j++)
{
currentIndex=j;
deleteLine();
}
if(!currentFilter.id){
filterStore.removeAll();
lineIndex=0;
}
currentIndex=null;
}
/**
* 根据左边树是否折叠取输入框宽度值
* @return {int}
*/
function getValueWidth()
{
return treeColFlag?197:162;
}
/**
* 根据左边树是否折叠改变值输入框宽度
*/
function changeValueWidth()// 改变值的宽度
{
for(var i=0;i<=lineIndex;i++)
{
var setv=Ext.getCmp(moduleCode+"_setValue"+i);
if(!setv)
continue;
setv.setWidth(getValueWidth());
}
}
/**
* 检查条件是否合法
* @return {Boolean}
*/
var checkFilter = function() {
var n = filterStore.getCount();
var leftPLen = 0;
var rightPLen = 0;
for (var i = 0; i < n; i++) {
var record = filterStore.getAt(i);
if (record.get("delFlag"))
continue;
var leftBr = record.get("leftBr");
var rightBr = record.get("rightBr");
leftPLen += leftBr ? leftBr.length : 0;
rightPLen += rightBr ? rightBr.length : 0;
}
if (leftPLen != rightPLen) {
Ext.Msg.alert("错误", "左括号与右括号数量不匹配，请检查。");
return false;
}
return true;
}
/**
* 取筛选条件
* @return {Array} [修改过的，删除的(只记录有id的)]
*/
function getData()
{
var removed=[];
var modified=[];
filterStore.each(function(record)
{
if(!record.get("fieldName"))
return;
var operator=record.get("operator");
var sortFlag=findRecordValue(store, "fieldName", record
.get("fieldName"), "sort");
if(sortFlag!=true&&(operator == allOperator.ASC || operator == allOperator.DESC))
return;
var dataType = findRecordValue(store, "fieldName", record
.get("fieldName"), "fieldType");
var _setValue=record.get("setValue");
_setValue=_setValue+""=="0"?"0":_setValue;
if (operator != allOperator.NULL && operator != allOperator.NOTNULL && operator != allOperator.ASC && operator != allOperator.DESC
&& _setValue== "" && dataType != "6"
&& dataType != "4")
return;
if(record.get("delFlag"))
{
if(!record.get("fieldId"))
return;
removed.push(Ext.encode(record.data));
}else
modified.push(Ext.encode(record.data));
})
return [modified,removed];
}
/**
* 点确认按钮触发事件
*/
function okQuery(){
var respText=Ext.Ajax.request({
sync:true,
url:"query!putFilterInSession.action",
params:{
modified:getData()[0],
moduleCode:moduleCode
}
});
var result=Ext.util.JSON.decode(respText.conn.responseText);
return result;
}
function addLineFromRecord(i,rec){
var _has=Ext.getCmp(moduleCode+"_fieldName"+i);
if(!_has){
panel.add(getLine(i,true));
panel.doLayout();
}
Ext.getCmp(moduleCode+"_fieldName"+i).setValue(rec.get("fieldName"));
if(!_has)
Ext.getCmp(moduleCode+"_fieldName"+i).fireEvent("change",{value:rec.get("fieldName")});
var operator=Ext.getCmp(moduleCode+"_operator"+i);
if(operator==allOperator.ASC||operator==allOperator.DESC)//如果操作符为排序，存入对象
sortInfo[rec.get('fieldName')]=i;
var value=Ext.getCmp(moduleCode+"_setValue"+i);
operator.setValue(rec.get("operator"));
Ext.getCmp(moduleCode+"_relation"+i).setValue(rec.get("relation"));
Ext.getCmp(moduleCode+"_operator"+i).fireEvent("change",{value:rec.get("operator")});
Ext.getCmp(moduleCode+"_rightBr"+i).setValue(rec.get("rightBr"));
Ext.getCmp(moduleCode+"_leftBr"+i).setValue(rec.get("leftBr"));
var dataType=findRecordValue(store,"fieldName",rec.get("fieldName"),"fieldType");
value.setValue(dataType==5?StringToDate(rec.get("setValue")):rec.get("setValue"));
if(value.store){
if(value.store.getCount()==0)
value.store.reload({callback:function(){
value.setValue(value.getValue());
}})
}
lineIndex=_has?lineIndex:i;
}
/**
* 条件store加载完成后事件，生成筛选框
*/
function afterFilterStoreLoad()
{
var i=0;
if(filterStore.getCount()>0)
{
filterStore.each(function(rec){
addLineFromRecord(i,rec);
i=i+1;
})
lineIndex=i-1;
}else
{
panel.add(getLine(0));
panel.doLayout();
}
}
/**
* 初始化条件，取当前session中的条件
*/
function initFilter(){
Ext.Ajax.request({
url : "query!getFilterFromSession.action",
params:{moduleCode:moduleCode},
success:function(resp,action){
var result=Ext.util.JSON.decode(resp.responseText);
if(result.success){
delAllLine();
filterStore.loadData(result,true);
filterStore.each(function(rec){
if(rec.data.custom)
win.customFilter[rec.data.fieldName]=rec.data.sort;
})
filterStore.commitChanges();
if(store.getCount()==0)
store.load({callback:function(){afterFilterStoreLoad()}})
else
afterFilterStoreLoad();
}
}
})
}
/**
* 树节点单击后事件
*/
function afterTreeClick()
{
delAllLine();
filterStore.reload({params:{"head.id":currentFilter.id},callback:function(){
afterFilterStoreLoad();
}});
}
/**
* 保存筛选条件
*/
function saveFilter(data)
{
if(!checkFilter())
return;
Ext.Ajax.request({
url:"filterAction!doSaveFilter.action",
params:{
"head.id":currentFilter.id,
"head.name":currentFilter.text,
"head.moduleId":currentFilter.attributes.moduleId,
"head.empId":currentFilter.attributes.empId,
"head.orgId":currentFilter.attributes.orgId,
moduleCode:moduleCode,
modified:data[0],
removed:data[1]
},
success:function(resp, opt) {
var text = Ext.util.JSON
.decode(resp.responseText);
if (text.success){
filterStore.commitChanges();
currentFilter.id=text.id;
filterTree.getRootNode().reload();
}
}
})
}
//////////////////控件区///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* 根据字段名获取编辑器和操作符集合
* @param {} fieldName 字段名
* @return {}
*/
var getChange=function(fieldName,index){
var _flag=Ext.isNumber(index);
var _store;
var _valueStore;
var dataType;
var editorType= findRecordValue(store, "fieldName", fieldName, "inputType")
var idRender= findRecordValue(store, "fieldName", fieldName, "idRender")
var label=findRecordValue(store, "fieldName", fieldName, "fieldLabel");
if(editorType)
{
if(editorType=="1"&&idRender)
dataType="text";
else if(editorType=="4")
dataType="reference";
else if(editorType!="1")
dataType="combo";
}
var type=findRecordValue(store, "fieldName", fieldName, "fieldType");
if(!dataType){
if(!type)
{
alert(label+":"+fieldName+"列不能没有‘类型’并且也没有‘输入类型’");
throw new Error("无效列:"+fieldName);
}
switch (type.toString()) {
case "6" :
dataType="gender";
break;
case "5" :
dataType="date";
break;
case "4" :
dataType="boolean";
break;
case "2" :
dataType="int";
break;
case "3" :
dataType="float";
break;
default:
dataType = "text";
break;
}
}
switch (dataType) {
case "text" :
_store = stringOp;
if(_flag)
_valueStore = objGridTextEditor(index);
break;
case "date" :
_store = datetimeOp;
if(_flag)
_valueStore = new Ext.form.DateField({
emptyText:"请选择日期...",
id : moduleCode+"_setValue" + index,
format:findRecordValue(store, "fieldName", fieldName,"format")||"Y-m-d",
dateFlag:true
});
break;
case "gender" :
_store = lookupOp;
if(_flag)
_valueStore = objGridGenderEditor(index);
break;
case "boolean" :
_store = booleanOp;
if(_flag)
_valueStore = objGridBooleanEditor(index);
break;
case "int" :
_store = numericOp;
if(_flag)
_valueStore = objGridIntegerEditor(index);
break;
case "float" :
_store = numericOp;
if(_flag)
_valueStore = objGridFloatEditor(index);
break;
case "combo" :
_store = lookupOp;
if(_flag){
_valueStore = new Ext.form.ComboBox({
store : findRecordValue(store, "fieldName", fieldName,"store")||new Ext.data.Store({
baseParams : {
type : editorType,
data : findRecordValue(store, "fieldName", fieldName,
(editorType=="2")?"inputSql":"method")
},
proxy : new Ext.data.HttpProxy({
url : "querySet!getFieldInputValues.action"
}),
reader : new Ext.data.JsonReader({
root : "root"
}, [{name:"fieldName",mapping:"value"}, {name:"fieldLabel",mapping:"text"}])
}),
mode : "local",
triggerAction : "all",
id : moduleCode+"_setValue" + index,
editable : false,
valueField : findRecordValue(store, "fieldName", fieldName,"disValue")||"fieldName",
displayField : findRecordValue(store, "fieldName", fieldName,"disText")||"fieldLabel",
emptyText : "请选择..."
});
if(_valueStore.store.getCount()==0)
_valueStore.store.load();
}
break;
case "reference" :
_store = lookupOp;
if(_flag){
var _refData=findRecordValue(store, "fieldName", fieldName,"refData");
_valueStore = new Ext.form.ReferenceField({
refData : _refData,
id : moduleCode+"_setValue" + index,
editable : false,
emptyText : "请选择...",
multiple:_refData.multiple||false
});
}
break;
}
var sort=findRecordValue(store, "fieldName", fieldName, "sort")&&(!_flag||(sortInfo[fieldName]+""!="0")&&!sortInfo[fieldName]);
_store=_store.slice(0,_store.length);
if(sort==true)
_store.push(allOp[10],allOp[11]);
return {store:_store,valueStore:_valueStore,dataType:dataType,type:type,inputType:editorType};
}
/**
* 新增一行条件
* @param {int} index 下标
* @param {Boolean} edit 如果手动新增不传或传false,自动新增为true
*/
var getLine = function(index,edit) {
/**
* 操作符改变事件
*/
var operChange = function(ctl, nv, ov) {
nv=nv||ctl.value;
Ext.getCmp(moduleCode+"_setValue" + index).setDisabled(false);
if (nv == allOperator.NULL || nv == allOperator.NOTNULL || nv == allOperator.ASC || nv == allOperator.DESC){
Ext.getCmp(moduleCode+"_setValue" + index).setDisabled(true);
}
var _sort=nv==allOperator.ASC||nv==allOperator.DESC;
var _reValue=Ext.getCmp(moduleCode+"_relation" + index).getValue();
var _rec=filterStore.getAt(index);
var hasSort=true;
this.store.each(function(_r){
if(_r.data.value==allOperator.ASC||_r.data.value==allOperator.DESC)
return hasSort=false;
})
if(_sort){
var _cfieldName=_rec.get("fieldName");
if(!hasSort)
sortInfo[_cfieldName]=index;
Ext.getCmp(moduleCode+"_relation" + index).setValue("");
Ext.getCmp(moduleCode+"_leftBr" + index).setValue("");
Ext.getCmp(moduleCode+"_rightBr" + index).setValue("");
valueChange('relation', "");
valueChange('leftBr', "");
valueChange('rightBr', "");
}else{
if(!hasSort)
sortInfo[_cfieldName]=null;
Ext.getCmp(moduleCode+"_relation" + index).setValue(_reValue||((index==0)?"":"and"));
valueChange('relation', _reValue||((index==0)?"":"and"));
}
Ext.getCmp(moduleCode+"_relation" + index).setDisabled(_sort||(index==0));
Ext.getCmp(moduleCode+"_leftBr" + index).setDisabled(_sort);
Ext.getCmp(moduleCode+"_rightBr" + index).setDisabled(_sort);
valueChange('operator', nv)
}
/**
* 属性名改变后事件
*/
var fileListChange = function(ctl, nv) {// 字段名改变后事件
if(nv)
edit=false;
nv=nv||ctl.value;
var _store;
var _valueStore = Ext.getCmp(moduleCode+"_setValue" + index);
if (_valueStore)
_valueStore.destroy();
// var dataType;
var _changeResult=getChange(nv,index);//获取类型相关的编辑器和操作符集合
filterStore.getAt(index).set("inputType",_changeResult.inputType);
_store=_changeResult.store;
_valueStore=_changeResult.valueStore;
var oper = Ext.getCmp(moduleCode+"_operator" + index);
oper.clearValue();
oper.store.loadData(_store);
_valueStore.setWidth(getValueWidth());
_valueStore.on("focus", focus);
_valueStore.on("change", function(ctl, v, ov) {
Ext.getCmp(moduleCode+"_fieldName" + index).focus();
valueChange("setValue", ctl.dateFlag?v.dateFormat(this.format):v)
});
var valuePanel = Ext.getCmp(moduleCode+"_valuePanel" + index);
var dataType=_changeResult.dataType;
var type=_changeResult.type;
valuePanel.add(_valueStore);
valuePanel.doLayout(true);
if(!edit)
{
valueChange("setValue", dataType=="4"?"0":"");
valueChange("operator", allOperator.EQ);
valueChange("fieldName", nv);
valueChange("fieldLabel", findRecordValue(store, "fieldName", nv,
"fieldLabel"));
valueChange("fieldType", type||"string");
valueChange("idRender",findRecordValue(store, "fieldName", nv,
"idRender"));
oper.setValue(allOperator.EQ);
Ext.getCmp(moduleCode+"_setValue"+index).setValue("");
}
}
/**
* 所有构造条件控件获焦事件
*/
function focus() {
currentIndex = index;
}
/**
* 所有构造条件控件值改变后事件
* @param {String} name 控件基础名
* @param {String} v 值
*/
function valueChange(name, v) {
var record = filterStore.getAt(index);
record.set(name, v);
}
if(!edit)
filterStore.insert(index, new filterStore.recordType({relation:(index>0)?"and":"",sort:index}));
return {layout:"column",border:false,id:moduleCode+"_line"+index,items:[new Ext.form.ComboBox({
columnWidth : .1,
store : [["and", "并且"], ["or", "或者"]],
value : (index > 0) ? "and" : "",
disabled : (index == 0),
id : moduleCode+"_relation" + index,
triggerAction : "all",
listeners : {
focus : focus,
change : function(ctl, v, ov) {
valueChange("relation", v)
}
}
}), new Ext.form.ComboBox({
id : moduleCode+"_leftBr" + index,
columnWidth : .1,
store : ["(", "((", "((", "(((", "(((("],
triggerAction : "all",
regex :/^\({1,4}$/,
editable : true,
listeners : {
focus : focus,
change : function(ctl, v, ov) {
valueChange("leftBr", this.isValid()?v:"")
if(!this.isValid())
this.setValue("")
}
}
}), new Ext.form.ComboBox({
id : moduleCode+"_fieldName" + index,
columnWidth : .2,
store : store,
mode : "local",
hiddenName : "value",
triggerAction : "all",
valueField : "fieldName",
displayField : "fieldLabel",
editable : false,
listeners : {
change : fileListChange,
focus : focus
}
}), new Ext.form.ComboBox({
columnWidth : .18,
id : moduleCode+"_operator" + index,
mode : "local",
valueField : "value",
displayField : "text",
triggerAction : "all",
store : new Ext.data.SimpleStore({
fields : ["value", "text"]
}),
listeners : {
focus : focus,
change : operChange
}
})
, {
layout : "table",
column : 1,
id : moduleCode+"_valuePanel" + index,
border : false,
columnWidth : .32,
items : new Ext.form.TextField({
width:getValueWidth(),
id : moduleCode+"_setValue" + index,
listeners : {
focus : focus,
change : function(ctl, v, ov) {
valueChange("setValue", v)
}
}
})
}, new Ext.form.ComboBox({
id : moduleCode+"_rightBr" + index,
columnWidth : .1,
store : [")", "))", ")))", "))))"],
mode : "local",
triggerAction : "all",
valueField : "value",
displayField : "text",
regex :/^\){1,4}$/,
editable : true,
listeners : {
focus : focus,
change : function(ctl, v, ov) {
valueChange("rightBr",this.isValid()?v:"")
if(!this.isValid())
this.setValue("")
}
}
})]}
}
/**
* 工具条
*/
var tool = new Ext.Toolbar({
items : ["->",{
xtype : "button",
text : "增行",
tooltip:"AddLine",
icon : KANGSOFT+"/js/images/add_16.gif",
listeners : {
click : function() {
panel.add(getLine(++lineIndex));
panel.doLayout();
currentIndex=lineIndex;
}
}
},"-", {
xtype : "button",
text : "删行",
tooltip:"DeleteLine",
icon : KANGSOFT+"/js/images/delete.gif",
handler : function() {
if (currentIndex||(currentIndex+""=="0")) {
Ext.Msg.confirm("删除提示", "你要删除此行吗？",
function(v) {
if (v == "yes"){
deleteLine();
if(currentIndex==firstIndex){
var i=0;
var _flag=true;
filterStore.each(function(rec){
if(!rec.get("delFlag"))
return _flag=false;
i++;
})
if(_flag)
{
panel.add(getLine(0));
panel.doLayout();
currentIndex=null;
firstIndex=0;
}
else{
firstIndex=i;
var record = filterStore.getAt(firstIndex);
record.set("relation","");
Ext.getCmp(moduleCode+"_relation"+i).setValue("");
Ext.getCmp(moduleCode+"_relation"+i).setDisabled(true);
}
}
}
})
}else
Ext.Msg.alert("删除提示","没有选择行");
}
},"-", {
text : "全部清除",
tooltip:"RemoveAll",
icon : KANGSOFT+"/js/images/reset.png",
handler : function() {
delAllLine();
panel.add(getLine(lineIndex));
panel.doLayout();
}
},"-",{text:"刷新",tooltip:"Refresh",icon : KANGSOFT+"/js/images/refresh.png",handler:function(){
if(currentFilter.id)
afterTreeClick();
else
initFilter();
}},"-",{text:"保存",
disabled:moduleCode?false:true,
tooltip:"Save",
icon : KANGSOFT+"/js/images/save.gif",handler:function(){
if(!checkFilter())
return;
var data=getData();
if(!data[0][0]&&!data[1][0])
{
Ext.Msg.alert("保存提示","没有修改条件，不需要保存");
return;
}
Ext.MessageBox.prompt("筛选保存提示", "筛选名称:", function(btn,text){
if(btn=="ok")
{
currentFilter.text=text;
saveFilter(data);
}
},this,false,currentFilter.text||"新增条件1");
}},"-", {
text : "确认",
disabled:moduleCode?false:true,
tooltip:"Ok/Query",
icon : KANGSOFT+"/js/images/search.png",
handler : function() {
if (checkFilter()) {
if(true||filterStore.getModifiedRecords().length>0){
// var respText=Ext.Ajax.request({
// sync:true,
// url:"query!putFilterInSession.action",
// params:{
// modified:getData()[0],
// moduleCode:moduleCode
// }
// });
// var result=Ext.util.JSON.decode(respText.conn.responseText);
var result=okQuery();
if(result.success){
var fn=callback.createCallback(result.success);
fn();
}
}
win.hide();
filterStore.commitChanges();
}
}
},"-", {
text : "关闭/返回",
tooltip:"Cancel",
icon : KANGSOFT+"/js/images/cancel.png",
handler : function() {
win.hide();
}
}],
height : 25
});
/**
* 构造筛选条件面板
*/
var panel = new Ext.Panel({
id : moduleCode+"_main_panel",
tbar:tool,
anchor:"101%",
autoScroll:true,
border:false,
height:355,
items : [{layout:"column",border:false,items:[{
height:0,
title : "关系",
columnWidth:.1
}, {
title : "括号",
height:0,
columnWidth:.1
}, {
height:0,
title : "字段名",
columnWidth:.2
}, {
height:0,
title : "运算符",
columnWidth:.18
}, {
height:0,
title : "内容",
columnWidth:.32
}, {
height:0,
title : "括号",
columnWidth:.1
}]}]
});
panel.add(getLine(0));
var treeLoader = new Ext.tree.TreeLoader({
dataUrl : "filterAction!getFilterTree.action",
baseParams:{moduleCode:moduleCode}
});
/**
* 筛选条件树
*/
var filterTree=new Ext.tree.TreePanel({//已保存的筛选树
tools:[{qtip:"删除条件",handler:function(){
if(currentFilter&¤tFilter.id)
Ext.Msg.confirm("删除提示","你确认删除此条件吗?",function(v){
if(v=="yes")
Ext.Ajax.request({
url:"filterAction!doDeleteFilter.action",
params:{
"head.id":currentFilter.id
},
success:function(resp, opt) {
var text = Ext.util.JSON.decode(resp.responseText);
if (text.success){
Ext.Msg.alert("删除提示","删除成功!");
currentFilter={attributes:{}};
filterTree.getRootNode().reload();
}
}
});
})
}},{id:"right",qtip:"停靠",hidden:true,handler:function(){filterTree.expand();filterTree.tools.left.show();this.hide();panel.doLayout(true,false)}},
{id:"left",qtip:"收起条件树",handler:function(){filterTree.collapse();treeColFlag=!treeColFlag;changeValueWidth();filterTree.tools.right.show();this.hide()}}],
autoScroll : true,
region:"west",
width : 130,
lines : true,
rootVisible : true
});
filterTree.on("expand",function(p){
treeColFlag=!treeColFlag;changeValueWidth();
})
var treeRoot = new Ext.tree.AsyncTreeNode({
id : "0",
text : "root",
draggable : false
})
filterTree.setRootNode(treeRoot);
filterTree.loader = treeLoader;
initFilter();
filterTree.on("click",function(node){
if(node.id==currentFilter.id)
return;
if(!node.parentNode)
{
if(currentFilter.id)
{
currentFilter={attributes:{}};
delAllLine();
panel.add(getLine(0));
panel.doLayout();
}
return;
}
if(store.getCount()==0)
store.load({});
currentFilter=node;
afterTreeClick();
})
/**
* 筛选面板
*/
function addFilter(data){
// alert(1)
function add(filter){
if(!Ext.isObject(filter))
throw new Error("手动增加筛选条件不符合规定, 只能是对象或对象数组");
if(!filter.fieldName)
return;
var result=getChange(filter.fieldName);
if(!result||!result.store)
return;
if(filter.operator){
var hasFlag=false;
Ext.each(result.store,function(rec){
if(rec[0]==filter.operator){
hasFlag=true;
return false;
}
});
if(!hasFlag)
throw new Error("指定的：'"+filter.fieldName+"'列的运算符不在允许范围内，请检查!");
}
var record={};
store.each(function(rec){
if(rec.data.fieldName==filter.fieldName)
{
record=rec.data;
return false;
}
})
record.operator=allOperator.EQ;
Ext.applyIf(filter,{
fieldLabel:record.fieldLabel,
fieldType:record.fieldType,
inputType:record.inputType,
inputSql:record.inputSql,
method:record.method,
idRender:record.idRender,
operator:record.operator
});
Ext.apply(filter,{
relation:(lineIndex>0)?"and":""
}
)
if(lineIndex==0&&!filterStore.getAt(0).data.fieldName){
// filterStore.removeAll();
delAllLine();
lineIndex=-1;
}
var filterRec=new filterStore.recordType(filter);
var _index=win.customFilter[filter.fieldName]||sortInfo[filter.fieldName];
if(_index+""==0||_index){
var _rec=filterStore.getAt(_index);
for(var p in filter)
_rec.set(p,filter[p]);
currentIndex=_index;
}else
{
filterRec.data.custom="1";
filterRec.data.sort=lineIndex+1;
filterStore.insert(++lineIndex, filterRec);
win.customFilter[filter.fieldName]=lineIndex;
currentIndex=lineIndex;
}
addLineFromRecord(currentIndex,filterRec);
}
if(Ext.isArray(data)){
Ext.each(data,function(f){
add(f);
})
}else
add(data);
}
var getFilters=function(flag){
if(flag){
}else
return filterStore.data;
}
var win=Ext.getCmp("win"+moduleCode);
if(!win)
win = new Ext.Window({
plain : true,
resizable : false,
draggable : true,
loadMask : true,
id : "win"+moduleCode,
modal : true,
layout:"border",
closeAction : "hide",
width : 650,
height : 400,
closable:false,
customFilter:{},
title : "<img src='"+KANGSOFT+"/js/images/search.png' style='vertical-align: middle;'>筛选窗体</img>",
items : [filterTree,{layout:"anchor",region:"center",items:[panel]}],
allOperator:allOperator,
addFilter:addFilter,//自增加筛选行
getFilters:getFilters,
clearFilter:function(afterClear){//手动清除所有行
delAllLine();
panel.add(getLine(lineIndex));
panel.doLayout();
okQuery();
if(afterClear)
afterClear.call();
},
run:function(){
// if (filterStore.getModifiedRecords().length>0&&checkFilter()) {
// var result=okQuery();
var result=this.save();
if(result){
var fn=callback.createCallback(result.success);
fn();
filterStore.commitChanges();
}
// }
},
save:function(){
if (filterStore.getModifiedRecords().length>0&&checkFilter()) {
var result=okQuery();
if(!result.success){
Ext.Msg.alert("操作提示","保存条件失败");
}
return result;
}
return false;
}
});
return win;
}
FilterProxy=function(config){
Ext.apply(this,config);
FilterProxy.constructor.call(this);
}
Ext.extend(FilterProxy,Object,{
addFilter:function(data){
var obj=this;
function add(filter){
var _fname=obj[filter.fieldName]||filter.fieldName;
filter.fieldName=_fname;
}
if(Ext.isArray(data)){
Ext.each(data,function(f){
add(f);
})
}else
add(data);
obj.win.addFilter(data);
},
run:function(){this.win.run()},
save:function(){this.win.save()}
})
使用部分代码如下：
/** ******************************************筛选*************************************************** */
var reloadStore =function(flag)
{
if(flag)
ds.load({params:{start:0,limit:15}})
}
var fieldsDef = new Ext.data.JsonStore({
fields : ['fieldName','fieldLabel',
'fieldType','inputType',"idRender","store",
'disValue', 'disText'],
data : [{
fieldName : 's.itemClassId',
fieldLabel : '大类',
fieldType : 'string',
idRender:'itemClass_hql'
}, {
fieldName : 's.ornaClassId',
fieldLabel : '小类',
fieldType : 'string',
idRender:'ornaClass_hql'
}, {
fieldName : 's.sizeName',
fieldLabel : '尺寸/规格',
fieldType : 'string'
}, {
fieldName : 's.errorStart',
fieldLabel : '误差起始范围',
fieldType : 'string'
}, {
fieldName : 's.errorEnd',
fieldLabel : '误差截止范围',
fieldType : 'string'
}]
});
//创建筛选grid
var filter =createFilter(fieldsDef,'040623',reloadStore);
注：其中的后台代码部分，根据项目的具体情况由使用者自己发挥开发。建议将相应的筛选条件部分放入session，session的ID可以设置为模块代码，便于与其它模块的筛选功能部分的条件区分。此筛选功能还有待进一步完善，如果有使用到的朋友在开发过程中有什么更好的建议，希望给予支持。（QQ:329365156）