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

【问题标题】：Custom dropdown formatter for jQuery jqGridjQuery jqGrid 的自定义下拉格式化程序
【发布时间】：2011-03-02 10:55:13
【问题描述】：

我正在尝试格式化 jqGrid 上的单元格，以便当用户编辑它时，他们会看到组合框的自定义实现（称为 activecombo），因为 select 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 对象。

谁能指点一下？

谢谢，

艾米

【问题讨论】：

标签： jquery jqgrid drop-down-menu formatter

【解决方案1】：

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

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

我不知道 activecombo 插件，但在我看来你不能编写自定义编辑控件。取而代之的是，您可以尝试在 editoptions 中定义 dataInit 事件句柄

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

或者如果你有任何问题，比如

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

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

【讨论】：