jQuery jqGrid 的自定义下拉格式化程序

Question

我正在尝试格式化 jqGrid 上的单元格，以便当用户编辑它时，他们会看到组合框（称为 activecombo）的自定义实现，因为选择 html 组件很丑陋。

我已阅读此并查看了演示，但他们没有似乎没有做我想做的事。这是我尝试过的：

    var maritalStatusPickerFunction = function(cellvalue, options,
            rowObject) {
        var optionsArray = [ {
            "id" : 1,
            "status" : "Married"
        }, {
            "id" : 2,
            "status" : "Divorced"
        }, {
            "id" : 3,
            "status" : "Separated"
        }, {
            "id" : 4,
            "status" : "Widowed"
        }, {
            "id" : 5,
            "status" : "Unmarried"
        }

        ];
        var comboInput = $("<input type='text' value='" + cellvalue
                + "' />");
        comboInput.activecombo( {
            source : optionsArray
        });
        return comboInput;
    };

    $('#relationshipsGrid').jqGrid( {
        datatype : "local",
        colNames : [ 'Contact', 'Relationship' ],
        colModel : [ {
            name : 'contact',
            index : 'contact',
            width : 420
        }, {
            name : 'relationship',
            index : 'relationship',
            editable : true,
            formatter : maritalStatusPickerFunction,
            width : 120
        } ],
        width : 600,
        height : 100,
        cellEdit : true,
        editurl : "server.php"
    });

但这显然不是我应该做的，因为这只是在单元格的输入中显示 Object 对象。

谁能给我任何指示吗？

谢谢，

艾米

Answer 1

如果您需要在编辑单元格期间实现组合框的自定义实现，您应该使用自定义编辑控件而不是 自定义格式化程序。

自定义格式化程序用于将单元格的 HTML 表示形式构建为字符串。自定义编辑控件用于创建自定义 DOM 元素，该元素将放置在编辑字段的 元素内。例如，请参阅此、这个和这个旧答案。

我不知道 activecombo 插件，但在我看来，你不能编写自定义编辑控件。相反，您可以尝试在 dataInit 事件句柄="nofollow noreferrer">editoptions 就像

editoptions: {
    dataInit : function (elem) { 
        $(elem).activecombo( {
            source : optionsArray
        }); 
    } 
} 

或者如果您遇到任何问题，例如

editoptions: {
    dataInit : function (elem) { 
        setTimeout(function(){
            $(elem).activecombo( {
                source : optionsArray
            }); 
        },100);
    } 
} 

顺便说一下，您可以对 搜索。然后，用户将在搜索/过滤对话框中使用相同的优势。