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

Question

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

我已阅读this并查看了演示，但它们似乎并没有达到我想要的效果。这是我尝试过的:

    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

如果您需要在编辑单元格期间实现组合框的自定义实现，您应该使用custom editing control而不是 custom formatter .

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

我不知道activecombo插件，但在我看来，你不能编写自定义编辑控件。相反，您可以尝试定义 dataInit editoptions 内的事件句柄喜欢

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

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

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

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