JQGrid 4.7行编辑模式下拉选显示Font Awesome或自定义图标咨询

Hey there! I’ve tackled exactly this scenario with jqGrid 4.7 before, so let me walk you through the steps to get Font Awesome icons or custom static images showing up in your dropdown during inline row editing.

Font Awesome Icons #

First, make sure you’ve included the Font Awesome CSS in your project (the standard link tag in your HTML head will do). Then, tweak your column model and use the dataInit function to inject icons into the dropdown options:

colModel: [
    {
        name: 'status',
        index: 'status',
        editable: true,
        edittype: 'select',
        // Base value mapping (text only initially)
        editoptions: {
            value: "1:已完成;2:未完成",
            dataInit: function(elem) {
                // Modify each dropdown option to add Font Awesome icons
                $(elem).find('option').each(function() {
                    const iconClass = $(this).val() === '1' ? 'fa fa-check' : 'fa fa-times';
                    $(this).html(`<i class="${iconClass}"></i> ${$(this).text()}`);
                });
            }
        },
        // Optional: Show icons in non-editing mode too for consistency
        formatter: function(cellvalue) {
            const iconClass = cellvalue === '1' ? 'fa fa-check' : 'fa fa-times';
            const text = cellvalue === '1' ? '已完成' : '未完成';
            return `<i class="${iconClass}"></i> ${text}`;
        }
    }
]

How this works: #

• The dataInit function runs right after the dropdown element is created for inline editing. We loop through each <option> and prepend the appropriate Font Awesome icon to its text.
• The formatter ensures the cell shows the same icon+text even when not in edit mode, keeping your UI consistent.

Custom Static Images #

For custom static images, the approach is almost identical—we just replace the Font Awesome <i> tag with an <img> element. Make sure your image files are stored in a path accessible by your app:

colModel: [
    {
        name: 'priority',
        index: 'priority',
        editable: true,
        edittype: 'select',
        editoptions: {
            value: "high:高优先级;medium:中优先级;low:低优先级",
            dataInit: function(elem) {
                $(elem).find('option').each(function() {
                    let imgSrc;
                    switch($(this).val()) {
                        case 'high':
                            imgSrc = '/assets/icons/high-priority.png';
                            break;
                        case 'medium':
                            imgSrc = '/assets/icons/medium-priority.png';
                            break;
                        case 'low':
                            imgSrc = '/assets/icons/low-priority.png';
                            break;
                    }
                    // Add image with inline styling for alignment
                    $(this).html(`<img src="${imgSrc}" alt="${$(this).text()}" style="width:16px; height:16px; margin-right:6px;"> ${$(this).text()}`);
                });
            }
        },
        // Match the non-editing cell display to the dropdown
        formatter: function(cellvalue) {
            let imgSrc, text;
            switch(cellvalue) {
                case 'high':
                    imgSrc = '/assets/icons/high-priority.png';
                    text = '高优先级';
                    break;
                case 'medium':
                    imgSrc = '/assets/icons/medium-priority.png';
                    text = '中优先级';
                    break;
                case 'low':
                    imgSrc = '/assets/icons/low-priority.png';
                    text = '低优先级';
                    break;
            }
            return `<img src="${imgSrc}" alt="${text}" style="width:16px; height:16px; margin-right:6px;"> ${text}`;
        }
    }
]

Quick Notes: #

• Double-check your image paths—relative paths should be correct based on where your HTML file is located.
• Adjust the inline styles (width, height, margin) to match your app’s design system.
• jqGrid 4.7 doesn’t escape HTML added via dataInit directly to the DOM, so you don’t have to worry about extra escape/unescape steps here.

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