Question

我正在尝试将jqx编辑器与jqgrid集成。它适用于行编辑部分（get运算符），但我仍然遇到添加部分（set运算符）的问题。对话框窗口随编辑器一起出现，但我不知道如何从jqxeditor获取数据。在这种情况下我应该如何实现我的custom_value函数（文本字段）？谢谢！

$Notegrid.jqGrid({
        url: al.rooturl + suffix,
        datatype: "json",
        mtype: "POST",
        loadonce: false,
        altRows: false,
        colNames: ["ID", "Note","Liée à","Actions"],
        colModel: [
            { name: "id", index: "id", width: 80, align: "center",sorttype: "int" },
            { name: "text", index: "text",editable: true, edittype:"custom", editoptions:{
                    custom_element:function( value, options) {
                        elm = $('<div id="'+options.id+'"></div>');                         
                        // give the editor time to initialize
                        setTimeout( function() {
                            elm.jqxEditor({ 
                                tools: 'bold italic underline size', 
                                width: '100%', 
                                height: '100%'
                            });
                            elm.val( value );
                            }, 100
                        );

                        return elm;
                    },
                    custom_value:function( element, oper, gridval) {    
                        if(oper === 'set'){
                            // how to set the data ?
                        }else{
                            if(oper === 'get') {
                                return element.jqxEditor('val');
                            }
                    }

                    }}, width: 500, formatter: formatText },...

Answer 1

我不知道jqxEditor，但是您的演示调试显示编辑有效，但保存的文本包含双重文本。要解决此问题，您可以尝试使用

return element.jqxEditor('val')[0];

而不是

return element.jqxEditor('val');

请参阅http://jsfiddle.net/OlegKi/nfo2aaj1/18/

更新：我现在更了解你的问题。首先，您尝试使用jqGrid 4.6中不支持的本地数据的表单编辑。它是在4.7版本的jqGrid中实现的。下一个问题是在div中为custom_element创建的jqxEditor的使用情况。问题如下。必须创建一个DOM元素并从custom_element回调中返回它（或者像你一样返回jQuery包装器）。 jqGrid然后为元素分配id和name。因此，不需要在id回调的实现中分配custom_element。在表单编辑中遇到的问题是jqxEditor似乎覆盖了属性。作为解决方法，我建议创建其他外部 <div>以及转发给<div>的主jqxEditor。相应的代码将是

custom_element: function (value, options) {
    var elm = $("<div><div></div></div>");                          
    // give the editor time to initialize
    setTimeout(function() {
        elm.children("div").jqxEditor({ 
            tools: 'bold italic underline size', 
            width: '100%', 
            height: '100px'
        });
        elm.children("div").val(value);
    }, 100);

    return elm;
},
custom_value: function (element, oper, gridval) {   
    if (oper === 'set') {
        // how to set the data ?
    } else {
        if (oper === 'get') {
            return element.children("div").jqxEditor('val');
        }
    }
}

相应的演示http://jsfiddle.net/OlegKi/nfo2aaj1/23/似乎有效。我在演示中使用了最新版本（4.9.2）的免费jqGrid。它支持本地数据的表单编辑。该演示既可以进行内联编辑，也可以进行表单编辑，两者似乎都没有任何问题。

Jqgrid和jqxeditor集成

1 个答案: