EasyUI
DataGrid Filter Row
Extension » DataGrid Filter Row
Include 'datagrid-filter.js' file
Enable Filter
Properties
The properties extend from datagrid, below is the added properties for datagrid.
Name | Type | Description | Default |
---|---|---|---|
filterMenuIconCls | string | The icon class of filter menu item to indicate what item is used. | icon-ok |
filterBtnIconCls | string | The icon class of filter button. | icon-filter |
filterBtnPosition | string | The filter button position. Possible values are 'left' and 'right'. | right |
filterPosition | string | The filter bar position accordion to columns. Possible values are 'top' and 'bottom'. | bottom |
showFilterBar | boolean | True to display the filter bar. | true |
remoteFilter | boolean | True to do remote filter. When enabled, the 'filterRules' parameter will be sent to remote server. The 'filterRules' parameter value is achieved by 'filterStringify' function. | false |
clientPaging | boolean | True to do paging on the client side. | true |
filterDelay | number | Delay to do filter from the last key input event in 'text' filter component. | 400 |
filterRules | array | The definition of filter rules. Each rule contains 'field','op' and 'value' properties. | [] |
filterMatchingType | string | Specify whether the filtered rows need to match ALL or ANY of the applied filters. Possible values are: 'all','any'. | all |
filterIncludingChild | boolean | Determine if to include the child nodes when matching a node. | false |
defaultFilterType | string | The default filter type. | text |
defaultFilterTrigger | string | The event to trigger the filter action. | keydown |
defaultFilterOperator | string | The default filter operator. | contains |
defaultFilterOptions | object | The default filter options. | |
filterStringify | function | The function to strinify the filter rules. |
function(data){ return JSON.stringify(data); } |
val | function | The function to retrieve the field value of a row to match the filter rule. |
function(row, field, formattedValue){ return formattedValue || row[field]; } |
Events
The events below extend from datagrid.
Name | Parameter | Description |
---|---|---|
onClickMenu | item,button,field |
Fires when click the menu item, return false to cancel the filtering action. item: The clicked menu item. button: The filter button bound to the filter menu. field: The field name. |
Methods
The methods below extend from datagrid.
Name | Parameter | Description |
---|---|---|
isFilterEnabled | none | true if the current filter is enabled and false if it is disabled. |
enableFilter | filters |
Create and enable filter functionality.
The 'filters' parameter is an array of filter configuration.
Each item contains following properties: 1) field: the custom rule on. 2) type: the filter type, possible values are: label,text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. 3) options: the options of the filter type. 4) op: the filter operation, possible values are: contains,equal,notequal,beginwith,endwith,less,lessorequal,greater,greaterorequal. Code examples $('#dg').datagrid('enableFilter'); $('#dg').datagrid('enableFilter', [{ field:'listprice', type:'numberbox', options:{precision:1}, op:['equal','notequal','less','greater'] }]); |
disableFilter | none | Disable filter functionality. |
destroyFilter | none | Destroy the filter bar. |
getFilterRule | field | Get the filter rule. |
addFilterRule | param |
Add a filter rule.
$('#dg').datagrid('addFilterRule', { field: 'desp', op: 'contains', value: 'easyui' }); |
removeFilterRule | field | Remove a filter rule. If the 'field' parameter is not specified, remove all the filter rules. |
doFilter | none | Do the filter based on some filter rules. |
getFilterComponent | field | Get the filter component on a specified field. |
resizeFilter | field | Resize the filter component. |