EasyUI使用心得——datagrid的条件查询，过滤

来源：互联网发布：javascript let var 编辑：程序博客网时间：2024/06/05 17:22

在页面初始化时加入过滤代码和过滤条件：

dg.datagrid('enableFilter', [{                    field:'docTypeName',                    type:'combobox',                    options:{                        panelHeight:'auto',                        data:[{value:'{这是查询时候的value值}',text:'查询的时候显示的文本内容'},{value:'',text:''}],                        onChange:function(value){                            if (value == ''){                                dg.datagrid('removeFilterRule', 'docTypeName');                            } else {                                dg.datagrid('addFilterRule', {                                    field: 'docTypeName',                                    op: 'equal',                                    value: value                                });                            }                            dg.datagrid('doFilter');                        }                    }                },{                    field:'fontType',                    type:'textbox',                    options:{precision:1},                    op:['equal','notequal','less','greater']                }            ]);

datagrid的定义：

<table id="dg" title="水印配置信息" class="easyui-datagrid" style="width:100%;height:auto"             pagination="true" url='获取的url' remoteFilter="true"            pageSize="20"            rownumbers="true" fitColumns="true" singleSelect="true">        <thead>            <tr>                <th field="id"  hidden="true"></th>                //这里继续写你的所有列            </tr>        </thead>    </table>

这里实现的还有两种过滤方式，官方文档中还有更多。。。
EasyUI官方demo

0 0