Ag-Grid自定义过滤器转服务端过滤遇类型未定义及key异常问题

It looks like your custom TxtCustomFilter is missing two critical methods that Ag-Grid requires to communicate filter state with your server: getModel and setModel. Without these, the grid can't properly serialize your filter's values (like the type and input text) into the filterModel sent to the backend, which explains why you're only seeing column names, no type value, and the undefined key errors.

Let's fix this step by step:

1. Add getModel and setModel to Your Custom Filter #

These methods handle serializing your filter's state to a plain object (for sending to the server) and restoring state from the server's response. Update your TxtCustomFilter code:

function TxtCustomFilter() {
    this.currentFilterValue = ''; // Track filter value internally instead of relying on DOM
}

TxtCustomFilter.prototype.init = function (params) {
    this.valueGetter = params.valueGetter;
    this.setupGui(params);
};

TxtCustomFilter.prototype.setupGui = function (params) {
    this.gui = document.createElement('div');
    this.gui.innerHTML = '<div style="padding: 4px; width: 200px;">' +
        '<div><input style="margin: 4px 0px 4px 0px;" type="text" id="filterText" placeholder="Full name search..."/></div>' +
        // ... rest of your existing HTML
    '</div>';

    this.filterText = this.gui.querySelector('#filterText');
    var that = this;

    function listener(event) {
        that.currentFilterValue = event.target.value.trim();
        params.filterChangedCallback();
    }

    this.filterText.addEventListener("input", listener);
    this.filterText.addEventListener("paste", listener);
    this.filterText.addEventListener("change", listener);
};

// Critical: Serialize filter state to send to server
TxtCustomFilter.prototype.getModel = function () {
    // Only return a model if there's a valid filter value
    if (!this.currentFilterValue) return null;
    
    return {
        type: 'customText', // Custom type identifier for your server to recognize
        filter: this.currentFilterValue
    };
};

// Critical: Restore filter state from server's filterModel
TxtCustomFilter.prototype.setModel = function (model) {
    if (model && model.filter) {
        this.currentFilterValue = model.filter;
        this.filterText.value = model.filter;
    } else {
        this.currentFilterValue = '';
        this.filterText.value = '';
    }
};

2. Ensure Column Definitions Have an Explicit colId #

Ag-Grid uses the column's colId as the key in filterModel. Without an explicit colId, you might get unexpected or undefined keys. Update your column definition:

const columnDefs = [
    {
        headerName: 'Athlete',
        field: 'athlete',
        colId: 'athlete', // Explicit colId ensures a consistent key in filterModel
        filter: TxtCustomFilter,
        // ... other column properties
    }
];

3. Fix the Server-Side whereSql Function #

Use Object.entries to safely iterate over filterModel (avoids issues with undefined keys) and add checks to handle only valid filter items:

function whereSql(request) {
    const whereParts = [];
    const filterModel = request.filterModel;
    
    if (filterModel) {
        // Use Object.entries to get [key, value] pairs safely
        Object.entries(filterModel).forEach(([columnKey, filterItem]) => {
            // Skip invalid or empty entries
            if (!columnKey || !filterItem || !filterItem.type || !filterItem.filter) return;
            
            // Handle your custom filter type
            if (filterItem.type === 'customText') {
                // Important: Escape user input to prevent SQL injection!
                const escapedValue = filterItem.filter.replace(/'/g, "''");
                whereParts.push(`${columnKey} LIKE '%${escapedValue}%'`);
            }
        });
    }
    
    return whereParts.length > 0 ? `WHERE ${whereParts.join(' AND ')}` : '';
}

Key Reminders: #

• SQL Injection Risk: Always escape user input before inserting it into SQL queries (as shown with escapedValue) to protect your database.
• State Reliability: Using this.currentFilterValue to track state instead of reading directly from the DOM makes your filter more robust, especially when restoring state from the server.

内容的提问来源于stack exchange，提问作者Robert