过滤器下拉列表超出了jqxgrid中的过滤器弹出窗口

时间:2014-02-11 18:46:02

标签: jqxgrid jqxwidgets

我正在使用jqxgrid小部件,这是一个jquery网格小部件。

我发现过滤条件下拉列表超出了过滤器弹出窗口,如果我单击过滤条件下拉列表中的最后一项,这会导致过滤器弹出窗口自动关闭。 因此在使用条件下拉列表中的最后一项时无法过滤。您可以在附加的屏幕截图中看到此内容。由于这个原因,我无法过滤null或非null条件。

如何防止这种情况?

Filtering Issue

jqxGrid的代码如下。

            $("#jqxgrid").jqxGrid({
            theme: 'ui-start',
            width: 740,
            source: dataAdapter,
            pageable: true,
            sortable: true,
            filterable: true,
            autoheight: true,
            virtualmode: true,
            rendergridrows: function (args) {
                return args.data;
            },
            updatefilterconditions: function (type, defaultconditions) {
                var stringcomparisonoperators = ['EMPTY', 'NOT_EMPTY', 'CONTAINS', 
                'DOES_NOT_CONTAIN',  'STARTS_WITH', 
                'ENDS_WITH', 'EQUAL', 'NULL', 'NOT_NULL'];
                var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
                var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
                var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
                switch (type) {
                    case 'stringfilter':
                        return stringcomparisonoperators;
                    case 'numericfilter':
                        return numericcomparisonoperators;
                    case 'datefilter':
                        return datecomparisonoperators;
                    case 'booleanfilter':
                        return booleancomparisonoperators;
                }
            },

            updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
           columnfilter, filtertype, filterconditions) {
                var index1 = 0;
                var index2 = 0;
                if (columnfilter != null) {
                    var filter1 = columnfilter.getfilterat(0);
                    var filter2 = columnfilter.getfilterat(1);
                    if (filter1) {
                        index1 = filterconditions.indexOf(filter1.comparisonoperator);
                        var value1 = filter1.filtervalue;
                        filterinputfield1.val(value1);
                    }
                    if (filter2) {
                        index2 = filterconditions.indexOf(filter2.comparisonoperator);
                        var value2 = filter2.filtervalue;
                        filterinputfield2.val(value2);
                    }
                }
                filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
                filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
            },
            columns: [
                { text: 'Sales Order ID', dataField: 'SalesOrderID', width: 120 },
                { text: 'Sales Order Number', dataField: 'SalesOrderNumber', width: 120 },
                { text: 'Purchase Order Number', dataField: 'PurchaseOrderNumber', width: 120 },
                { text: 'Customer ID', dataField: 'CustomerID', width: 120 },
                { text: 'Order Date', dataField: 'OrderDate', width: 130, cellsformat: 'MM-dd-yyyy' },
                { text: 'Due Date', dataField: 'DueDate', width: 130, cellsformat: 'MM-dd-yyyy' }
            ]
        });

1 个答案:

答案 0 :(得分:0)

似乎详细记下您的问题有时会突然为您提供解决方案和答案。就我而言,确实如此。

我已在我的代码中将 autoDropDownHeight设置为true ,实际上需要设置为false

正确的代码应如下所示。

 filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: false, selectedIndex: index1 });
 filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: false, selectedIndex: index2 });