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

冷不防 2022-10-01 00:59 425阅读 0赞

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

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][EasyUI_demo]

[EasyUI_demo]: http://www.jeasyui.com/demo/main/index.php