I have found the Easy UI plugin that extends the datagrid filter functionality.
Please, see the code below. I am wondering how to activate this grid filter in my datagrid?
/*
2017-5-8 dbaylu
hi@dbay.cn
*/
( function ($, undefined) {
// search:false then the current column does not work
$.fn.gridFilter = function ( arg ) {
if ( typeof arg === 'string' ) {
var fn = $.fn.gridFilter[arg];
if (! fn) {
throw ("gridFilter - No such method: " + arg);
}
varargs = $.makeArray(arguments).slice(1 );
return fn.apply( this ,args);
}
var extendedOptions= {
gridfilterRules: []
};
$.extend($.fn. datagrid.defaults, extendedOptions);
var p = $.extend( true ,{
name: null ,
gridid: null ,
columns:[],
single: false ,// Only radio is allowed for TRUE
combobox:{width:90,panelHeight:'auto' },
dialog:{
title:'Advanced Search' ,
dialogid:'dbaysearch' ,
iconCls: "icon-search" ,
saveButtonIconCls:"icon-search" ,
width: 540 ,
height: 200 ,
topMost: false ,
nableCloseButton: false ,
collapsible:true ,
resizable: true ,
modal: false ,
saveButtonText: "Search" ,
onSave: function (d){
var ds = d.form("validate" ),
iClose = false ;
if (ds) {
var va=d.form("getData",{transcript: "jsonarray" });
// Prevent conflict with easyui-filter plugin
if ($('#'+p.gridid)[p.name ]('options').enablefilter){
$('#'+p.gridid)[p.name]('resize' ,{filterRules:va});
$('#'+p.gridid)[p.name]( 'resize' ,{gridfilterRules:va});
$('#'+p.gridid)[p.name]('load' );
} else {
$('#'+p.gridid)[p .name]('resize' ,{gridfilterRules:va});
$('#'+p.gridid)[p.name]('load' ,{filterRules:JSON.stringify(va)});
}
}
return false ;
}
},
groupOp:[{field:'and',title:'and',selected: true },{field:'or',title:'or' }],
op: {
combobox:[{value:'equal',text:'equal to ( = )',selected: true },{value:'notequal',text:'not equal to ( <> )' }],
datebox:[ {value:'equal',text:'equal (=)',selected: true},{value:'notequal',text:'not equal to( <>)'},{value:'less',text:'less than( < )'},{value:'lessorequal',text:'less than or equal to ( <= )'},{value:'greater',text:'greater than ( > )'},{value:'greaterorequal',text:'greater than or equal ( >= )' }],
numberbox:[{value :'equal',text:'equal to ( = )',selected: true },{value:'notequal',text:'not equal to ( <>)'},{value:'less',text:'less than ( < )'},{value:'lessorequal',text:'less than or equal to ( <= )'},{value:'greater',text:'greater than ( > )'},{value:'greaterorequal',text: 'Greater than or equal to ( >= )' }],
textbox:[{value:'contains',text:'contains',selected: true },{value:'equal',text:'equal to (=)'},{value:'notequal',text:'not equal to (<>)'},{value:'beginwith',text:'begins with...' },{value:'endwith',text:'Endwith' }],
monthbox:[{value:'equal',text:'equal (=)',selected: true },{value:'notequal',text:'not equal (<>)'},{value:'less', text:'less than ( < )'},{value:'lessorequal',text:'less than or equal to ( <= )'},{value:'greater',text:'greater than ( > )'},{value:' greaterorequal',text:'greater than or equal to ( >= )' }]
}
}, arg || {});
return this .each( function () {
// this.p = p;
if (p .name === null || p.name === undefined) {
p.name=dbay.gridName('#'+ p.gridid);
}
p.columns=$.array.filter($('#'+p.gridid)[p.name]("getColumns", "all"), function (val) { return val.field && val.title&&val.search != false ? true : false ; });
var i, len = p.columns.length, cl;
if ( !len ) { return ;}
var table = $("<table class='group' style ='border:0px none;'><tbody></tbody></table>"),tr = $("<tr></tr>" );
this .reDraw = function () {
if (p.single){$.messager.alert('Only single search is allowed'); return;}
var t = this .createTableRowForRule(p);
table.append(t);
};
this .createTableRowForRule = function (group,table,parentgroup) {
var that= this , tr = $("< tr></tr>"),i, op, trpar, cm, str="" , selected;
tr.append("<td class='first'></td>" );
var ruleFieldTd = $ ("<td class='columns'></td>" );
tr.append(ruleFieldTd);
varruleFieldSelect = $("<select name='field'></select>" );
ruleFieldTd.append(ruleFieldSelect);
var texts=$("<input type=\"hidden\" name=\"text\ "/>" );
var ruleGx = $("<input type=\"hidden\" name=\"alias\"/>" );
ruleFieldTd.append(texts);
var ruleOperatorTd = $(" <td class='operators'></td>" );
tr.append(ruleOperatorTd);
var ruleOperatorSelect = $("<select name='op'></select>" );
ruleOperatorTd.append(ruleOperatorSelect)
ruleOperatorSelect.combobox($.extend( true ,p.combobox,{data:group.op.textbox}));
var ruleDataTd = $("<td class='data'> </td>" );
tr.append(ruleDataTd);
var ruleFieldvalue=$("<input type=\"text\" class=\"easyui-validatebox\" name=\"value\">" ) ;
ruleDataTd.append(ruleFieldvalue);
ruleFieldvalue.textbox({width:140,required: true });
var tdruleGx=$("<td></td>");
tr.append(tdruleGx);
tdruleGx.append(ruleGx);
if (parentgroup !== null ) {
var gxSelect = $("<select name='groupop'></select>" );
tdruleGx.append(gxSelect);
gxSelect.combobox({width:60,panelHeight:'auto',valueField: "field", textField: "title" , data:group.groupOp});
} else {
var gxSelect = $("<input type=\"hidden\" name=\"groupop\"/>");
tdruleGx.append(gxSelect);
}
var rulebutton = $("<td></td>" );
tr.append(rulebutton);
var inputAddRule = $("<input type='button' value= '+' title='Add rule'/>" )
inputAddRule.bind('click', function (){
that.reDraw()
});
rulebutton.append(inputAddRule)
if (parentgroup !== null ) { //ignore the first group
var inputDeleteGroup = $("<input type='button' value='-' title='Delete group'/>" );
rulebutton.append(inputDeleteGroup);
inputDeleteGroup.bind('click' , function () {
tr.remove();
return false ;
});
}
ruleFieldSelect.combobox({editable: false ,width:120,panelHeight:'auto',panelMaxHeight:150,required: true,valueField: "field", textField: "title", data:group.columns,onSelect: function (obj){
var type='textbox',option={},alias='' ;
if ($.type (obj.hfilter) == "object" ){
type= obj.hfilter.type;
option= obj.hfilter.options;
alias= obj.hfilter.alias
}
texts.val(type);
ruleGx .val(alias);
var name=dbay.textName(ruleFieldvalue);
if (type==name&&type=='textbox' ){
ruleFieldvalue[name]($.extend({},option));
return false ;
}
ruleFieldvalue[name]( "destroy" );
ruleFieldvalue=$("<input type=\"text\" class=\"easyui-validatebox\" name=\"value\">" );
ruleDataTd.append(ruleFieldvalue);
switch (type){
case 'datebox':case 'datetimebox':
ruleOperatorSelect.combobox('loadData' ,group.op.datebox);
ruleFieldvalue[type]($.extend({width:140,required: true ,editable: false ,prompt:'Please select a date'},option )); // Not editable by default
break ;
case 'monthbox' :
ruleOperatorSelect.combobox('loadData' ,group.op.monthbox);
ruleFieldvalue.monthbox($.extend({width:140,required: true ,editable: false ,prompt:'Please select the month'},option));// Not editable by default
break ;
case "combobox" :
ruleOperatorSelect.combobox('loadData' ,group.op.combobox);
ruleFieldvalue.combobox($.extend({width:140,required: true ,editable: false ,panelHeight:'auto'},option)); // Uneditable by default
break ;
case "numberbox" :
ruleOperatorSelect.combobox('loadData' ,group.op.numberbox);
ruleFieldvalue.numberbox($.extend({width:140,required: true ,prompt:'Only numbers can be entered' },option));
break ;
case "combotree" :
ruleOperatorSelect.combobox('loadData' ,group .op.combobox);
ruleFieldvalue.combotree($.extend({width:140,required: true ,editable: false ,panelHeight:'auto'},option)); // default not editable
break ;
default :
ruleOperatorSelect.combobox('loadData' ,group.op.textbox);
ruleFieldvalue.textbox($.extend({width:140,required: true },option));
break ;
}
}});
return tr;
};
table.append(tr);
var th = $("<th colspan='5'></th>" );
tr.append(th);
table.append( this . createTableRowForRule(p,this , null ));
var showDialog= $.extend({},p.dialog,{content:table})
$.easyui.showDialog(showDialog);//Open window
})
}
})( jQuery);
